javascript - 我怎样才能从一个表单的输入字段中获取数据,并使用它来使用 JQuery 以不同的表单填充相同的输入类型?

标签 javascript jquery html forms

我在网站上有 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());

关于javascript - 我怎样才能从一个表单的输入字段中获取数据,并使用它来使用 JQuery 以不同的表单填充相同的输入类型?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36719599/

相关文章:

javascript - 单击单独的按钮时读取输入字段文件

javascript - 如何循环访问另一个数组中每个数组的每个成员?

jquery - "Uncaught RangeError: Maximum call stack size exceeded"调用 $.ajax jquery 函数时

javascript - 如何通过用省略号替换某些字符来缩短字符串

c# - 单列中新行上的删除和编辑按钮

JavaScript 重定向函数

javascript - 如何在 Javascript 中使用 AES CBC 零填充加密并使用 Java 解密

javascript - 语法错误: missing { before function body

html - 将 ul 内的 li 对齐到底部

html - 保持选择选择颜色并添加png作为背景