how to display a value(in text field) from one form(after submitting it) to another form (both are on the same page)

Question

So, I have the form1 where i am giving values in two fields and submitting it ,

    <form action="new_cand.php" name="form1" method="post">

         <input type="number" name="aadhar_r" id="aadhar_r"  required/>

          <input type="text" name="cand_r" id="cand_r" required/>

       <input type="submit" name="submit" id="submit"  onclick="setValues();" />

     </form>

I want these values to automatically be written and visible in the two textinput and numberinput fields in form2.

<form action="in_cand.php" name="form2" method="post"> 

   <input type="number" id="a_number" name="a_number" required>

   <input type="text" id="cid" name="cid" required>

   <input type="submit" name="submit" id="submit" />

 </form>

how do i use javascript to automatically set values visible and ready to submit to the fields in form2 ???

Note : i'm using two forms because they both have different actions after clicking submit and both the forms are on the same page.

Answer 1

Here is one small example using id hashes, with this idea, I think you can start, object hash will have pair list,

You can restrict specific form by mentioning id of it, in place of $('form :input').on() :

 var hash = { aadhar_r : 'a_number', cand_r : 'cid' } $('form :input').on('keyup',function(){ if(this.id in hash){ $('#'+hash[this.id]).val($(this).val()) } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="new_cand.php" name="form1" method="post"> <input type="number" name="aadhar_r" id="aadhar_r" required/> <input type="text" name="cand_r" id="cand_r" required/> <input type="submit" name="submit" id="submit" onclick="setValues();" /> </form> <form action="in_cand.php" name="form2" method="post"> <input type="number" id="a_number" name="a_number" required> <input type="text" id="cid" name="cid" required> <input type="submit" name="submit" id="submit" /> </form> 

Answer 2

If you use jQuery, you can serialize your first form and send it directly to the server. Then you get the value from the input field and set it to the other input field.

Form 1:

<form id="form1">
    <input type="number" name="aadhar_r" id="aadhar_r"  required/>
    <input type="text" name="cand_r" id="idOfInput1" required/>
    <button id="submit" />
</form>

Script:

$("#submit").click(function () {
     $.post("new_cand.php", $("#form1").serializeArray(), function () { /* Nothing to do with new_cand.php data */});
     $("#idOfInput2").val($("#idOfInput1").val());
});

Form 2:

<form action="in_cand.php" name="form2" method="post"> 
   <input type="number" id="a_number" name="a_number" required>
   <input type="text" id="idOfInput2" name="cid" required>
   <input type="submit" name="submit" id="submit" />
 </form>

Attention : this is not tested, requires jQuery and is for a post method