Question

我尝试在第二种形式中添加隐藏字段，并在提交前使用第一个表单值填充这些字段（使用java脚本）。

第一种形式：

                    <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 1

可能这不是最好的解决方案，但你可以试试这个。

<!--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

使用addEventListener("change", function(){...}收听输入更改，并在输入值更改时填写另一个表单。

演示：

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

在contactform上提交所有字段

$("#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);

})

让我知道它的工作与否

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

3 个答案: