Cancel submit on ServicePortal when button clicked

Ahlgreens
Kilo Contributor

Hi friends - this is my first question. I am glad to join the community

I am trying to make a onSubmit() client script with a spModal with two buttons; Yes and No which is does. 

When No is clicked, it should Submit the ticket (Record Producer) and when clicked Yes, it should download a file without submitting (this is working).

My issue is that when Submit is clicked, the box appears but it submits the ticket right away, even though I haven't clicked either yes or no. 

I am not the strongest coder. Can you suggest what I can add on to the code? Maybe when button no is clicked, it will submit and when button 'yes' is clicked it won't submit but will download the file? 

 

OBS, I don't have access to modify HTML so I would appreciate if it could be made only in the client script

function onSubmit() {
	if (typeof spModal != 'undefined') {
		spModal.open({
			message: 'msg', 
			title: 'title',
			buttons: [ 
				{label:'✘ No', cancel: true},
                {label:'✔ Yes', primary: true}
			]
		}).then(function(){
			location.href="URL";
		});
	}
	
}

 

I really hope you can help.

Best regards,

Stefan

1 ACCEPTED SOLUTION

Jon Barnes
Kilo Sage

Looks like you have done a good job getting this really close. Here is what I would update to get this working. This is completely untested, so you may have to play around with this a bit. the concept is that to cancel a submission, your onsubmit script has to return false. So you will see the "return false" added in at the bottom. But also, when they respond to the modal, you have to save their response somewhere outside the scope of this function (I chose g_form object because it is available) and resubmit the form. That will trigger this script again, but it will detect that the modal has already been confirmed and will skip it.

This methodology also works if you have to do a glideajax call in an onSubmit script. I have used it for that use case before and it does work. If this doesn't work, let me know and we can drop some console.log() calls in there to see where it is hanging up.

function onSubmit() {
  // we will use the g_form JS object here to store a true/false value for us
  // telling us whether the user has already clicked No
  if (g_form._hasConfirmed == true) {
      // this means they have already confirmed via the spModal
      // so no need to check again
      return true;
  }
  if (typeof spModal != 'undefined') {
    // this is SP, none of the below
    // will work on native UI FYI
    spModal.open({
      message: 'msg', 
      title: 'title',
      buttons: [ 
        {label:'✘ No', cancel: true},
        {label:'✔ Yes', primary: true}
      ]
    }).then(function(confirmed) {
        if (confirmed) {
	  location.href="URL";
        } else {
          g_form._hasConfirmed = true;
          if (typeof g_form.orderNow != 'undefined') {
            g_form.orderNow();
          } else {
            g_form.submit();
          }
        }
    });
    return false;
  }
}

View solution in original post

3 REPLIES 3

Jon Barnes
Kilo Sage

Looks like you have done a good job getting this really close. Here is what I would update to get this working. This is completely untested, so you may have to play around with this a bit. the concept is that to cancel a submission, your onsubmit script has to return false. So you will see the "return false" added in at the bottom. But also, when they respond to the modal, you have to save their response somewhere outside the scope of this function (I chose g_form object because it is available) and resubmit the form. That will trigger this script again, but it will detect that the modal has already been confirmed and will skip it.

This methodology also works if you have to do a glideajax call in an onSubmit script. I have used it for that use case before and it does work. If this doesn't work, let me know and we can drop some console.log() calls in there to see where it is hanging up.

function onSubmit() {
  // we will use the g_form JS object here to store a true/false value for us
  // telling us whether the user has already clicked No
  if (g_form._hasConfirmed == true) {
      // this means they have already confirmed via the spModal
      // so no need to check again
      return true;
  }
  if (typeof spModal != 'undefined') {
    // this is SP, none of the below
    // will work on native UI FYI
    spModal.open({
      message: 'msg', 
      title: 'title',
      buttons: [ 
        {label:'✘ No', cancel: true},
        {label:'✔ Yes', primary: true}
      ]
    }).then(function(confirmed) {
        if (confirmed) {
	  location.href="URL";
        } else {
          g_form._hasConfirmed = true;
          if (typeof g_form.orderNow != 'undefined') {
            g_form.orderNow();
          } else {
            g_form.submit();
          }
        }
    });
    return false;
  }
}

Thank you very much, I modified the code a bit and got it to work.

However, as I can understand the intention with the code, it doesn't seem to be store a variable if the form was already filled out, i.e. if Submit was already clicked once. Though, now it doesn't Submit right away before awaiting an input in the spModal. 

It would be wonderful if it's possible to do it so when "Submit" is clicked for the first time, it comes up with the box (SpModal). If "Yes" is clicked it redirects to an URL and if "No", the box closes without Submitting and when upon Submitting the second time, it will submit without the SpModal being executed.

Do you have any suggestions to a modification in this code?

Hi, I'm also looking for a solution for this where users only have to click the button once. Does anyone have a modified solution for this one?