1

I have a Script Editor web part running on a 'NewForm.aspx' page that contains some javascript that pops up a confirmation box if a certain field contains a certain line of text when the user is creating a new item on the list.

If they click 'Ok' I want the form to submit (create the new item in the list), if they click 'Cancel' then return to the form submission page without submitting the form.

So far the pop-up shows up when they enter the 'test' into the 'Title field', and the 'Cancel' button works (by just returning them to their form without submitting), but clicking 'Ok' doesn't submit the form. It also just returns them to the form submission page as if they pressed 'Cancel.'

Here's my code:

<script type="text/javascript" src="/sites/gameops/SiteAssets/jquery-1.12.1.js"></script>
<script type="text/javascript">
 var j = jQuery.noConflict(); 
 function PreSaveAction() { 
 var txtTitle = j(":input[title='Title']").val(); 
   if(txtTitle == 'test'){        
   confirm("Please enter a title");   //write popup code here       
   return false;
}
else{
   return true;
    }
}
</script>

2 Answers 2

0

I am assuming you are simply trying to use SharePoint client side form validation using the PreSaveAction method.

Your issue is your code is always returning false which is the same thing as making validation fail everytime. What you need to do is retrieve the boolean result from the Confirm() method and return the proper boolean value. If the user clicks "Okay", then return True, otherwise false.

Hopefully this code will work for you and give you an idea on what you need to do:

<script type="text/javascript" src="/sites/gameops/SiteAssets/jquery-1.12.1.js"></script>
<script type="text/javascript">
 var j = jQuery.noConflict(); 
 function PreSaveAction() { 
   var txtTitle = j(":input[title='Title']").val(); 
   if(txtTitle == 'test'){        
      var result = confirm("Please enter a title"); //write popup code here
      if(result == true) {
        return true;
      }
      else{       
        return false;
      }
   }
   else{
     return true;
   }
}
</script>
8
  • Thanks for the response @hvndev. For this line: $('form#yourForm').submit(); Am I putting in the name of the Form? The ID of the Form? And how do I find that using Inspect Element on Chrome? I'm really new to Javascript so I need a little hand holding. I hope I don't need to go the Ajax route, looks even more complicated than what I have right now! :D
    – onett199x
    Aug 13, 2018 at 21:19
  • In the example, that would be the ID of the form. If your form does not have an ID but a "name" attribute instead, you can search your form by name as well.
    – hvndev
    Aug 13, 2018 at 23:45
  • I updated my answer to show you screen shot of using Chrome's inspect tool. Do read up on JQuery Selectors as this is foundation to using JQuery.
    – hvndev
    Aug 13, 2018 at 23:55
  • My form id is also aspnetForm and looks just like your screenshot above so I tried that in this line: $('form#aspnetForm').submit(); That didn't submit the form after hitting 'Ok' on the pop-up so then I tried it as a name instead with this line $('form[name="aspnetForm"]').submit(); That also didn't work. I'm lost! Any other ideas?
    – onett199x
    Aug 14, 2018 at 14:25
  • Oh okay, I think I know what you are trying to do now. I thought you created a custom form but I believe you are trying to submit the out-of-the-box SharePoint form. I updated my answer which I believe is what you are trying to do. Side note, my apologies as I did not read through your code with details. Since you detached JQuery from the jQuery.noConflict() method, the correct selector would be $j('form#aspnetForm').submit().
    – hvndev
    Aug 14, 2018 at 20:57
0

I thought I'd rewrite the other guys answer as I feel it is much better for beginners to learn in vanilla JS or else you end up with bad habits. I have also changed the code so that it should automatically find your form and submit it.

<script type="text/javascript">
 function PreSaveAction() { 
 var txtTitle = document.querySelector("input[title='Title']").value; 
   if(txtTitle == 'test'){        
      var result = confirm("Please enter a title");   //write popup code here
      if(result == true) {
        document.querySelector('form[action="' + window.location.pathname + '"]').submit();
      }       
      return false;
   }
   else{
     return true;
   }
}
</script>
1
  • Thanks for the response Zalx. I pasted that into the Script Editor on the NewForm page and it doesn't work. The pop-up window appears when typing in 'test' to the Title field just like before but clicking 'Ok' on the pop-up does not submit the form and create the new item on the List. Any idea why?
    – onett199x
    Aug 14, 2018 at 14:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.