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。