如何在同一按钮上处理JavaScript操作并提交表单操作

Question

In my form, I am trying to run one javascript function to compare 2 textbox values. also, In that same button, i am trying to perform submit action to save the form data to DB and redirect to next page. JS function works fine, it generates alert for wrong input, but as soon as I click on alert. It is redirecting to next page without saving form data to DB. Can anyone tell me how to stop this?

I want to do:

1. Compare 2 textbox values; if they are the same form should submit and save to DB(working)
2. If values are not matching then show alert(working), but it on clicking "ok" it should not redirect until the values are right for both textboxes.

JSFiddle

 function check(){ var fistInput = document.getElementById("total").value; alert(fistInput); var secondInput = document.getElementById("amount").value; if(fistInput === secondInput) { alert("Good"); } else if(fistInput > secondInput) { alert("Please input correct value"); } else { alert("Please input correct value"); } } 

  <form class="form-horizontal" action="print-receipt.php" method="post" name="myform" autocomplete="off" > <input type="text" id="total" placeholder="Total Amount" name="total" required> <input type="text" id="amount" placeholder="Total" name="amount"> <button type="submit" name="submit" onclick="check()" >Submit</button> </form> 

Answer 1

Use event.preventDefault() when form data is invalid, to prevent the form from being submitted.

Instead of onclick on your type='submit' button, use onsubmit handler on your <from> element. You can pass an event to your function like this:

<form onsubmit='check(this)'></form>

 function check(event){ var fistInput = document.getElementById("total").value; alert(fistInput); var secondInput = document.getElementById("amount").value; if(fistInput === secondInput) { alert("Good"); } else if(fistInput > secondInput) { event.preventDefault(); alert("Please input correct value"); } else { event.preventDefault(); alert("Please input correct value"); } } 

  <form class="form-horizontal" action="print-receipt.php" method="post" name="myform" autocomplete="off" onsubmit="check(this)"> <input type="text" id="total" placeholder="Total Amount" name="total" required> <input type="text" id="amount" placeholder="Total" name="amount"> <button type="submit" name="submit" >Submit</button> </form> 

Answer 2

Try this:

 var form = document.getElementById("f"); function check(){ var fistInput = document.getElementById("total").value; alert(fistInput); var secondInput = document.getElementById("amount").value; if(fistInput === secondInput) { alert("Good"); form.action = "print-receipt.php"; } else if(fistInput > secondInput) { alert("Please input correct value"); form.action = ""; } else { alert("Please input correct value"); form.action = ""; } } 

 <form id="f" class="form-horizontal" action="" method="post" name="myform" autocomplete="off"> <input type="text" id="total" placeholder="Total Amount" name="total" required> <input type="text" id="amount" placeholder="Total" name="amount"> <button type="submit" name="submit" onclick="check()" >Submit</button> </form>