Confirm javascript form submit

Posted Date:11-07-2017

In this post we will explain confirm java-script form submit with displaying the form input values.

Step 1: Include jQuery  Plugin

<source src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></source >

Step 2:Create html form with input values using the following code

<form name="pendingrequest" id="pendingrequest" action="javascript:void(0)" method="POST" >
 <table >
  <tr>
  <input type="text" name="rate1">
  <input type="text" name="rate2">
  <input type="text" name="rate3">
   <td><input class="submit-test" type="submit" name="action" id="action" onclick="Add()" value="Reject"></td>
 
  </tr>
 </table> 
</form>

Step 3:Write the following java-script code for display the form input values with confirm alert message

  function Add()
  {
   var serializedData = $('#pendingrequest').serializeArray();
    var data1 = JSON.stringify(serializedData);
    var data = JSON.parse(data1);
    // alert(data[0].name);
    // alert(data[1].name);
    var txt;
   var r = confirm("Rate="+data[0].name+ "Rate2="+data[0].name);
   if (r == true) {
       txt = "You pressed OK!";
   } else {
       txt = "You pressed Cancel!";
   }
    
  }

If you are following above steps and you will get following codes

<!DOCTYPE html>
<html>
 <head>
<source src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></source>

  <source>
   function Add()
   {
    var serializedData = $('#pendingrequest').serializeArray();
     var data1 = JSON.stringify(serializedData);
     var data = JSON.parse(data1);
     var txt;
    var r = confirm("Rate="+data[0].name+ "Rate2="+data[0].name);
    if (r == true) {
        txt = "You pressed OK!";
    } else {
        txt = "You pressed Cancel!";
    }
     
   }

  </source>
 </head>
 <body>

  <form name="pendingrequest" id="pendingrequest" action="javascript:void(0)" method="POST" >
   <table >
    <tr>
    <input type="text" name="rate1">
    <input type="text" name="rate2">
    <input type="text" name="rate3">
     <td><input class="submit-test" type="submit" name="action" id="action" onclick="Add()" value="Save"></td>
   
    </tr>
   </table> 
  </form>

 </body>
</html>