javascript - 如何使用javascript从一个表单获取值并发布到另一个表单？

Question

我在同一页面中有两个表单， 表格 1 ID:主页/ 表 2 ID:联系方式 单击发送按钮后，我需要在 form2(contact) 的文本框中填写 form(home) 中的值。

<form id="home" method="get" action="#portfolio" role="form"> 
  <select class="form-control" id="pd_howmuch">
         <option>HOW MUCH ?</option>
         <option>$100</option>
         <option>$200</option>
        </select>
        <input id="pd_fname" type="text" name="name">
        <input id="pd_lname" type="text" name="surname">
        <input id="pd_zipcode" type="tel" name="zipcode">
        <input id="pd_applynowbt" type="submit" value="Send">
    </form>
<section id="portfolio">
<form id="contact" method="post" action="contact.php" role="form">
       <select class="form-control" id="howmuch1">
         <option>HOW MUCH ?</option>
         <option>$100</option>
         <option>$200</option>
        </select>
        <input id="fname1" type="text" name="name">
        <input id="lname2" type="text" name="surname">
        <input id="zipcode2" type="tel" name="zipcode">
        <input id="applynowbt" type="submit" value="Submit">
    </form>
</section>

Answer 1

好的，如果我理解正确，您希望将第一个表单中的信息填充到第二个表单中。

因此，要完成此任务，您需要将事件处理程序附加到第二个表单并防止默认行为

工作中demo希望对您有帮助

var homeForm = document.getElementById("home");

var contactForm = document.getElementById("contact");
contactForm.addEventListener("submit", function(e) {

    e.preventDefault();
    contactForm.elements.item(0).value = homeForm.elements.item(0).value
    contactForm.elements.item(1).value = homeForm.elements.item(1).value
    contactForm.elements.item(2).value = homeForm.elements.item(2).value
    contactForm.elements.item(3).value = homeForm.elements.item(3).value

}, false);