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

Question

我有一个包含以下代码的php页面。我试图阻止默认表单提交到PayPal，直到我更新了隐藏的#amount字段并通过ajax调用发送了一封电子邮件。

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

我曾尝试将#process_form按钮改为输入' button‘而不是submit，并将$(’#checkout-form‘).submit(.submit(#process_form){改为$(’#process_form‘).click(){ --但我的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

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

代码如下:提交订单

$('#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');
            }
        });
    });