javascript - 模式中的表单未使用 jquery 提交

Question

我正在尝试创建一个使用条纹的模式，但我无法提交表单。我不知道为什么 jQuery 似乎无法引用表单 id。当我引用表单 id 时，代码似乎无法识别它，当我引用父 div 并使用 .click 引用表单时，它似乎引用了该表单。这是 jQuery 的怪癖还是我有一些愚蠢的实现

<!-- 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>

如上所示，我有#cardModal(div) -> #updateCard(form) -> #submitP(Submit)。我无法引用 updateCard 除非我使用类似 $('#cardModal').on('click', 'updateCard') 但这不是我想要的，因为我只想访问当用户按下提交时形成。我想要这个的原因是因为我想向表单添加一个 stripetoken，如下所示

// 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

检查表单声明 U 提到它是 FROM 而不是 FORM..因此它不会调用提交函数将其更改为表单..

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

像这样改变它:

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