用第一个表单值(HTML、Javascript）填充第二个表单隐藏字段

Fill second form hidden fields with first form values (HTML, Javascript)

本文关键字：表单 填充 第二个 隐藏 字段 Javascript 第一个 HTML      更新时间：2024-06-10

我试图在第二个表单中添加隐藏字段，并在提交前用第一个表单值填充这些字段（使用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>

第二种形式：

这可能不是最好的解决方案，但您可以尝试一下。

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

使用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>

在联系人表单上提交所有字段

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

让我知道它是否工作

相关文章：