[英]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?
我在一個網站上有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從底部注冊表單的電子郵件輸入字段中獲取值並將其放在頂部電子郵件輸入字段的模式中的注冊表單中嗎？
你有嘗試過嗎？
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按鈕來顯示可以像彼得森所說的那樣使用的功能，並使用了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/
如何使用Javascript使用表單的一個輸入字段顯示其余內容？
[英]How can I use Javascript to use one input field of a form to show the rest?
如何使用jQuery-UI datepicker獲取表單輸入字段以使用其他字段中的年份？
[英]How can I get a form input field using jQuery-UI datepicker to use the year from another field?
Jquery可以直接從表單中獲取表單輸入，還是必須在腳本中使用SET按鈕？
[英]Can Jquery take the form input straight from the form, or do I have to use a SET button in my script?
如何使用 JS 從 php 表單中獲取值並將其與其他文本一起填充到另一個字段中？
[英]How can I use JS to take the values from a php form and populate it into another field alongside other text?
如何從一個文件中移動一個特定的文件<input type=file multiple>到一個特定的表格里面？
[英]How can I move one specific file from an <input type=file multiple> to inside a specific form?
jquery - 將輸入的值從一個表單復制到另一個表單（表單和輸入命名相同）
[英]jquery - copy value of input from one form to another (form and input named the same)
可以使用哪些不同的方式在網站服務器上存儲表單/輸入/用戶首選項數據？
[英]What are the different ways one can use to store form/input/user preferences data on the web site server?
如何使用JavaScript驗證一種形式的不同輸入提交按鈕
[英]How to validate different input submit buttons in one form using javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.