2016-09-18 47 views
1

我在同一页有两种形式, Form 1 ID:home/ Form 2 ID:contact 一旦发送按钮被点击,我需要form2(联系人)文本框中填写的值(主页) 。如何从一个窗体获得价值并使用javascript发布到另一个窗体?

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

+0

这看起来非常错误的。你能张贴一张图片展示你想要它的样子吗? – LGSon

+0

这是为什么?为什么不把输入字段放在同一个表单中? – evolutionxbox

+0

请访问http://sundarrajan360.co.nf/,在主页我们有一个表格,一旦申请现在点击它将直接到下一个表格在同一页面,但它的价值超过第一种形式。 –

回答

0

确定,如果我理解你正确地要从第一种形式的信息填充到第二个。

因此,对于这个任务要完成,你需要一个事件处理程序附加到第二形式防止默认行为

工作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); 
+0

我已添加,但它没有解决。 –

+0

你能分享更多信息吗?你得到什么错误。你是否支持你阻止第二种形式的默认行为。你有没有尝试在演示 –

+0

的例子是的,我已经尝试过演示它没有工作,我没有得到任何错误。当我将代码包含在代码中时,它的功能与以前一样没有变化。 –

0

var sourceForm = document.getElementById("source-form"); 
 
var targetForm = document.getElementById("target-form"); 
 

 
function findTargetNode(nodeName, name) { 
 
\t 
 
\t var targetElems = targetForm.elements; 
 
\t 
 
\t for (var i = 0; i < targetElems.length; i++) { 
 
\t \t 
 
\t \t var elem = targetElems.item(i); 
 
\t \t 
 
\t \t if (elem.nodeName.toLowerCase() === nodeName && elem.name === name) { 
 
\t \t \t return elem; 
 
\t \t } 
 
\t } 
 
} 
 

 
function setNodeValue(node, type, value) { 
 
\t 
 
\t if (type === 'select') 
 
\t { 
 
\t \t for (var i = 0, options = node.options; i < options.length; i++) { 
 
\t \t \t 
 
\t \t \t if (options[i].value === value) { 
 
\t \t \t \t options[i].setAttribute('selected', 'true'); 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t \t options[i].removeAttribute('selected'); 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 
\t // else if (type === 'checkbox' || type === 'radio') { /* ... */ } 
 
\t else { 
 
\t \t node.value = value; 
 
\t } 
 
} 
 

 

 
sourceForm.addEventListener("submit", function(e) { 
 
    
 
\t for (var i = 0, elems = sourceForm.elements; i < elems.length; i++) { 
 
\t \t 
 
\t \t var elem = elems.item(i); 
 
\t \t 
 
\t \t if (!elem.name) { 
 
\t \t \t continue; 
 
\t \t } 
 
\t \t 
 
\t \t var type = elem.nodeName.toLowerCase(); 
 
\t \t var targetNode = findTargetNode(type, elem.name); 
 
\t \t 
 
\t \t if (!targetNode) { 
 
\t \t \t continue; 
 
\t \t } 
 
\t \t 
 
\t \t setNodeValue(targetNode, type, elem.value); 
 
\t } 
 
\t 
 
\t e.preventDefault(); 
 
\t // targetForm.submit(); 
 
\t 
 
}, false);
<form id="source-form" action="javascript:void(0)" role="form"> 
 
\t \t <select class="form-control" id="my-select" name="my-select"> 
 
\t \t \t <option value="-1">HOW MUCH ?</option> 
 
\t \t \t <option value="1">1</option> 
 
\t \t \t <option value="2">2</option> 
 
\t \t </select> 
 
\t \t <input id="my-text" type="text" name="my-text"> 
 
\t \t <input id="submit-source-form" type="submit" value="Fill the following form"> 
 
\t </form> 
 
\t 
 
    <section style="margin-top: 15px;"> 
 
\t \t <form id="target-form" method="post" action="contact.php" role="form"> 
 
\t \t \t <select class="form-control" id="my-select-2" name="my-select"> 
 
\t \t \t \t <option value="-1">HOW MUCH ?</option> 
 
\t \t \t \t <option value="1">1</option> 
 
\t \t \t \t <option value="2">2</option> 
 
\t \t \t </select> 
 
\t \t \t <input id="my-text-2" type="text" name="my-text" value="this will change"> 
 
\t \t \t 
 
\t \t \t <input id="additional-value" type="text" name="additional" placeholder="this value will not change"> 
 
\t \t \t <input id="submit-target-form" type="submit" value="Send form"> 
 
\t \t </form> 
 
    </section>

https://jsfiddle.net/cremugnt/

注意:“发送表单”操作在此处不起作用,因为“阻止提交到'http://stacksnippets.net/contact.php',因为表单的框架已被沙盒化,并且未设置”允许表单“权限。

注意:这段代码只能复制“选择”和“输入”字段,所以如果你想与其他领域,如“复选框”或“收音机”工作,你明白了。

0

这是使用OODK-JS和jQuery与任何类型的现场兼容更具全球性的方法(如注场匹配是基于名称属性):

  $.noConflict(); 

      OODK.config({ 
      'path': { 
       'oodk': '../src', 
       'workspace': 'workspace' 
      } 
      }); 

      OODK(function($, _){ 

      // POO approach to solve this problem 
      // define a FormHelper class 
      var FormHelper = $.class(function($, µ, _){ 

       $.protected('form'); 

       $.public(function __initialize(form){ 
        µ.form = form; 
       }); 

       $.public(function exportToLiteral(){ 

       var exprt = {}; 

       jQuery(µ.form).find(":input, [textarea]").each(function(){ 

        var val; 

        if(this.type === 'radio'){ 

        val = µ.exportRadioField(this, exprt); 

        }else if(this.type === 'checkbox'){ 

        val = µ.exportCheckboxField(this, exprt); 

        }else{ 

        val = µ.exportField(this, exprt); 
        } 

        if(typeof val !== "undefined" && 
        typeof jQuery(this).attr("name") !== "undefined"){ 

         exprt[jQuery(this).attr("name")] = val; 
        } 
       }); 

       return exprt; 
      }); 

      // export argument html field fld to object literal exprt 
      $.protected(function exportField(fld, exprt){ 

       return jQuery(fld).val(); 
      }); 

      // export argument checkbox html field fld to object literal exprt 
      $.protected(function exportCheckboxField(fld, exprt){ 

       var val; 

       if(jQuery(fld).is(':checked')){ 

       if(typeof exprt[jQuery(this).attr("name")] !== "undefined"){ 
        val = exprt[jQuery(this).attr("name")]; 
       }else{ 
        val = []; 
       } 

       val.push(jQuery(this).val()); 
       }; 

       return val; 
      }); 

      // export argument html radio field fld to object literal exprt 
      $.protected(function exportRadioField(fld, exprt){ 

       var val; 

       if(jQuery(fld).is(':checked')){ 
       val = jQuery(this).val(); 
       } 

       return val; 
      }); 

      // copy all values of the source form to the destination form passed 
      // as argument 
      $.public(function copyToForm(destForm){ 

       var oSrcForm = this.exportToLiteral(); 

       jQuery(destForm).find(":input, [textarea]").each(function(){ 

       if(typeof oSrcForm[jQuery(this).attr("name")] !== "undefined"){ 

        var srcVal = oSrcForm[jQuery(this).attr("name")]; 

        if(this.type == 'checkbox'){ 

        µ.copyToCheckboxField(this, srcVal, oSrcForm); 

        }else if(this.type == 'radio'){ 

        µ.copyToRadioField(this, srcVal, oSrcForm); 

        }else{ 

        µ.copyToField(this, srcVal, oSrcForm); 
        } 

       } 
       }); 
      }); 

      $.protected(function copyToField(fld, val, exprt){ 

       jQuery(fld).val(val); 
      }); 

      $.protected(function copyToCheckboxField(fld, val, exprt){ 

       if(Array.isArray(srcVal) && srcVal.indexOf(jQuery(fld).val()) !== -1){ 

       jQuery(fld).prop('checked', true); 
       } 
      }); 

      $.protected(function copyToRadioField(fld, val, exprt){ 

       if(exprt[jQuery(fld).attr("name")] == jQuery(fld).val()){ 

       jQuery(fld).prop('checked', true); 
       } 
      }); 
      }); 

      jQuery(document).ready(function(){ 

      jQuery('#pd_applynowbt').bind('click', function(evt){ 

       // prevent the source form to be submitted 
       evt.preventDefault(); 

       var formHelper = $.new(FormHelper, jQuery('#home')); 

       // copy all fields from form #home to form #contact 
       formHelper.copyToForm(jQuery('#contact')); 
      }); 
      }); 
      }); 
相关问题