Javascript two submit buttons in one form almost complete

I have a form with two submit buttons with onClick events attached. The form action is a paypal form.

If make a payment button is pressed the form is emailed and then redirects to paypal for payment.

If the invoice button is pressed an email is sent with the form details but the default action of redirecting to PayPal is stopped.

It all seems to work fine but when the invoice buttin is pressed it still redirects to paypal.

If the invoice button is pressed i want it to send the email but then stop and not continue on with the form action.

<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;
}

First of all, your code could be greatly simplified with the use of jQuery to abstract away much of the AJAX logic here.

Secondly, you have return true at the bottom of your email_me function - try changing this to:

return !invoiceonly;

Returning false from this function will prevent the form from submitting. When the invoice button is clicked (and the invoiceonly parameter is set to true) you do not want the form to submit, so the above logic will make the function return false.

Usually I would suggest adding ";return false" after the Javascript you want to run, but since you're already returning a value, I'm not sure that will work. Give it a shot, though, and if it doesn't work, can I ask what the return value is doing?

Something like this:

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

Did you try adding "return false" to the end of the onclick event which you don't want to submit?

Or you can change the type to "button" from "submit" - that might do the trick.