一个表单中的 Javascript 两个提交按钮几乎完成

Question

我有一个表单，其中包含两个附加了 onClick 事件的提交按钮。表单操作是 Paypal 表单。

如果按下付款按钮，表格将通过电子邮件发送，然后重定向到 Paypal 进行付款。

如果按下发票按钮，则会发送一封包含表单详细信息的电子邮件，但会停止重定向到 PayPal 的默认操作。

一切似乎都很好，但是当按下发票按钮时，它仍然重定向到 paypal。

如果按下发票按钮，我希望它发送电子邮件但随后停止并且不继续执行表单操作。

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="paymentform" name="paymentform">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="currency_code" value="GBP">
<fieldset id="your_details" class="">
 <legend>Your Details</legend>
 <ol>
  <li><label for="your_name">Your Name</label><input type="text" name="your_name" value="" id="your_name" class="large "></li>
  <li><label for="your_position">Your Position</label><input type="text" name="your_position" value="" id="your_position" class="large"></li>
  <li><label for="your_company">Your Company</label><input type="text" name="your_company" value="" id="your_company" class="large "></li>
  <li><label for="your_telephone">Your Telephone</label><input type="text" name="your_telephone" value="" id="your_telephone" class="medium "></li>
  <li><label for="your_mobile">Your Mobile</label><input type="text" name="your_mobile" value="" id="your_mobile" class="medium"></li>
 </ol>
</fieldset>
<input type="submit" value="Pay by Credit Card &rarr;" id="cc" onclick="return email_me(document.paymentform);" class="submit_button">
<input type="submit" value="Pay by Invoice &rarr;" id="invoice" class="submit_button" onclick="return email_me(document.paymentform,true);">

var xmlHttp;
var formname;
var invoiceonly_var
function email_me(Form,invoiceonly)
{
    formname = Form.name;
    var params = "";
    var i;
    var Element;
    var type;
    var name;
    var fieldvalue;
    var optional;
    var BadFields = "";
    var Title;
    var Titles = new Array();
    Titles['item_name'] = "Course Title";
    var outMessage = "";
    invoiceonly_var = invoiceonly;

    //alert(formname);

    //alert(Form.length);

    var Optional = new Array();

    // optional fields

    Optional['your_position'] = true;
    Optional['your_mobile'] = true; 

    for(i = 0; i < Form.length; i++)
    {
        Element = Form.elements[i];

        type = Element.type;
        name = Element.name;

        //alert("name:"+name+" type:"+type);


        if(type == "text")
        {
            fieldvalue = Element.value;
            params = params + name + "=" + fieldvalue + "&";

            optional = Optional[name];
            if ( (fieldvalue == '' || fieldvalue == name ) && typeof(optional) == "undefined")
            {
                Title = getTitle(name,Titles);
                BadFields += "- " + Title + "\n";
            }   

            //alert(params);
        }
        if(type == "textarea")
        {
            fieldvalue = Element.value;
            params = params + name + "=" + fieldvalue + "&";

            optional = Optional[name];
            if ( (fieldvalue == '' || fieldvalue == name ) && typeof(optional) == "undefined")
            {
                Title = getTitle(name,Titles);
                BadFields += "- " + Title + "\n";
            }   

            //alert(params);
        }
    }


    if(BadFields)
    {
        outMessage = "We are unable to proceed as the following \n";
        outMessage += "required fields have not been completed:\n\n";
        outMessage += BadFields;

        alert(outMessage);
        return false;
    }

    //alert(params);

    xmlHttp=GetXmlHttpObject();

    if (xmlHttp==null)
    {
        alert ("Browser does not support HTTP Request");
        return;
    }

    url="/payment/ajax_email_me.php?";
    if (invoiceonly_var == true)
    {
        params = params + "Payment_Method=Invoice";
    }
    else
    {
        params = params + "Payment_Method=PayPal&";
    }
    url=url+params;

    //alert(url);

    xmlHttp.onreadystatechange = Finished;

    xmlHttp.open("GET",url,true)

    xmlHttp.send(null)

    return true;
}

function Finished() 
{ 
    if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
    { 
        //document.getElementById('search').innerHTML = xmlHttp.responseText;
        var response = xmlHttp.responseText;

        //alert(response);
        if (invoiceonly_var == true)
        {
            alert("Thank you. Your message has been sent.");
        }
        else
        {
            document.paymentform.submit();
        }

        document.body.innerHTML = document.body.innerHTML + "<span></span>";
    }
}

function GetXmlHttpObject()
{
    var xmlHttp=null;

    try
    {
        // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
        //  alert("Mozilla");
    }
    catch (e)
    {
        //Internet Explorer
        try
        {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            //  alert("IE");
        }
        catch (e)
        {
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            //  alert("IEError");
        }
    }

    return xmlHttp;
}

function selectval(Sel)
{
    return Sel.options[Sel.selectedIndex].value;
}

function getTitle(name,Titles)
{
    Title = Titles[name];
    if (typeof(Title) == "undefined")
    {
        Title = name;
        Title = Title.replace(/_/g," ");
    }
    return Title;
}

Answer 1

首先，使用 jQuery 可以大大简化您的代码在这里抽象掉大部分 AJAX 逻辑。

其次，您的 email_me 函数底部有 return true - 尝试将其更改为:

return !invoiceonly;

从此函数返回 false 将阻止表单提交。单击发票按钮时(并且 invoiceonly 参数设置为 true)您不希望提交表单，因此上述逻辑将使函数返回 假。