CODEWITHSUNDEEP
javascriptjqueryformssubmit
user1053865
user1053865

Reputation: 89

JQUERY modal box confirm form submit

I have a form that when the submit is hit i want a modal box to pop up with a YES and NO button i want the both the yes and no button to submit the form but i need to know which button they clicked.

Here is my code

<input onclick="$.msgbox('confirm text',{
  buttons : [
    {type: 'submit', value:'YES'},
    {type: 'submit', value:'NO'}
  ]
}, function(buttonPressed) {

});" name="btnApply" id="btnApply" tabindex="41" src="images/btnsubmit.jpg" style="border-width: 0px;" type="image" />

My problem is the form is submitting when the user clicks submit.

Any help or ideas would be great

thanks

Upvotes: 2

Views: 2659

Answers (3)

St&#233;phane Bebrone
St&#233;phane Bebrone

Reputation: 2763

Not sure about the msgbox either but some remarks about your code:

  1. Don't attach your JS logic directly to your code, but use jQuery to attach click event to your markup (see unobtrusive javascript):

    Instead of 

    <input onclick="$.msgbox('confirm text',{

    Use

    $('#btnApply').click(function(e) {

  2. You can stop the click handling by setting as false one property of the event parameter:

    $('#btnApply').click(function(e) {
     e.preventDefault(); // stop click handling and so form submitting

  3. Finally, handle the form submitting or not in the msgbox callback function:

    $.msgbox("Are you sure that you want to permanently delete the selected element?", {
type: "confirm",
buttons: [
    {
    type: "submit",
    value: "Yes"},
{
    type: "submit",
    value: "No"},
{
    type: "cancel",
    value: "Cancel"}
]
}, function(result) {
    if(result == "Yes") // display the form on submit
         $('form').submit();
});

jsFiddle available.

Upvotes: 0

leepowers
leepowers

Reputation: 38298

While I'm not familiar with the $.msgbox plugin but you should be opening the modal dialog on <form> submit and not on a button press, as the form can also be submitted by an enter/return on certain input fields (like text boxes <input type="text|password">)

var confirmed = false;
$('#myform').bind('submit', function() {
  if (confirmed) {
    return true;  // confirmation received, continue form submission process
  } else {
    $.msgbox(
      'my modal message',
      {
        buttons : [
          { type: 'button', value: 'YES' },
          { type: 'button', value: 'NO' }
        ]
      }, 
      function(buttonPressed) {
        confirmed = buttonPressed.value;  // Update the confirmed variable
        $('#myform').submit();  // re-submit the form
      }
    );  
    return false;  // cancel form submission
  }
});

Upvotes: 2

ferenyl
ferenyl

Reputation: 181

Add return false:

<input onclick="$.msgbox('Would you like a cash advance of up to £1000 whilst we process your loan?',{
  buttons : [
    {type: 'submit', value:'YES'},
    {type: 'submit', value:'NO'}
  ]
}, function(buttonPressed) {

}); return false;" name="btnApply" id="btnApply" tabindex="41" src="images/btnsubmit.jpg" style="border-width: 0px;" type="image" />

Upvotes: 1

Related Questions