jQuery 表单提交 - prevent.default - ajax 电子邮件 - 向 PayPal 提交表单

Question

我有一个带有以下代码的 php 页面。在我更新隐藏的#amount 字段并通过 ajax 调用发送电子邮件之前，我正在尝试阻止向 PayPal 提交默认表单。

当前的问题是由于ajax成功方法中的jquery提交表单调用，电子邮件被多次发送，并且表单永远不会被提交到PayPal。

我曾尝试将#process_form 按钮更改为键入“按钮”而不是提交，并将 $('#checkout-form').submit(function(event) { 更改为 $('#process_form').click (function() { -- 但我的 ajax 电子邮件从未发送过。

帮助表示赞赏。

    <form id="checkout-form" name="Payment" action="https://www.paypal.com/cgi-bin/webscr" method="post">
        <input type="hidden" name="cmd" value="_xclick"/>
        <input type="hidden" name="business" value="<?=$pymtEmail?>"/>
        <input type="hidden" id="amount" name="amount" value="75.00"/>
        <input type="hidden" name="currency_code" value="USD"/>
        <input type="hidden" name="item_name" value="xxxxx"/>
        <input type="hidden" name="rm" value="0"/>
        <input type="hidden" id="random_invoice" name="custom" value="<?php echo rand ( 1000 , 10000 ) ?>"/>
        <div id="applicants">
            <div class="applicant">
                <fieldset>
                    <legend>Applicant Information</legend>
                    <div id="name">
                        <label class="n_first">
                            <span>First Name:</span>
                            <input id="applicant_first_name" class="applicant_first_name" name="applicantFirstName" placeholder="" type="text" required>
                        </label>
                        <label class="n_last">
                            <span>Last Name:</span>
                            <input id="applicant_last_name" class="applicant_last_name" name="applicantLastName" placeholder="" type="text" required>
                        </label>
                    </div>
                    <div>
                        <label>
                            <span>Email Address:</span>
                            <input id="applicant_email" class="applicant_email" name="applicantEmail" placeholder="A working email address must be used or we will not complete your screening." type="email" required>
                        </label>
                    </div>
                    <button id="removebutton" type="button" class='button removeapplicant'>Remove Applicant</button>
                </fieldset>
            </div>
        </div>

        <button id="addbutton" type="button" class='button addapplicant'>Add Applicant</button>

        <fieldset>
            <legend>Billing Information</legend>
            <div id="name">
                <label class="n_first">
                    <span>First Name:</span>
                    <input id="first_name" name="billingFirstName" placeholder="" type="text" autocomplete="given-name" required>
                </label>
                <label class="n_last">
                    <span>Last Name:</span>
                    <input id="last_name" name="billingLastName" placeholder="" type="text" autocomplete="family-name" required>
                </label>
            </div>
            <div>
                <label>
                    <span>Email Address:</span>
                    <input id="email" name="billingEmail" placeholder="Please provide a working email address." type="email" autocomplete="email" required>
                </label>
            </div>
            <div>
                <label>
                    <span>Phone Number:</span>
                    <input id="phone_number" name="billingPhone" placeholder="" type="tel" autocomplete="tel" pattern="^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$" required>
                </label>
            </div>

            <div class="checkbox">
                <label>
                    <input id="terms_and_conditions" name="terms_and_conditions" type="checkbox" required>
                    <span>I agree to the Terms and Conditions (See below: You must agree to continue)</span>
                </label>

            </div>
        </fieldset>
        <div>
            <button class="button" name="submit" type="submit" id="process_form" data-text="...Submitting">Submit Order</button>
        </div>
    </form>
    <p><br />Questions about this process? Please Call us at <?=$contact_phone?>.</p>
</div>

<div class="clear"></div>

<script>
    var counter = 1;
    var template = $('#applicants .applicant:first').clone();
    var applicantsCount = 1;
    //add applicant
    $('body').on('click', '.addapplicant', function() {
        applicantsCount++;
        var applicant = template.clone().find(':input').each(function(){
            var newId = this.id + applicantsCount;
            $(this).prev().attr('for', newId);
            this.id = newId;
            this.name = newId;
        }).end()
        .appendTo('#applicants');
        counter = counter + 1;
        return false;
    });
    //remove applicant
    $('#applicants').on('click', '.removeapplicant', function() {
        $(this).parent().fadeOut(400, function(){
            $(this).parent().empty();
            return false;
        });
        counter = counter - 1;
        return false;
    });


    // Submit Form
    $('#checkout-form').submit(function(event) {
        // Process form before submission
        event.preventDefault()

        // Update the #amount field for payment (applicants * $75)
        //alert('counter: ' + counter);
        var total = 0;
        total = counter * 75;
        $('#amount').val(total);

        // Send email with pertinent form information
        $.ajax({
            method: 'POST',
            url: 'http://example.com/sendapplicantinfo',
            dataType: 'text',
            contentType: 'application/x-www-form-urlencoded',
            data : $('#checkout-form').serialize(),
            success: function() {
                //alert('email sent');
                $('#checkout-form').submit();
            }
        });
    });


</script>

Answer 1

找到有效的答案 - 改进？ 我将 #process_form 按钮切换回 type=button 我添加了另一个（隐藏的）提交按钮 我更改了//提交表单代码

代码如下： 提交订单

$('#process_form').click(function(event) {
        // Process form before submission
        //event.preventDefault()

        // Update the #amount field for payment (applicants * $75)
        //alert('counter: ' + counter);
        var total = 0;
        total = counter * 75;
        $('#amount').val(total);

        // Send email to Gail with all form information
        $.ajax({
            method: 'POST',
            url: 'http://onsitedrugtesting.net/sendapplicantinfo',
            dataType: 'text',
            contentType: 'application/x-www-form-urlencoded',
            data : $('#checkout-form').serialize(),
            success: function() {
                //alert('email sent');
                //$('#checkout-form').submit();
                $('#submit_form').trigger('click');
            }
        });
    });