Re-direct from a web form

[wretcdes]

Hi All.

I want to set up a redirect from a web form.

But not just that, I want the re-direct to happen only if a radio button is selected. Once selcted and the submit button is used it re-directs to another page. If the radio button is not selected then no redirect happens, it would take the user to the normal confirmation of the form submition page.

Don't treally understand the code side of BC, just html and css.

I'm sure it's very simple, but not for me.

Can anyone help?

Thanks

PS, where is the standard form submittion confirmation page kept as I want to tweak it?

[Chad_-_BCGurus_com]

Hello wretcdes,

This can be done with a little JavaScript added to the code at the bottom of your form.

First you will have to grab your validation code at the bottom of the form (do this by, while within your form, clicking on More Actions > Customize Web Form):

//<![CDATA[   - to -   //]]>

Go to http://jsbeautifier.org/ paste in your code and click the button to make it readable.

paste the new readable code back where you copied it from.

on the first line of the validation code:

function checkWholeFormXXXXX() {

Change to this:

function checkWholeFormXXXXX(theForm) {

Then under the next line with:

var why ="";

Paste in this code:

var radioClick = $('#checkbox').prop("checked");

                     if(radioClick == true){

                              theForm.action = '/FormProcessv2.aspx?WebFormID=XXXXX&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}&PageID=/YOURPAGEHERE';

                     }else{

                    theForm.action = '/FormProcessv2.aspx?WebFormID=XXXXX&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}';

                    }

You will need to change the "#checkbox" to the ID of your radio that the user clicks. then swap out the actions, one with the page redirect and one without.

Then test. 

Hope this helps,

Chad Smith | http://bcgurus.com/Business-Catalyst-Templates for only $7

[wretcdes]

Hi Chad.

Thanks for this but i couldn't seem to get it to work. Below is the amended code from my form, including the code for the radio button as it was at the bottom of the form. Don't think I did something right. It's a re-direct if the user wants to pay a deposit.

                <td><label>Pay a deposit of &pound;70 per person when making this booking</label><br />

                <input type="radio" name="CAT_Custom_277189" id="CAT_Custom_277189_0" value="Yes" />Yes<br />

                <input type="radio" name="CAT_Custom_277189" id="CAT_Custom_277189_1" value="No" />No</td>

            </tr>

            <tr>

                <td><input class="cat_button" type="submit" value="Submit" id="catwebformbutton" /></td>

            </tr>

        </tbody>

    </table>

    <script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>

    <script type="text/javascript" src="/CatalystScripts/Java_DatePicker.js"></script>

    <script type="text/javascript">

//<![CDATA[

var submitcount83640 = 0;

function checkWholeForm83640(theForm) {

    var why = "";

          var radioClick = $('CAT_Custom_277189_0').prop("checked");

                     if(radioClick == true){

                              theForm.action = '/FormProcessv2.aspx?WebFormID=XXXXX&OID={module_oid}&OTYPE={module_oty pe}&EID={module_eid}&CID={module_cid}&PageID=/pay-deposit';

                     }else{

                    theForm.action = '/FormProcessv2.aspx?WebFormID=XXXXX&OID={module_oid}&OTYPE={module_oty pe}&EID={module_eid}&CID={module_cid}';

                    }

    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.HomeAddress) why += isEmpty(theForm.HomeAddress.value, "Home Address");

    if (theForm.HomeCity) why += isEmpty(theForm.HomeCity.value, "Home City");

    if (theForm.HomeState) why += isEmpty(theForm.HomeState.value, "Home State");

    if (theForm.HomeZip) why += isEmpty(theForm.HomeZip.value, "Home Zipcode");

    if (theForm.HomeCountry) why += checkDropdown(theForm.HomeCountry.value, "Home Country");

    if (theForm.HomePhone) why += isEmpty(theForm.HomePhone.value, "Home Phone Number");

    if (theForm.CAT_Custom_277191) why += checkDropdown(theForm.CAT_Custom_277191.value, "Number of Adults");

    if (theForm.CAT_Custom_277182) if (theForm.CAT_Custom_277182.value.length > 0) why += checkDate(theForm.CAT_Custom_277182.value, "Departure Date");

    if (theForm.CAT_Custom_277184) if (theForm.CAT_Custom_277184.value.length > 0) why += isCurrency(theForm.CAT_Custom_277184.value, "Number of ski passes");

    if (why != "") {

        alert(why);

        return false;

    }

    if (submitcount83640 == 0) {

        submitcount83640++;

        theForm.submit();

        return false;

    } else {

        alert("Form submission is in progress.");

        return false;

    }

}

//]]>

[Chad_-_BCGurus_com]

no worries, you're almost there.

First, your  $('CAT_Custom_277189_0') needs to be $('#CAT_Custom_277189_0'), the pound sign lets jQuery know that you're looking for an ID.

Second, you will need to grab the action of the form you are working on and replace the ones in quotes:

<form action="/FormProcessv2.aspx?WebFormID=XXXXX&OID={module_oid}&OTYPE={module_o ty pe}&EID={module_eid}&CID={module_cid}">

Just make sure that the & are not &.

Update those and lets see if we can get this working.

Chad Smith | http://bcgurus.com/Business-Catalyst-Templates for only $7

[wretcdes]

Hi Chad,

Thanks again for your help, as I mentioned before I am getting my head around Javascript in forms.

Unfortunately I still can't form to redirect if the "pay deposit' box is checked.

Could you take a look at the code below and let me know if you can see anything stopping this function from working?

The only thing I was unsure of was that I have set the correct WebForm ID in the code below?

Any help would be a greatly appreciated.

****

This is the code at the top of the form:

<form action="/FormProcessv2.aspx?WebFormID=49877&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}" enctype="multipart/form-data" onsubmit="return checkWholeForm30768(this)" method="post" name="catwebformform30768">

*****

          <tr>

                <td><label>Pay a deposit of &pound;70 per person when making this booking</label><br />

                <input type="radio" value="Yes" id="CAT_Custom_277189_0" name="CAT_Custom_277189" />Yes<br />

                <input type="radio" value="No" id="CAT_Custom_277189_1" name="CAT_Custom_277189" />No</td>

            </tr>

            <tr>

                <td><input type="submit" id="catwebformbutton" value="Submit" class="cat_button" /></td>

            </tr>

        </tbody>

    </table>

    <script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js"></script>

    <script type="text/javascript" src="/CatalystScripts/Java_DatePicker.js"></script>

    <script type="text/javascript">

//<![CDATA[

var submitcount83640 = 0;

function checkWholeForm83640(theForm) {

    var why = "";

          var radioClick = $(#CAT_Custom_277189_0).prop("checked");

                     if(radioClick == true){

                              theForm.action = '/FormProcessv2.aspx?WebFormID=49877&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}&PageID=/pay-deposit';

                     }else{

                    theForm.action = '/FormProcessv2.aspx?WebFormID=49877&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}';

                    }

    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.HomeAddress) why += isEmpty(theForm.HomeAddress.value, "Home Address");

    if (theForm.HomeCity) why += isEmpty(theForm.HomeCity.value, "Home City");

    if (theForm.HomeState) why += isEmpty(theForm.HomeState.value, "Home State");

    if (theForm.HomeZip) why += isEmpty(theForm.HomeZip.value, "Home Zipcode");

    if (theForm.HomeCountry) why += checkDropdown(theForm.HomeCountry.value, "Home Country");

    if (theForm.HomePhone) why += isEmpty(theForm.HomePhone.value, "Home Phone Number");

    if (theForm.CAT_Custom_277191) why += checkDropdown(theForm.CAT_Custom_277191.value, "Number of Adults");

    if (theForm.CAT_Custom_277182) if (theForm.CAT_Custom_277182.value.length > 0) why += checkDate(theForm.CAT_Custom_277182.value, "Departure Date");

    if (theForm.CAT_Custom_277184) if (theForm.CAT_Custom_277184.value.length > 0) why += isCurrency(theForm.CAT_Custom_277184.value, "Number of ski passes");

    if (why != "") {

        alert(why);

        return false;

    }

    if (submitcount83640 == 0) {

        submitcount83640++;

        theForm.submit();

        return false;

    } else {

        alert("Form submission is in progress.");

        return false;

    }

}

//]]>

</script>

[thetrickster888]

Two things I notice which might be cause for it not working:

1. Change:
   1. var radioClick = $(#CAT_Custom_277189_0).prop("checked");
   2. to:
   3. var radioClick = $("#CAT_Custom_277189_0").prop("checked");
   4. (You forgot to add quotes around your jquery selector)
2. In your form's action attribute wherever you see "&" replace that with just an &

[Chad_-_BCGurus_com]

For the form's action you don't have to worry about the & - the action is going to get replace by the if statement and those &' s are good.

At this point could you give an example link? Would be easier to see if the form is getting errors.

Thanks,

Chad Smith | http://bcgurus.com/Business-Catalyst-Templates for only $7

[wretcdes]

Hi Chad.

The site is still on test urls.

Below is the link to the form I want to re-direct from. (there are three forms on the site that need the re-direct, but I assume if we get one working then the others should be easy to adapt. The first link is the test version we have been playing with to try and get this working. The other three links are the actual forms we need to re-direct from, where we have not twaeked the code.

http://absolutelysnow.catalystco.co.uk/test2-booking-form

http://absolutelysnow.catalystco.co.uk/standard-booking-form

http://absolutelysnow.catalystco.co.uk/booking-form

http://absolutelysnow.catalystco.co.uk/booking-form-chalet

On re-direct, we want people who click the 'Yes' radio to the 'pay deposit question' to be re-directed to the following url

http://absolutelysnow.catalystco.co.uk/pay-deposit

Thanks

Ken

[Chad_-_BCGurus_com · Accepted solution]

Hello Ken,

Looks good, the only thing I think that is stopping the form is that when you hit submit the form doesn't validate. In the form tag in the onsubmit attribute you have checkWholeForm30768,

but in the validation code at the bottom you have:

• checkWholeForm83640
• submitcount83640
  

These numbers need to match to get the form to validate correctly. I've copied your code and placed it on a test page, with matching form numbers the code worked.

http://bcg-sandbox.hotpressplatform.com/test

Chad Smith | http://bcgurus.com/Business-Catalyst-Templates for only $7

[wretcdes]

Hi Chad.

I feel like a bit of a numpty now.

I've recreated the form, put it in a new page and checked that all the form numbers are the same. Still not working. I'm stumped.

form is at

http://absolutelysnow.catalystco.co.uk/xxx-admended-booking-form

Sorry to keep you on this Chad but we're totally stuck.

Thanks

[Chad_-_BCGurus_com]

No worries.

Looks like the form works, but for some reason  your validation doesn't work so it doesn't run the code to redirect.

I've just placed your form code on a test page and it is working as it should: http://bcg-sandbox.hotpressplatform.com/redirectme

You did have spaces in the module otype in  your if statement at within the validation code

There are some errors on that page with

• box.js - Uncaught ReferenceError: Balloon is not defined
• jquery.cycle.all.js - [cycle] terminating; zero elements found by selector
• big_menu.css is a 404
  

You might try placing the form on a blank page with nothing but the form and see if it works.

Chad Smith | http://bcgurus.com/Business-Catalyst-Templates for only $7

[wretcdes]

Hi Chad.

Tryed it on blank page and still not working. Is it a js thing, do we think. The js errors you spotted, could that be causing it?

Also should there be spaces or not in the bit of code you showed in your last post. I've tried it with and without and seems to make no difference.

Ken

[wretcdes]

Hi Chad

IT'S WORKING!!!!

It was the js. We needed a new version of jquery.

Ken

[Chad_-_BCGurus_com]

Awesome!

I should have caught that. Great job!

Chad Smith | http://bcgurus.com/Business-Catalyst-Templates for only $7