Wie stoppe ich das Senden des Formulars bis zum Ende?

Question

Alles, was ich bin ein Anmeldeformular mit 3 Schritten Gestaltung:

1. Geben Sie Ihren Namen und E-Mail
2. den Sektor auswählen (Option 1, Option 2)
3. Wählen Sie, was Ihr Interesse an (Option 1, Option 2, Option 3)

Jeder Schritt in einer Reihe ist und die mit Navigationstasten versteckt, um zum nächsten oder vorherigen Schritt gehen jQuery verwenden, aber aus irgendeinem Grunde, wenn Sie auf nächste in Schritt 1 es legt automatisch die Form, obwohl es nicht der Knopf ist, der Sie einreichen würde r form, der subscribe button wird am ende subscribe genannt, dies ist ein mailchimp eingebettetes form, das ich anpassen muss.

Mein HTML

<div class="mailchimp_custom_form" style="background-color: #948F10;display: table;margin: auto;width: 100%;padding: 0px 0px 40px 0px;"> 

<div class="max-width" style="padding-top: 35px; padding-bottom: 20px;"> 

<!-- Begin MailChimp Signup Form --> 
    <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"> 
    <div id="mc_embed_signup"> 

     <form action="<formLink>" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 

      <div id="mc_embed_signup_scroll"> 
       <div class="vc_col-md-12 step1">  
        <h5>Subscribe to our mailing list</h5> 

         <div class="wpb_column vc_column_container vc_col-sm-5"> 
          <div class="mc-field-group"> 
           <input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="Name *"> 
          </div> 
         </div> 

         <div class="wpb_column vc_column_container vc_col-sm-5"> 
          <div class="mc-field-group"> 
           <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="Email *"> 
          </div> 
         </div> 

         <div class="wpb_column vc_column_container vc_col-sm-2"> 
          <button name="step1" id="step1">Next</button> 
         </div> 

       </div> 

       <div class="vc_col-md-12 step2"> 

        <div class="wpb_column vc_column_container vc_col-sm-8"> 
         <div class="mc-field-group input-group"> 
          <h5>Choose A Sector</h5> 

           <ul style="display: flex;"> 
            <li> 
             <input type="checkbox" value="1" name="group[13][1]" id="mce-group[13]-13-0"> 
             <label for="mce-group[13]-13-0"> 
              <img width="50px" src="../wp-content/uploads/2016/02/supplier_news.png" /> 
              <p>Employment & Skills</p> 
             </label> 
            </li> 
            <li> 
             <input type="checkbox" value="2" name="group[13][2]" id="mce-group[13]-13-1"> 
             <label for="mce-group[13]-13-1"><img width="50px" src="../wp-content/uploads/2016/02/supplier_news.png" /> 
             <p>Welfare Services &amp; Social Care</p></label> 
            </li> 
           </ul> 

         </div> 
        </div> 

        <div class="wpb_column vc_column_container vc_col-sm-4 sign_buttons"> 
         <button name="step2b" id="step2b">Back</button><button name="step2" id="step2">Next</button> 
        </div> 

       </div> 
       <div class="vc_col-md-12 step3"> 

        <div class="wpb_column vc_column_container vc_col-sm-8"> 
         <div class="mc-field-group input-group"> 
          <h5>Choose A Topic</h5> 
          <ul style="display: flex;"> 
           <li> 
            <input type="checkbox" value="4" name="group[13][4]" id="mce-group[13]-13-2"> 
            <label for="mce-group[13]-13-2"> 
             <img width="50px" src="../wp-content/uploads/2016/02/supplier_news.png" /> 
             <p>News</p> 
            </label> 
           </li> 
           <li> 
            <input type="checkbox" value="8" name="group[13][8]" id="mce-group[13]-13-3"> 
            <label for="mce-group[13]-13-3"> 
             <img width="50px" src="../wp-content/uploads/2016/02/sector_oppertunities.png"/> 
             <p>Opportunities</p> 
            </label> 
           </li> 
           <li> 
            <input type="checkbox" value="16" name="group[13][16]" id="mce-group[13]-13-4"> 
            <label for="mce-group[13]-13-4"> 
             <img width="50px" src=../wp-content/uploads/2016/02/events_training.png" /> 
             <p>Training &amp; Events </p> 
            </label> 
           </li> 
          </ul> 
         </div> 
        </div> 

        <div class="wpb_column vc_column_container vc_col-sm-4 sign_buttons"> 
         <div class="clear"> 
          <button name="step3b" id="step3b">Back</button> 
          <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> 
         </div> 
        </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_769d2bdcba23fce40f0162f65_817220ff9c" tabindex="-1" value=""> 
        </div> 
       </div> 




      </div> 

     </form> 

    </div> 

Meine jQuery ist ziemlich einfach:

btstep1 = $('button#step1'), 
btstep2 = $('button#step2'), 
btstep2b = $('button#step2b'), 
btstep3b = $('button#step3b'); 

var step1 = $('div.step1'); 
var step2 = $('div.step2'); 
var step3 = $('div.step3'); 

btstep1.click(function(){step1.hide(),step2.show();}); 
btstep2.click(function(){step2.hide(),step3.show();}); 
btstep2b.click(function(){step2.hide(),step1.show();}); 
btstep3b.click(function(){step3.hide(),step2.show();}); 

https://jsfiddle.net/hpus6r5e/

So ist meine Frage, wie verhindere ich das Formular abgesendet haben, bis die Ende ? wenn sie abonnieren?

Answer 1

Stellen Sie alle Navigationstasten geben als Taste (<button type="button">) und der abonnieren Tasten als einreichen Typ (<button type="submit">)

Siehe: JS Fiddle

btstep1 = $('button#step1'), 
 
    btstep2 = $('button#step2'), 
 
    btstep2b = $('button#step2b'), 
 
    btstep3b = $('button#step3b'); 
 

 
    var step1 = $('div.step1'); 
 
    var step2 = $('div.step2'); 
 
    var step3 = $('div.step3'); 
 

 
    step2.hide(); 
 
    step3.hide(); 
 

 
    btstep1.click(function() { 
 
    step1.hide(), step2.show(); 
 
    }); 
 
    btstep2.click(function() { 
 
    step2.hide(), step3.show(); 
 
    }); 
 
    btstep2b.click(function() { 
 
    step2.hide(), step1.show(); 
 
    }); 
 
    btstep3b.click(function() { 
 
    step3.hide(), step2.show(); 
 
    }); 
 

 
    $("#testForm").submit(function(e) { 
 
    alert('Form Submitted'); 
 
    event.preventDefault(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="testForm"> 
 
    <div class='step1'> 
 
    Step 1 
 
    <button type="button" id="step1"> 
 
     Next 
 
    </button> 
 
    </div> 
 
    <div class='step2'> 
 
    Step 2 
 
    <button type="button" id="step2b"> 
 
     Back 
 
    </button> 
 
    <button type="button" id="step2"> 
 
     Next 
 
    </button> 
 
    </div> 
 
    <div class='step3'> 
 
    Step 3 
 
    <button type="button" id="step3b"> 
 
     Back 
 
    </button> 
 
    <button type="submit"> 
 
     Subscribe 
 
    </button> 
 
    </div> 
 
</form>