如何从一个表单的输入字段中获取数据并使用它使用 JQuery 以不同的表单填充相同的输入类型？答案

【问题标题】：How can I take data from one an input field of one form and use it to populate the same input type in a different form using JQuery?如何从一个表单的输入字段中获取数据并使用它使用 JQuery 以不同的表单填充相同的输入类型？
【发布时间】：2016-04-19 21:33:42
【问题描述】：

我在一个网站上有 2 个注册表单。一个在顶部以模式打开，是一个多步骤表单，从电子邮件地址的输入开始。该表单的代码如下：

<div class="modal fade" id="signup-modal" tabindex="-1" role="dialog" aria-labelledby="signup-updates-modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form class="#" role="form" method="post" action="sendform.php">
    <!-- #first_step -->
    <div id="step_one">
      <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><p class="icon-close-btn"><a href="#"></a></p></span></button>
        <h4 class="modalsignup-title white" id="signup-updates-modal">Step 1 / 4 Option Care Information Updates</h4>
      </div>
      <div class="modal-body">
        <p>Want to learn more about Option Care home infusion services? Please provide your email address to receive custom information and updates.</p>
        <div class="form-group">
          <div class="row">
            <label  class="col-md-3 control-label" for="email_address">Email Address</label>
            <div class="col-md-9">
            <input type="email" class="form-control" id="email_address" placeholder="Email" name="signupemail" required />
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-link btn-cancel" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary btn-arrow btn-nextstep" id="step_one_submit">Next Step</button>
      </div>
    </div>

    <!-- #second_step -->
    <div id="step_two" data-toggle="tab">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><p class="icon-close-btn"><a href="#"></a></p></span></button>
        <h4 class="modalsignup-title white" id="signup-updates-modal">Step 2 / 4 Option Care Information Updates</h4>
      </div>
      <div class="modal-body">
        <p>Please tell us more about yourself, so we can send you the right information.</p>
        <div class="form-group">

            <label  class="control-label" for="step_two_radio">I am a:</label>

            <!-- <label  class="control-label" for="step_two_radio">I am a:</label> -->
            <div>
              <div class="radio">
                <label>
                  <input type="radio" name="optionsRadios" id="optionsRadios1" placeholder="p2radio1" value="PatientOrCaregiver">
                  Patient or Caregiver</label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="optionsRadios" id="optionsRadios2" value="ClinicianOrReferrer">
                  Clinician or Referrer</label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="optionsRadios" id="optionsRadios3" value="PotentialRecruit">
                  Job Applicant</label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="optionsRadios" id="optionsRadios4" value="PharmaceuticalPartner">
                  Pharmaceutical Partner </label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="optionsRadios" id="optionsRadios5" value="PayerPartner">
                  Payer Partner </label>
              </div>
              <div class="radio">
                <label>
                  <input type="radio" name="optionsRadios" id="optionsRadios6" value="Other">
                  Other </label>
                 <div class="voffset2"></div>
                <input type="text" class="form-control" id="other_I_a" placeholder="About you"/>
              </div>

            </div>

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left btn-arrowback btn-previous" id="step_two_previous" >Previous Step</button>
        <button type="button" class="btn btn-link btn-cancel" data-dismiss="modal">Cancel</button>
        <!-- <button type="button" class="btn btn-primary btn-arrow btn-nextstep" id="step_two_submit">>Continue</button> -->
        <button type="button" class="btn btn-primary btn-arrow btn-nextstep" id="step_two_submit">Continue</button>
      </div>
    </div>

    <!-- #THRID STEP -->
    <!-- #THRID STEP -->

    <div id="step_three">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><p class="icon-close-btn"><a href="#"></a></p></span></button>
        <h4 class="modalsignup-title white" id="signup-updates-modal">Step 3 / 4 Option Care Information Updates</h4>
      </div>
      <div class="modal-body">
        <p>So that we can better assist you, please tell us if you are a current Option Care home infusion patient.</p>
        <div class="form-group">
          <label  class="control-label" for="inputEmail3">Are you a current customer of Option Care?</label>
          <div>
            <label class="radio-inline">
              <input type="radio" name="step_three_radio" id="inlineRadio1" value="CustomerYes">
              Yes </label>
            <label class="radio-inline">
              <input type="radio" name="step_three_radio" id="inlineRadio2" value="CustomerNo">
              No </label>
            <label class="radio-inline">
              <input type="radio" name="step_three_radio" id="inlineRadio3" value="NotApplicable">
              Not applicable </label>
              <!-- <input type="text" class="form-control" id="messagestep3" /> -->
              <div id="messagestep3"></div>

          </div>
          <!-- <div id="messagestep3"></div> -->


        </div>
        <div class="form-group" id="step_three_b">
          <label  class="control-label" for="inputEmail4">You’ve indicated that you are not a current Option Care home infusion patient. Are you interested in using Option Care home infusion services in the next 6 months?</label>
          <div>
            <label class="radio-inline">
              <input type="radio" name="step_three_radio2" id="inlineRadio4" value="InterestedYes">
              Yes </label>
            <label class="radio-inline">
              <input type="radio" name="step_three_radio2" id="inlineRadio5" value="InterestedNo">
              No </label>
              <div id="messagestep3b"></div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
       <button type="button" class="btn btn-default pull-left btn-arrowback btn-previous" id="step_three_previous" >Previous Step</button>
        <button type="button" class="btn btn-link btn-cancel" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary btn-arrow btn-nextstep" id="step_three_submit">Continue</button>
      </div>
    </div>

    <!-- #fourth_step -->
    <div id="step_four">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><p class="icon-close-btn"><a href="#"></a></p></span></button>
        <h4 class="modalsignup-title white" id="signup-updates-modal">Step 4 / 4 Option Care Information Updates</h4>
      </div>
      <div class="modal-body">
        <p>Select the therapeutic service(s) you are interested in learning more about. Please check all that apply.</p>
        <div class="form-group">
          <label  class="control-label" for="inputEmail3">If you are interested in a specific therapeutic area, please select it from the list below:</label>
          <div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="AntiInfectives">
                Anti-infectives (AI)</label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="Bleeding disorders" name="step_four_checkbox">
                Bleeding disorders (BD)</label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="HeartFailure" name="step_four_checkbox">
                Heart failure (HF)</label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="Immunoglobulin" name="step_four_checkbox">
                Immunoglobulin (IG)</label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="NutritionSupport" name="step_four_checkbox">
                Nutrition support (NS)</label>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" value="OtherTherapeutic" name="step_four_checkbox">
                Other </label>
                <div class="voffset2"></div>
              <input type="text" class="form-control" id="other_therapeutic_area" name="" value="" placeholder="So that we may better assist you, please tell us what services you are interested in."/>
            </div>
            <div id="step-four-input"></div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
         <button type="button" class="btn btn-default pull-left btn-arrowback btn-previous" id="step_four_previous" >Previous Step</button>
   <!-- <button type="button" class="btn btn-default pull-left" id="step_four_previous">Previous Step</button> -->
        <button type="button" class="btn btn-link btn-cancel" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary btn-arrow btn-nextstep" id="step_four_submit" value="insert">Submit</button>
             </div>
          </div>
       </form>
      </div>
    </div>
  </div>
<!-- /Modal HTML -->

接下来，我在站点底部有第二个注册表单，用于号召性用语，只有电子邮件输入，当单击按钮时，会打开第二个表单的模式。该表单的代码如下：

<form action="sendform.php" method="post" name="contact-form" class=" indline-form" id="main-contact-form">
    <div class="form-group">
         <input type="email" name="signupemail" id="bottomemail" required="required" class="form-control"   value="Enter your email address..."   
   onfocus="(this.value == 'Enter your email address...') && (this.value = '')"
   onblur="(this.value == '') && (this.value = 'Enter your email address...')" />
          <button required="required" class="btn btn-arrow"><a href="#" data-toggle="modal" data-target="#signup-modal" id="bottom_form_submit" class="modal-toggle">Subscribe</a></button>
      </div>
 </form>

现在我的问题是我可以使用任何 JQuery 或 javascript 从底部注册表单的电子邮件输入字段中获取值并将其放入顶部电子邮件输入字段的模式中的注册表单中吗？

【问题讨论】：

是的，当然，只需将第一个字段的值存储在一个变量中，然后将其设置为另一个字段的 .val() 。您可以将其绑定到点击等事件。
@AndyHolmes 你有什么代码供我参考吗？
下面的答案是您需要的主要内容，只需将其绑定到on('click', function{}) 调用中
只是为了澄清一下，这两个表格是否放在同一个页面内？或者哪个在不同的浏览器页面/选项卡/实例中打开？
@AndyHolmes 我通过使用它来工作：$('#bottom_form_submit').click(function (e) { $('#step_one').css("display", "none"); $('#step_two').css("display", "block"); $('#email_address').val($('#bottomemail').val()); });

标签： javascript jquery html forms

【解决方案1】：

你试过了吗？

jQuery('#email_address').val(jQuery('#bottomemail').val());

【讨论】：

也许值得展示一个绑定的例子？我假设他希望在单击按钮时设置值
@MikeL5799 你能编辑你的问题，插入你到目前为止的内容吗？您将代码放在页面的什么位置？另外，你是如何调用你的代码的？
@AndyHolmes 在上面的代码执行之前页面不会被提交？在那种情况下绑定模糊事件不是更好吗？
非常感谢@Peterson 我得到了它：` $('#bottom_form_submit').click(function (e) { $('#step_one').css("display", "none"); $('#step_two').css("display", "block"); $('#email_address').val($('#bottomemail').val()); });

【解决方案2】：

从第一个字段中获取值

var value = $("#idFirstElement").val();

并将值设置为第二个字段。

$("#IdSecondField").val(value);

【讨论】：

【解决方案3】：

$('#email_address,#bottomemail').keyup(function() {
    $('#email_address,#bottomemail').val($(this).val());
});

这将通过将被更改的一个的值复制到两个输入来保持两个输入同步。

【讨论】：

【解决方案4】：

试试：

$('#bottomemail').on('input', function() {
    $('#email_address').val( this.value );
});

如下面的演示：

$(function() {
    $('#bottomemail').on('input', function() {
        $('#email_address').val( this.value );
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade" id="signup-modal" tabindex="-1" role="dialog" aria-labelledby="signup-updates-modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form class="#" role="form" method="post" action="sendform.php">
<!-- #first_step -->
    <div id="step_one">
      <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><p class="icon-close-btn"><a href="#"></a></p></span></button>
        <h4 class="modalsignup-title white" id="signup-updates-modal">Step 1 / 4 Option Care Information Updates</h4>
      </div>
      <div class="modal-body">
        <p>Want to learn more about Option Care home infusion services? Please provide your email address to receive custom information and updates.</p>
        <div class="form-group">
          <div class="row">
            <label  class="col-md-3 control-label" for="email_address">Email Address</label>
            <div class="col-md-9">
            <input type="email" class="form-control" id="email_address" placeholder="Email" name="signupemail" required />
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-link btn-cancel" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary btn-arrow btn-nextstep" id="step_one_submit">Next Step</button>
      </div>
    </div>
        <!-- ........ -->
        <!-- ........ -->
        </div>
      </div>



<form action="sendform.php" method="post" name="contact-form" class=" indline-form" id="main-contact-form">
    <div class="form-group">
         <input type="email" name="signupemail" id="bottomemail" required="required" class="form-control"   value="Enter your email address..."   
   onfocus="(this.value == 'Enter your email address...') && (this.value = '')"
   onblur="(this.value == '') && (this.value = 'Enter your email address...')" />
          <button required="required" class="btn btn-arrow"><a href="#" data-toggle="modal" data-target="#signup-modal" id="bottom_form_submit" class="modal-toggle">Subscribe</a></button>
      </div>
 </form>

【讨论】：

这很好很干净，不知道input
很高兴我能帮上忙。 :) 享受吧！

【解决方案5】：

我喜欢 Skymt 使用 keyup 的想法，但为了给我 2 美分的价值，这就是我在我的 cmets 中谈论的问题。我使用按钮的click 来显示您可以按照彼得森所说的那样执行的功能并使用blur：

HTML：

<form action="">
  <label for="">Input 1</label><input id="input1" type="text">
  <button id="trigger">Trigger</button>
</form>

<form action="">
  <label for="">Input 2</label><input id="input2" type="text">
</form>

jQuery:

$(document).ready(function(){
    $('#trigger').on('click', function(){
        var value = $('#input1').val();
        $('#input2').val(value);
        return false;
    });
});

小提琴 - https://jsfiddle.net/dg8u3ng1/

【讨论】：