Solved

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

Posted on 2014-07-23
7
378 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
The Orion Papers

Are you interested in becoming an AWS Certified Solutions Architect?

Discover a new interactive way of training for the exam.

 
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

The Ultimate Checklist to Optimize Your Website

Websites are getting bigger and complicated by the day. Video, images, custom fonts are all great for showcasing your product/service. But the price to pay in terms of reduced page load times and ultimately, decreased sales, can lead to some difficult decisions about what to cut.

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

726 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