Swap out code in action url when a radio button is clicked

Hi everyone,

The following code is what my form action looks like:

<form name="catwebformform79383" method="post" onsubmit="return checkWholeForm79383(this)" enctype="multipart/form-data" action="https://site.worldsecuresystems.com/FormProcessv2.aspx?WebFormID=70464&amp;OID={tag_bookingid}&amp;OTYPE=61&amp;EID={module_eid}&amp;CID={module_cid}&amp;CC={module_urlcountrycode}&amp;Referrer={module_siteurl,true,true}&OPTIN=true&SendInvoice=true">

Open in new window


As you can see, I've added the following to the end of the action url:

&SendInvoice=true

This automatically sends an invoice once the form is submitted.

I have two radio buttons on my form, i.e. one for "Pay Offline", the other for "Credit Card". The code snippet showing these radio buttons is as follows:

 <td><label>Payment Method <span class="req">*</span></label><br />
                <p class="payOffline close-space"><input type="radio" name="PaymentMethodType" id="PaymentMethodType_3" value="3" /> Pay Offline</p>
                <div id="payOffline">
                <table style="margin: 0px; padding: 0px;">
                    <tbody>
                        <tr>
                            <td>
                            <p style="margin: 0px; padding: 0px;"> If you would like to pay offline, download this form and follow the instructions on the form to submit it back to us.
                            </p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                </div>
                <p class="creditCard" style="margin: 0px; padding: 0px;"><input type="radio" name="PaymentMethodType" id="PaymentMethodType_1" value="1" /> Credit Card</p>
                <div id="creditCardType" style="margin: 0px; padding: 0px;">
                <table style="margin: 0px; padding: 0px;">
                    <tbody>

Open in new window


My question is, is there a way to use jQuery so that if someone clicks the radio with an id of "PaymentMethodType_3" then the action url would be revised so that it removed the following code from the end of the action url:

&SendInvoice=true

But then replaced it with:

&PageID=/Results.htm

So the revised form action would be as follows:

<form name="catwebformform79383" method="post" onsubmit="return checkWholeForm79383(this)" enctype="multipart/form-data" action="https://site.worldsecuresystems.com/FormProcessv2.aspx?WebFormID=70464&amp;OID={tag_bookingid}&amp;OTYPE=61&amp;EID={module_eid}&amp;CID={module_cid}&amp;CC={module_urlcountrycode}&amp;Referrer={module_siteurl,true,true}&OPTIN=true&PageID=/Results.htm">

Open in new window


If the radio button with an id of "PaymentMethodType_1" was clicked then the form code above would revert back to it's original state and vica versa.

I just wondered if anyone could help me out here?

Appreciate any assistance.
LVL 1
gwh2Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
i would set the action when you go to submit the form, that way it's just one check:

in your checkWholeForm79383() function, do the check on the radio buttons:
function checkWholeForm79383( frm ) {
// pre-existing code

if( $("#PaymentMethodType_3").prop("checked", true) )
     frm.action = 'https://site.worldsecuresystems.com/FormProcessv2.aspx?WebFormID=70464&amp;OID={tag_bookingid}&amp;OTYPE=61&amp;EID={module_eid}&amp;CID={module_cid}&amp;CC={module_urlcountrycode}&amp;Referrer={module_siteurl,true,true}&OPTIN=true&PageID=/Results.htm';


}

Open in new window

0
gwh2Author Commented:
Thanks for the reply,

Could you check my code below to see if I inserted the if statement in the correct section of the function?

Really appreciate your help.

    <script type="text/javascript">
    //<![CDATA[
    var submitcount79383 = 0;

    function checkWholeForm79383(theForm) {
            var why = "";
            if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name");
            if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name");
            if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value);
            if (theForm.BillingAddress) why += isEmpty(theForm.BillingAddress.value, "Billing Address");
            if (theForm.BillingCity) why += isEmpty(theForm.BillingCity.value, "Billing City");
            if (theForm.BillingState) why += isEmpty(theForm.BillingState.value, "Billing State");
            if (theForm.BillingZip) why += isEmpty(theForm.BillingZip.value, "");
            if (theForm.BillingCountry) why += checkDropdown(theForm.BillingCountry.value, "Billing Country");
            if (theForm.PaymentMethodType) why += checkSelected(theForm.PaymentMethodType, "Payment Method");
            if (!theForm.PaymentMethodType || getRadioSelected(theForm.PaymentMethodType) == 1) {
                if (theForm.CardName) why += isEmpty(theForm.CardName.value, "Name on Card");
                if (theForm.CardNumber) why += isNumeric(theForm.CardNumber.value, "Card Number");
                if (theForm.Amount) why += isCurrency(theForm.Amount.value, "Amount");
            }
            if (theForm.CaptchaV2) why += captchaIsInvalid(theForm, "Enter Word Verification in box below", "Please enter the correct Word Verification as seen in the image");
            if (why != "") {
                alert(why);
                return false;
            }
            if (submitcount79383 == 0) {
                submitcount79383++;
                theForm.submit();
                return false;

if( $("#PaymentMethodType_3").prop("checked", true) )
     frm.action = 'https://site.worldsecuresystems.com/FormProcessv2.aspx?WebFormID=70464&amp;OID={tag_bookingid}&amp;OTYPE=61&amp;EID={module_eid}&amp;CID={module_cid}&amp;CC={module_urlcountrycode}&amp;Referrer={module_siteurl,true,true}&OPTIN=true&PageID=/Results.htm';


            } else {
                alert("Form submission is in progress.");
                return false;
            }
        }
        //]]>
</script>

Open in new window

0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
it looks good, just change

frm.action

to

theForm.action
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

gwh2Author Commented:
Ok, I'll give it a try and report back. Thanks
0
gwh2Author Commented:
Hi,

I revised the code as shown below but when I tested, it seemed to ignore the if statement and so the url action wasn't changed.

Are you able to help further?

Thanks again

    <script type="text/javascript">
    //<![CDATA[
    var submitcount79383 = 0;

    function checkWholeForm79383(theForm) {
            var why = "";
            if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name");
            if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name");
            if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value);
            if (theForm.BillingAddress) why += isEmpty(theForm.BillingAddress.value, "Billing Address");
            if (theForm.BillingCity) why += isEmpty(theForm.BillingCity.value, "Billing City");
            if (theForm.BillingState) why += isEmpty(theForm.BillingState.value, "Billing State");
            if (theForm.BillingZip) why += isEmpty(theForm.BillingZip.value, "");
            if (theForm.BillingCountry) why += checkDropdown(theForm.BillingCountry.value, "Billing Country");
            if (theForm.PaymentMethodType) why += checkSelected(theForm.PaymentMethodType, "Payment Method");
            if (!theForm.PaymentMethodType || getRadioSelected(theForm.PaymentMethodType) == 1) {
                if (theForm.CardName) why += isEmpty(theForm.CardName.value, "Name on Card");
                if (theForm.CardNumber) why += isNumeric(theForm.CardNumber.value, "Card Number");
                if (theForm.Amount) why += isCurrency(theForm.Amount.value, "Amount");
            }
            if (theForm.CaptchaV2) why += captchaIsInvalid(theForm, "Enter Word Verification in box below", "Please enter the correct Word Verification as seen in the image");
            if (why != "") {
                alert(why);
                return false;
            }
            if (submitcount79383 == 0) {
                submitcount79383++;
                theForm.submit();
                return false;
                
if( $("#PaymentMethodType_3").prop("checked", true) )
     theForm.action = 'https://stms.worldsecuresystems.com/FormProcessv2.aspx?WebFormID=70464&amp;OID={tag_bookingid}&amp;OTYPE=61&amp;EID={module_eid}&amp;CID={module_cid}&amp;CC={module_urlcountrycode}&amp;Referrer={module_siteurl,true,true}&OPTIN=true&PageID=/offline-results';

                
            } else {
                alert("Form submission is in progress.");
                return false;
            }
        }
        //]]>
</script>

Open in new window

0
gwh2Author Commented:
Hi,

Just wanted to report back to say that I slightly revised the code so that it was positioned a bit further up in the code and just added some curly braces. The revised code is shown below so all is working well now.

Thanks for your help.

            if (submitcount79383 == 0) {
                submitcount79383++;
                
if( $("#PaymentMethodType_3").prop("checked", true) ){
    theForm.action = 'https://site.worldsecuresystems.com/FormProcessv2.aspx?WebFormID=70464&amp;OID={tag_bookingid}&amp;OTYPE=61&amp;EID={module_eid}&amp;CID={module_cid}&amp;CC={module_urlcountrycode}&amp;Referrer={module_siteurl,true,true}&OPTIN=true&PageID=/offline-results';}

                
                theForm.submit();
                return false;
                
            } else {
                alert("Form submission is in progress.");
                return false;
            }
        }
        //]]>
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
gwh2Author Commented:
I had to revise the code given in order to find a complete solution
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.