Question

我有一个带有两个提交按钮的表单，附带了onClick事件。表格动作是一种贝宝形式。

如果按下付款按钮，则会通过电子邮件发送表单，然后重定向到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逻辑，可以大大简化您的代码。

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

return !invoiceonly;

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

Answer 2

通常我建议在你要运行的Javascript之后添加“; return false”，但由于你已经返回了一个值，我不确定它是否会起作用。但是，试一试，如果它不起作用，我可以问一下返回值是做什么的吗？

这样的事情：

<input type="submit" value="Pay by Invoice &rarr;" id="invoice" class="submit_button" onclick="return email_me(document.paymentform,true);return false">

Answer 3

您是否尝试在不想提交的onclick事件结尾处添加“return false”？

或者您可以从“提交”中将类型更改为“按钮” - 这可能会起作用。

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

3 个答案: