如何从一个表单的输入字段中获取数据，并使用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?
我在一个网站上有两个注册表格。一个在顶部，以模态打开，是一个从电子邮件地址输入开始的多步骤表单。该表单的代码如下：
<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可以用来从底部注册表单的电子邮件输入字段中获取值，并将其放置在顶部电子邮件输入字段的模态中的注册表单中？
你试过这个吗？
jQuery('#email_address').val(jQuery('#bottomemail').val());
从第一个字段中获取值
var value = $("#idFirstElement").val();
并将该值设置为第二字段。
$("#IdSecondField").val(value);
$('#email_address,#bottomemail').keyup(function() {
$('#email_address,#bottomemail').val($(this).val());
});
这将通过将一个被更改的值复制到两个输入来保持两个输入的同步。
尝试：
$('#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>我喜欢Skymt使用keyup的想法，但为了给我2美分的价值，以下是我在对这个问题的评论中所说的内容。我使用了按钮的click来显示您可以按照Peterson所说的那样使用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;
});
});
Fiddle-https://jsfiddle.net/dg8u3ng1/
相关文章：
- Nodejs服务器在解析之前生成输入表单
- 如何创建打开警报框的输入表单
- JavaScript onChange 事件侦听器对输入表单不起作用
- 如何在 OnKeyPress 事件后获取输入表单元素的值
- 单输入表单 - 特殊情况 |停止表单提交
- 需要输入表单验证
- 如何在谷歌图表中使用输入表单值
- 使用jquery可交换地更改两个html输入表单值
- 当从jqueryajax调用输入表单时，它不起作用
- 控制器作为搜索输入表单的语法
- 删除带有按钮的输入表单失败
- 验证带有2个小数点的浮点形式的输入表单
- AngularJS:输入表单在分部中不起作用
- 如何从php中的输入表单调用Javascript函数，以更改HTML
- 输入表单中的Sharepoint javascript
- 当点击输入表单时，为Raphael制作的对象添加光晕
- 当用户将数据输入表单时要知道的事件
- 保存输入表单后ImageMap颜色更改
- 链接输入表单中的填充脚本
- 有关多个输入表单验证的问题
