Сохранять значение электронной почты во всплывающем окне

Question

Я хочу сохранить значение электронной почты после отображения всплывающего окна.

Пользователь добавит свой адрес электронной почты во вход и нажмите «подписаться». Но я не хочу использовать MailChimp там, я хочу сначала открыть всплывающее окно с другими полями (например, номер телефона), но я хотел бы сохранить адрес электронной почты на предыдущем шаге пользователем и использовать MailChimp. Как мне это сделать?

<div class="well"> 
 
    <form action="#"> 
 
     
 
      <div class="row email"> 
 
       <input class="btn btn-lg required_email" name="email" id="email" type="email" placeholder="MY EMAIL TO GET FIRST MY LIFE-TIME PREMIUM ACCESS"> 
 
      </div> 
 
      <div class="row okbutton"> 
 
       <button class="btn btn-info button" data-toggle="modal" data-target="#enquirypopup" type="submit">Subscribe</button> 
 
      </div> 
 
     
 
    </form> 
 
</div> 
 

 
<div id="enquirypopup" class="modal fade in" role="dialog"> 
 
    <div class="modal-dialog"> 
 
     
 
     <!-- Modal content--> 
 
     <div class="modal-content row"> 
 
      <div class="modal-header custom-modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal">×</button> 
 
       <h4 class="modal-title">Enquire Now</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <!-- Begin MailChimp Signup Form --> 
 
        <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"> 
 
        <style type="text/css"> 
 
         #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } 
 
         /* Add your own MailChimp form style overrides in your site stylesheet or in this style block. 
 
          We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ 
 
        </style> 
 
        <div id="mc_embed_signup"> 
 
         <form action="//FellowsNow.us11.list-manage.com/subscribe/post?u=fa1e6ec5c7d8f4d1f04c123e1&amp;id=c761d217cf" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
 
           <div id="mc_embed_signup_scroll"> 
 
           <h2>Subscribe to our mailing list</h2> 
 
          <div class="indicates-required"><span class="asterisk">*</span> indicates required</div> 
 
          <div class="mc-field-group"> 
 
           <label for="mce-EMAIL">Email Address <span class="asterisk">*</span> 
 
          </label> 
 
           <input type="email" value=" <?php echo $_POST['EMAIL'];?>" name="EMAIL" class="required email" id="mce-EMAIL"> 
 
          </div> 
 
          <div class="mc-field-group"> 
 
           <label for="mce-FNAME">First Name </label> 
 
           <input type="text" value="" name="FNAME" class="" id="mce-FNAME"> 
 
          </div> 
 
          <div class="mc-field-group"> 
 
           <label for="mce-LNAME">Last Name </label> 
 
           <input type="text" value="" name="LNAME" class="" id="mce-LNAME"> 
 
          </div> 
 
          <div class="mc-field-group size1of2"> 
 
           <label for="mce-MMERGE3">Phone Number </label> 
 
           <input type="text" name="MMERGE3" class="" value="" id="mce-MMERGE3"> 
 
          </div> 
 
           <div id="mce-responses" class="clear"> 
 
            <div class="response" id="mce-error-response" style="display:none"></div> 
 
            <div class="response" id="mce-success-response" style="display:none"></div> 
 
           </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> 
 
           <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_fa1e6ec5c7d8f4d1f04c123e1_c761d217cf" tabindex="-1" value=""></div> 
 
           <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> 
 
           </div> 
 
         </form> 
 
        </div> 
 
        <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='MMERGE3';ftypes[3]='phone';}(jQuery));var $mcj = jQuery.noConflict(true);</script> 
 
      <!--End mc_embed_signup--> 
 
      </div> 
 
      
 
     </div> 
 
     
 
    </div> 
 
</div>

Answer 1

Попробуйте использовать функцию OnClick расслоение плотной для первой кнопки подписки. И введите введенное значение электронной почты, используя js или jquery. Затем установите его для поля электронной почты во всплывающей форме.

Чтобы получить значение из поля ввода:

JS: var email = document.getElementById('id_name');

Jquery: var email = $('#id_name').val();

Чтобы установить значение поля ввода:

JS: document.getElementById("id_name").value = email;

JQuery: $('#id_name').val(email);

<div class="well"> 
       <form action="#"> 

         <div class="row email"> 
          <input class="btn btn-lg required_email" name="email" id="email" type="email" placeholder="MY EMAIL TO GET FIRST MY LIFE-TIME PREMIUM ACCESS"> 
         </div> 
         <div class="row okbutton"> 
          <button class="btn btn-info button" data-toggle="modal" data-target="#enquirypopup" onclick="copyEmail();" >Subscribe</button> 
         </div> 

       </form> 
      </div> 

<div id="enquirypopup" class="modal fade in" role="dialog"> 
     <div class="modal-dialog"> 

      <!-- Modal content--> 
      <div class="modal-content row"> 
       <div class="modal-header custom-modal-header"> 
        <button type="button" class="close" data-dismiss="modal">×</button> 
        <h4 class="modal-title">Enquire Now</h4> 
       </div> 
       <div class="modal-body"> 
        <!-- Begin MailChimp Signup Form --> 
         <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"> 
         <style type="text/css"> 
          #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } 
          /* Add your own MailChimp form style overrides in your site stylesheet or in this style block. 
           We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ 
         </style> 
         <div id="mc_embed_signup"> 
          <form action="//FellowsNow.us11.list-manage.com/subscribe/post?u=fa1e6ec5c7d8f4d1f04c123e1&amp;id=c761d217cf" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
            <div id="mc_embed_signup_scroll"> 
            <h2>Subscribe to our mailing list</h2> 
           <div class="indicates-required"><span class="asterisk">*</span> indicates required</div> 
           <div class="mc-field-group"> 
            <label for="mce-EMAIL">Email Address <span class="asterisk">*</span> 
           </label> 
            <input type="email" value=" <?php echo $_POST['EMAIL'];?>" name="EMAIL" class="required email" id="mce-EMAIL"> 
           </div> 
           <div class="mc-field-group"> 
            <label for="mce-FNAME">First Name </label> 
            <input type="text" value="" name="FNAME" class="" id="mce-FNAME"> 
           </div> 
           <div class="mc-field-group"> 
            <label for="mce-LNAME">Last Name </label> 
            <input type="text" value="" name="LNAME" class="" id="mce-LNAME"> 
           </div> 
           <div class="mc-field-group size1of2"> 
            <label for="mce-MMERGE3">Phone Number </label> 
            <input type="text" name="MMERGE3" class="" value="" id="mce-MMERGE3"> 
           </div> 
            <div id="mce-responses" class="clear"> 
             <div class="response" id="mce-error-response" style="display:none"></div> 
             <div class="response" id="mce-success-response" style="display:none"></div> 
            </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> 
            <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_fa1e6ec5c7d8f4d1f04c123e1_c761d217cf" tabindex="-1" value=""></div> 
            <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> 
            </div> 
          </form> 
         </div> 
           <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='MMERGE3';ftypes[3]='phone';}(jQuery));var $mcj = jQuery.noConflict(true);</script> 
<!--End mc_embed_signup--> 
       </div> 

      </div> 

     </div> 
    </div> 


<script type="text/javascript> 
    function copyEmail(){ 
    var email = document.getElementById('email'); 
    document.getElementById("mce-EMAIL").value = email; 
    return true; 

} 
</script> 

Последний вопрос

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Смежные вопросы

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.