2016-09-18 2 views
1

У меня есть две формы на одной странице, Форма 1 ID: Главная/ Форма 2 ID: contact Мне нужны значения, заполненные формой (домом) в текстовом поле формы2 (контакт) после нажатия кнопки отправки ,Как получить значение из одной формы и отправить в другую форму с помощью 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

Ok Если я правильно вас понимание вы хотите, чтобы заполнить информацию от первой формы ко второй.

Так что для этой задачи будет выполнять вам нужно приложить обработчик событий для второй формы и поведение по умолчанию

Рабочая 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')); 
      }); 
      }); 
      }); 
Смежные вопросы