当前位置 : 首页 » 互动问答 » 正文

JavaScript Form Submit - Confirm or Cancel Submission Dialog Box

分类 : 互动问答 | 发布时间 : 2011-06-29 11:39:59 | 评论 : 6 | 浏览 : 293276 | 喜欢 : 131

For a simple form with an alert that asks if fields were filled out correctly, I need a function that does this:

  • Shows an alert box when button is clicked with two options:

    • If "OK" is clicked, the form is submitted
    • If cancel is clicked, the alert box closes and the form can be adjusted and resubmitted

I think a JavaScript confirm would work but I can't seem to figure out how.

The code I have now is:

<script>
function show_alert() {
   alert("xxxxxx");
}
</script>
<form>
   <input type="image" src="xxx" border="0" name="submit" onclick="show_alert();"
      alt="PayPal - The safer, easier way to pay online!" value="Submit">
</form>

回答(6)

  • 1楼
  • A simple inline JavaScript confirm would suffice:

    <form onsubmit="return confirm('Do you really want to submit the form?');">
    

    No need for an external function unless you are doing validation, which you can do something like this:

    <script>
    function validate(form) {
    
        // validation code here ...
    
    
        if(!valid) {
            alert('Please correct the errors in the form!');
            return false;
        }
        else {
            return confirm('Do you really want to submit the form?');
        }
    }
    </script>
    <form onsubmit="return validate(this);">
    
  • 2楼
  • function show_alert() {
      if(confirm("Do you really want to do this?"))
        document.forms[0].submit();
      else
        return false;
    }
    
  • 3楼
  • You could use the JS confirm function.

    <form onSubmit="if(!confirm('Is the form filled out correctly?')){return false;}">
      <input type="submit" />
    </form>
    

    http://jsfiddle.net/jasongennaro/DBHEz/

  • 4楼
  • <form onsubmit="return confirm('Do you really want to submit the form?');">
    
  • 5楼
  • OK, just change your code to something like this:

    <script>
    function submit() {
       return confirm('Do you really want to submit the form?');
    }
    </script>
    
    <form onsubmit="return submit(this);">
       <input type="image" src="xxx" border="0" name="submit" onclick="show_alert();"
          alt="PayPal - The safer, easier way to pay online!" value="Submit">
    </form>
    

    Also this is the code in run, just I make it easier to see how it works, just run the code below to see the result:

    function submitForm() {
      return confirm('Do you really want to submit the form?');
    }
    <form onsubmit="return submitForm(this);">
      <input type="text" border="0" name="submit" />
      <button value="submit">submit</button>
    </form>

  • 6楼
  • <form method="post" id="Form" action="form.php" onSubmit="alert('Thanks for your feedback.');" >
    

相关阅读:

How to move an element into another element?

How to move an element into another element?

Set HTTP header for one request

Remove duplicates from an array of objects in JavaScript

Can I call jquery click() to follow an <a> link if I haven't bound an event handler to it with bind or click already?

Check whether a string matches a regex in JS

jQuery event to trigger action when a div is made visible

Check if user is using IE with jQuery

Convert HTML to PDF in .NET

100% width background image with an 'auto' height