Change action url on form submit

Hi everyone,

I have two radio buttons on my web form, one with an id=“PaymentMethodType_3”, the other id=“PaymentMethodType_1”.

The snippet below shows these in context:


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


I want to be able to change the form action depending on which of the above 2 radio buttons are pressed.

If the radio button id=“PaymentMethodType_1” is pressed then the form action should remain as is, but if the other one is checked then the end should change.

The following is the action that should stay in place if id=“PaymentMethodType_1” is pressed


<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">

If id=“PaymentMethodType_3” is pressed then it should look like this:


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

The only difference between the two is that &SendInvoice=true is swapped out with &PageID=/offline-results

I made the check to set the action when the form was doing its validation check. The following is the code:


    <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://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';


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


After testing by selecting the PaymentMethodType_3 radio button and submitting the form, it didn’t change the action url, it just remained the same as if id=“PaymentMethodType_1” had been selected.

I wondered if someone could help me pinpoint the problem.

Appreciate any help.

Hi,

I just wanted to let you know that I’ve found a solution to this problem so the question is no longer needed.

Thanks very much.

If you’re curious how others do it:

Usually there are values in the radios which can be tacked onto the action url (or sent directly via an ajax request) as a query string and sent to the server. The server’s form-processing script can read these query strings and use that to server the correct page.

We do this in Flask with for example our registration form going to login.py which uses the form action (/path/to/register&option=1) to call the correct function in login.py. Within that function, we’ll look at request.args and see if there are any options added in. Each of the options we’ve added can direct users to different forms depending on what they chose from the radio field.