JQuery submit() -Funktion nicht senden HTML-Formular von Button ausgelöst in Twiiter-Bootstrap 3 Modal

Question

Ich erstelle eine Abmeldeseite, die ein Formularelement gefolgt von einem twitter-Bootstrap 3 Modal enthält, derzeit ist es nur HTML/JQuery. Das Modal wird ausgelöst, wenn Sie auf ein Schaltflächenelement im unteren Bereich des Formulars klicken (Schaltfläche eingeben). Innerhalb des Modals befindet sich eine Bestätigungsschaltfläche (auch Schaltfläche "Typ"), an die ein Handler angehängt wurde, um das Formular zu senden. Der Handler wird ausgelöst, wenn Sie auf die Schaltfläche klicken. Die Submit-Funktion scheint jedoch nicht ausgelöst zu werden. Wenn ich den Handler zum Auslösen auf der Formularschaltfläche ändere, dann sendet die Arbeit. Es scheint nur, weil der Bestätigungsschalter innerhalb des Modals ist. Ich würde sehr schätzen, jede Hilfe erhalten submit() auf den modalen Knopf auslösen, danke!

JQuery Script:

<script type="text/javascript"> 
    $(document).ready(function() { 

     // Bring modal up if form is valid 
     $("#submit").click(function(e){      
      isValid = validateForm(); 
      if(isValid) 
      { 
       $('#unsubModal').modal('show');      
      } 
     }); 

     // Submit form when clicking button in modal 
     $('#unsub').click(function(e) { 
      $('#unsub_form').submit(); 
      $('#unsubModal').modal('hide'); 
     });      

    }); // END $(document).ready(function() { 
</script> 

Twitter-Bootstrap 3 Modal:

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

     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal"><img id="close_btn" src="img/close.png" alt="Close" width="30px" height="30px"></button> 
       <h4 class="modal-title"><img id="so_long" src="img/so_long_white.png" alt="So long!" width="153px" height="64px"></h4> 
      </div> 
      <div class="modal-body text-center"> 
       <p>Please feel free to contact us at: &nbsp; <b class="font_lrg"><a href="mailto:mail@email.com.au">mail@email.com.au</a></b><br/>or give us a call at: &nbsp; <b class="font_lrg black">555 555 555</b><br/> during office hours if you wish to re-subscribe to our emails or just have a chat...<br/><br/><span class="font_lrg">have an Amazing day!</span></p> 
      </div> 
      <div class="modal-footer"> 
       <button id="unsub" type="button" onclick="form_submit()" class="btn btn-danger" data-dismiss="modal">Unsubscribe</button> 
      </div> 
     </div> 

    </div> 
</div> 

HTML Form:

<form id="unsub_form" name="unsub_form" action="success.html" method="GET" enctype="multipart/form-data" >          

    <div class="form-group"> 
     <span class="required">*</span><small><label for="email">Please unsubscribe the below address from email notifications</label></small> 
     <input id="email" name="email" type="email" class="form-control input-sm" required/> 
    </div> 

    <div class="form-group"> 
     <small><label for="reason">Reason for unsubscribing</label></small> 
     <select id="reason" name="reason" class="form-control input-sm"> 
      <option value="0" selected>- Please select an option</option> 
      <option value="to many">I recieve to many emails</option> 
      <option value="not relevant">The information is not relevant to me</option> 
      <option value="badly coded">They don't display or open correctly</option> 
      <option value="other">Other (please explain below)</option> 
     </select> 
    </div> 

    <div class="form-group"> 
     <small><label for="feedback">Feedback</label></small><br /> 
     <textarea maxlength="300" id="feedback" name="feedback" class="form-control" rows="5"></textarea> 
    </div> 

    <button id="submit" type="button" class="btn btn-warning pull-right">Unsubscribe</button> 
    <button id="cancel" type="button" class="btn btn-success pull-right" onclick="window.location.href='cancel.html'">Cancel</button> 

</form> 

Answer 1

Ich bin mir nicht sicher, warum, aber der Abmelde-Knopf mit id 'submit' bringt das Formular zum Tisch. Wenn Sie diese Schaltfläche in eine ID von "sub" ändern, funktioniert der Code.

Ich habe eine jsfiddle erstellt -

https://jsfiddle.net/bbs5tffz/

$("#sub").click(function(e){      
    //isValid = validateForm(); 
    if(true) 
    { 
     $('#unsubModal').modal('show');      
    } 
}); 

ich die isValid() Bezug entfernen musste.

Answer 2

Von Mozilla MDN:

If a form control (such as a submit button) has a name or id of submit it will mask the form's submit method.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit

Grundsätzlich Sie zwingende Eigenschaft im Formular-Objekt einreichen.

Um dies zu vermeiden, würde ich die Submit-Button wie 'unsub_form_submit' nennt oder etwas kohärenten