13 Replies Latest reply: Jul 18, 2012 12:14 PM by Chad - BCGurus.com RSS

    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?

        • 1. Re: Re-direct from a web form
          Chad - BCGurus.com MeganK

          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

          • 2. Re: Re-direct from a web form
            wretcdes Community Member

            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;

                }

            }

            //]]>

            • 3. Re: Re-direct from a web form
              Chad - BCGurus.com MeganK

              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 &amp;.

               

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

               

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

              • 4. Re: Re-direct from a web form
                wretcdes Community Member

                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&amp;OID={module_oid}&amp;OTYPE={module_otype} &amp;EID={module_eid}&amp;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_ei d}&CID={module_cid}&PageID=/pay-deposit';

                                     }else{

                                    theForm.action = '/FormProcessv2.aspx?WebFormID=49877&OID={module_oid}&OTYPE={module_otype}&EID={module_ei d}&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>

                • 5. Re: Re-direct from a web form
                  thetrickster888 Community Member

                  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 "&amp;" replace that with just an &
                  • 6. Re: Re-direct from a web form
                    Chad - BCGurus.com MeganK

                    For the form's action you don't have to worry about the &amp; - 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

                    • 7. Re: Re-direct from a web form
                      wretcdes Community Member

                      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

                      • 8. Re: Re-direct from a web form
                        Chad - BCGurus.com MeganK

                        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

                        Untitled-1.jpg

                         

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

                        • 9. Re: Re-direct from a web form
                          wretcdes Community Member

                          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

                          • 10. Re: Re-direct from a web form
                            Chad - BCGurus.com MeganK

                            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

                            Untitled-2.jpg

                             

                            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

                            • 11. Re: Re-direct from a web form
                              wretcdes Community Member

                              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

                              • 12. Re: Re-direct from a web form
                                wretcdes Community Member

                                Hi Chad

                                 

                                IT'S WORKING!!!!

                                 

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

                                 

                                Ken

                                • 13. Re: Re-direct from a web form
                                  Chad - BCGurus.com MeganK

                                  Awesome!

                                  I should have caught that. Great job!

                                   

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