javascript - Submit form only if a function return true - Stack Overflow

I need a way to submit the form ONLY if foo return true. I tried this code but it submits the form even if foo return false.

<input type="submit" value="submit" onclick="return foo();" />
<script type="text/javascript">
    function foo() {
        // if... return true
        // else return false
    }
</script>

If I use the onsubmit function, then it submits first. So it's not good in my case.

I need a way to submit the form ONLY if foo return true. I tried this code but it submits the form even if foo return false.

<input type="submit" value="submit" onclick="return foo();" />
<script type="text/javascript">
    function foo() {
        // if... return true
        // else return false
    }
</script>

If I use the onsubmit function, then it submits first. So it's not good in my case.

• javascript

Share Improve this question Follow edited Jul 27, 2015 at 2:03 sfletche 49.9k3131 gold badges109109 silver badges120120 bronze badges asked Jul 25, 2015 at 5:23 xRobotxRobot 26.6k7272 gold badges192192 silver badges317317 bronze badges 10

• is there any error in your browser console – Arun P Johny Commented Jul 25, 2015 at 5:24
• no, any error in the console – xRobot Commented Jul 25, 2015 at 5:26
• 1 jsfiddle/arunpjohny/e4tdzme4/2 - looks fine - can you try to recreate the issue in the fiddle – Arun P Johny Commented Jul 25, 2015 at 5:27
• HTML5 form validation will do this automatially...? – xyz Commented Jul 25, 2015 at 5:28
• I know, but it must work on old browsers too. – xRobot Commented Jul 25, 2015 at 5:29

 |  Show 5 more ments

3 Answers 3

Sorted by: Reset to default 2

you can try alternative method using jquery ajax submit as follows, which I am using, may helpful to u too..

 var request;
    $("#YourFormId").submit(function(event){

  if(yourFunction()==false) {
         return false;
     }

        if (request) {
            request.abort();
        }
       var $form = $(this);
       var $inputs = $form.find("input, select, button, textarea");
       var serializedData = $form.serialize();
       $inputs.prop("disabled", true);
       request = $.ajax({
            url: "yourFormActionPage.php",
            type: "post",
            data: serializedData
        }); 
        request.done(function (response, textStatus, jqXHR){
            //ok
        });

        request.fail(function (jqXHR, textStatus, errorThrown){
             //track it
        });

        request.always(function () {
            $inputs.prop("disabled", false);
        });

        event.preventDefault();
    });

One possible solution is to use the form's submit event. You can put the conditional in the submit event handler so the submission is halted when foo() does not return true.

(NOTE: I had to guess what the selector might be for your form since it's not part of your question)

document.getElementById('myForm').submit(function(e) {
  if (!foo()) {
    e.preventDefault(); 
  }
})

You can use ajax submit.

<form class="formbox" method="post" action="/your/action/url" id="myForm" name="myForm">
                    <input type="text" id="name" class="name" name="name" value=""/>
                    <input type="submit" value="submit" onclick="return foo();" />                      
              </form>

<script src="http://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script type="text/javascript">
function foo() {
    if(1==1) {
        alert("Success: Going to call the function");
        $("#myForm").submit(); //calling function.
    } else {
        alert("Error: ");
    }
}