Javascript的两个提交按钮在一种形式几乎完成

Question

我有一个窗体与两个提交按钮与附加onClick事件。表单操作是一种贝宝形式。

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

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

这一切似乎工作正常，但当发票buttin被按下时，它仍然重定向到贝宝。

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

<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

你尝试添加“返回false”来，你不想提交onclick事件的结束？

或者您可以将类型从“提交”更改为“按钮” - 这可能会诀窍。

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

首先，你的代码可以极大地配合使用jQuery抽象掉很多这里的AJAX逻辑的简化。

其次，你在你的email_me功能的底部有return true - 试试这个更改为：

return !invoiceonly; 

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