简体   繁体   中英

jQuery confirm button not in a popup confirm() dialog

I have a long form that I am validating with the jQuery validate plugin. After the form validates, I want the submit button to change into a confirm button with an appropriate message above about checking the form for errors. This button, when clicked again, should submit the form for real this time as long as all the required fields are still filled in. I have the following:

var confirmed = function(){
  alert($("#someForm").attr("name")); //just to see the function fire...
  $("#someForm").submit();  
  return true;
}

$(document).ready(function(){
  $("#someForm").validate({
    submitHandler: function(form){
      var oldBtn = $("#submit");
      var newBtn = oldBtn.clone();
      newBtn.click(confirmed)
      newBtn.text("Confirm");
      newBtn.insertBefore(oldBtn);
      oldBtn.remove();
      newBtn.attr({"id": "submit"});
    }
  });
});

...

<button type="submit" id="submit">Submit</button>

It works to validate the form, then the button changes text, the the function fires (the alert has the name of the form in it) when clicked, but the form never submits for real. Any help or ideas would be greatly appreciated.

Thanks

EDIT: Ok, I think I have figured it out. I have the submit button hidden and a button called Validate that just checks if the form is validated without submitting using $("#someForm").valid(); If it checks out, I hide the "Submit" button and show the "Confirm" button along with a little message about checking your submission, etc. See below:

$(document).ready(function(){
  $("#submitBtn").hide();
  $("#confMessage").hide();
  $("#someForm").validate();
});

var checkValid = function(){
  var isValid = $("#volunteer").valid();
  if(isValid){
    $("#validBtn").remove();
    $("#submitBtn").show();
    $("#confMessage").show();
  }
}

...

<p id="confMessage">Please review your submission.</p>    
<p><button id="validBtn" onclick="checkValid()">Validate</button>    
<button type="submit" id="submitBtn">Submit</button></p>

Works perfectly, and is a heck of a lot cleaner than my original code!

remove oldBtn.remove(); then it will work.

You have

  var oldBtn = $("#submit");
  var newBtn = oldBtn.clone();

What above line doing is adding same DOM in html so that mean ID will be copied too.
And ID must be unique for each DOM .
Try to rewrite ID for cloned DOM and try.

AND

newBtn.click(confirmed)

This code means you are assigning event to newBtn not calling click event.

For call a click event use .trigger()

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM