Formular in Modal nicht mit jquery senden

Question

Ich versuche, ein Modal für die Verwendung von Stripe in erstellen, aber ich kann nicht erhalten das Formular zu übermitteln. Ich weiß nicht, warum jQuery nicht auf die Formular-ID verweisen kann. Wenn ich die Formular-ID referenziere, scheint der Code sie noch nicht zu erkennen, wenn ich auf das Eltern-div referenziere und ein .click referenziere, das auf das Formular verweist, auf das es dann zu verweisen scheint. Ist das eine Marotte noch jQuery oder habe ich einige dumme Implementierung

<!-- Trigger the modal with a button --> 
<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#cardModal">Update card Details</button> 
<!-- 'Update' Modal --> 
<div id="cardModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <!-- Modal content--> 
     <div class="modal-content"> 
      <!-- Modal header --> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Update card details</h4> 
      </div> 
       <!-- Modal body --> 
       <div class="modal-body"> 
        <from action="/settings/card" method="post" id="updateCard" class="form-horizontal"> 
        <div class="form-group has-feedback"> 
         <label class="control-label col-sm-2">Card Number:</label> 
         <div class="col-sm-6"> 
           <input type="text" class="form-control" data-stripe="number" required> 
           <i class="form-control-feedback glyphicon glyphicon-pencil"></i> 
         </div> 
        </div> 
        <div class="form-group has-feedback"> 
         <label class="control-label col-sm-2">Name on card:</label> 
         <div class=" col-sm-6"> 
          <input type="text" class="form-control" data-stripe="name" required> 
          <i class="form-control-feedback glyphicon glyphicon-user"></i> 
         </div> 
        </div> 
        <div class="form-group has-feedback"> 
         <label class="control-label col-sm-2">Expiry Date:</label> 
         <div class="col-sm-4"> 
          <div class="form-inline"> 
           <div class="form-group"> 
            <input type="text" class="form-control" data-stripe="exp_month" placeholder="Month" required/> 
            input type="text" class="form-control" data-stripe="exp_year" placeholder="Year" required /> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class="form-group has-feedback"> 
         <label class="control-label col-sm-2">CVC:</label> 
         <div class=" col-sm-2"> 
          <input type="password" class="form-control" data-stripe="cvc" required> 
          <i class="form-control-feedback glyphicon glyphicon-shopping-cart"></i> 
         </div> 
        </div> 
        <!-- Form Submit --> 
        <button type=submit id="submitP" class="btn btn-default btn-lg">Submit</button> 
      </from> 
     </div> 
     <!-- Modal footer --> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Exit</button> 
     </div> 
    </div> 
</div> 

Wie man sehen kann über die ich #cardModal (div) haben -> #updateCard (Formular) -> #submitP (Senden) . Ich kann nicht auf die updateCard verweisen, wenn ich etwas wie $('#cardModal').on('click', 'updateCard') verwende, aber das ist nicht was ich will, weil ich nur auf das Formular zugreifen möchte, wenn der Benutzer auf Senden drückt. Th Grund, warum ich das will, ist, weil ich ein stripetoken dem Formular hinzugefügt werden soll, die unter

zu sehen ist

// Before the form submits 
$('#updateCard').submit(function(event){ 
    alert('submitted'); 
    //Disable the button 
    $('#updateCard').find('.btn btn-default btn-lg').prop('disabled', true); 
    //Create a token for the user 
    Stripe.card.createToken($('#updateCard'), stripeResponseHandler); 
    // Prevent the form from being submitted: 
    return false; 
}); 

function stripeResponseHandler(status, response) { 
    console.log('in response handler') 
    // Grab the form: 
    var $form = $('#cardModal updateCard'); 
    //If there is an error 
    if (response.error) { // Problem! 
     console.log(response.error) 
     // Show the errors on the form: 
     $('<div id="paymentError" class="alert alert-danger">'+response.error.message+'</div>').insertBefore('#submit'); 
     $('#updateCard').find('.btn btn-default btn-lg').prop("disabled", false); // Re-enable submission 
    } else { 
     // Token was created! 
     console.log('created'); 
     // Get the token ID: 
     var token = response.id; 
     // Insert the token ID into the form so it gets submitted to the server: 
     $form.append($('<input type="hidden" name="stripeToken">').val(token)); 
     // Submit the form: 
     $form.submit(); 
    } 
} 

Answer 1

PRÜFEN Die FORM Erklärung U erwähnt als FROM FORM..so nicht, dass es nicht aufrufen Funktionsänderung einreichen es zu bilden ..

   <from action="/settings/card" method="post" id="updateCard" class="form-horizontal"> 

ändern es wie folgt aus:

   <form action="/settings/card" method="post" id="updateCard" class="form-horizontal">