用第一表单值（HTML，Javascript）填充第二表单隐藏字段

Question

I'm trying to add hidden fields in the second form and fill these fields (using java script) with the first form values before submission.

First form:

                    <form id="contactform" name="cform" class="contact-form clearfix form oswald normal antialiased" method="post" action="./contact/includes/contact-processs.php">
                    <div class="fullwidth clearfix">
                        <div class="f-left">
                            <input type="text" name="name" id="name" placeholder="Name">
                        </div>
                        <div class="f-right">
                            <input type="email" name="email" id="email" placeholder="E-Mail">
                        </div>
                    </div>
                    <textarea name="message" id="message" placeholder="Hashtags / Target Audience"></textarea>
                    <div class="note"></div>
                    <button type="submit" id="submit" class="darkertext" name="submit" onclick="loading()">GET STARTED</button>
                </form>

Second Form:

Answer 1

May be this is not the best solution but you can try this.

<!--Form 1-->
<form onsubmit="fill()">
  <input type="text" id="name" name="name">
  <input type="submit">
</form>

<!-- Form 2-->
<form>
  <input type="hidden" id="nameHidden">
</form>

//Javascript code
function fill() {
   var element1 = document.getElementById("nameHidden");
   var element2 = document.getElementById("name");
   element1.value = element2.value;
}

Answer 2

Use addEventListener("change", function(){...} to listen to input change and fill the other form on input value change.

Demo :

 paypalform.name.addEventListener("change", function(){ contactform.name.value = paypalform.name.value; }); paypalform.email.addEventListener("change", function(){ contactform.email.value = paypalform.email.value; }); paypalform.message.addEventListener("change", function(){ contactform.message.value = paypalform.message.value; }); 

 <form id="paypalform" name="cform" class="contact-form clearfix form oswald normal antialiased" method="post" action="./contact/includes/contact-processs.php"> <div class="fullwidth clearfix"> <div class="f-left"> <input type="text" name="name" id="name" placeholder="Name"> </div> <div class="f-right"> <input type="email" name="email" id="email" placeholder="E-Mail"> </div> </div> <textarea name="message" id="message" placeholder="Hashtags / Target Audience"></textarea> <div class="note"></div> <button type="submit" id="submit" class="darkertext" name="submit" onclick="loading()">GET STARTED</button> </form> <!---------Second Form----------> <form id="contactform" name="cform" class="contact-form clearfix form oswald normal antialiased" method="post" action="./contact/includes/contact-processs.php"> <div class="fullwidth clearfix"> <div class="f-left"> <input type="text" name="name" id="name" placeholder="Name"> </div> <div class="f-right"> <input type="email" name="email" id="email" placeholder="E-Mail"> </div> </div> <textarea name="message" id="message" placeholder="Hashtags / Target Audience"></textarea> <div class="note"></div> <button type="submit" id="submit" class="darkertext" name="submit" onclick="loading()">GET STARTED</button> </form> 

Answer 3

on contactform submit all field

$("#contactform").on("submit",function(){
  var name=$(this).find("#name").val();
  var email=$(this).find("#email").val();
  var message=$(this).find("#message").val();

  var form2=$("#paypalform");

  form2.find("#name").val(name);
  form2.find("#email").val(email);
  form2.find("#message").val(message);

})

let me know it work or not