Solved

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

Posted on 2014-07-23
7
371 Views
Last Modified: 2014-07-28
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.
0
Comment
Question by:gwh2
  • 5
  • 2
7 Comments
 
LVL 33

Assisted Solution

by:Big Monty
Big Monty earned 500 total points
ID: 40214818
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
 
LVL 1

Author Comment

by:gwh2
ID: 40215698
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
 
LVL 33

Expert Comment

by:Big Monty
ID: 40215704
it looks good, just change

frm.action

to

theForm.action
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 1

Author Comment

by:gwh2
ID: 40215742
Ok, I'll give it a try and report back. Thanks
0
 
LVL 1

Author Comment

by:gwh2
ID: 40215768
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
 
LVL 1

Accepted Solution

by:
gwh2 earned 0 total points
ID: 40216016
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
 
LVL 1

Author Closing Comment

by:gwh2
ID: 40223682
I had to revise the code given in order to find a complete solution
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question