How to jump from Form 1 To Form 2 with conditions?

  • Profile Image
    deluca
    Asked on August 07, 2012 at 04:13 AM

    Hello,

     

    I have created 2 nearly identical forms.

     

    The the user clicks on the tick box 1 I would like to create a condition to send him to form 2, the problem is that the condition do not show any other form possibilities, I really have 2 forms but the condition do not give me the choice of choosing another form.

     

    Any help would be more than appreciated.

     

    Regards,

     

    Ben

  • Profile Image
    fxr
    Answered on August 07, 2012 at 06:43 AM

    How are you embedding the forms onto your website?

    You could use HTML/Javascript and CSS to show/hide one form or the other depending on user input. 

    e.g

    I have two forms: 

    http://form.jotformeu.com/form/22193200289348

    http://form.jotformeu.com/form/22192442101338

    ***

    I add this javascript function to toggle the visibility of each form to my webpage:

     

    <script type="text/javascript">

    <!--

        function toggle_visibility(id1,id2) {

           var e = document.getElementById(id1);

           var f = document.getElementById(id2);

     

           if(e.style.display == 'block')

           {

              e.style.display = 'none';

              f.style.display = 'block';

           }

           else

           {

              e.style.display = 'block';

              f.style.display = 'none';

           }

     

        }

    //-->

    </script>

    Then use this HTML to embed the two forms on my webpage. 

    <form action="">

    <input type="radio" name="form" onClick="javascript:toggle_visibility('form1','form2');" value="form1"> Form1<br />

    <input type="radio" name="form" onClick="javascript:toggle_visibility('form1','form2');" value="form2"/> Form2

    </form>

     

    <div id="form1" style="display:none"><script type="text/javascript" src="//form.jotformeu.com/jsform/22193200289348"></script></div>

    <div id="form2" style="display:none"><script type="text/javascript" src="//form.jotformeu.com/jsform/22192442101338"></script></div>

     

    You can see this example working here

    The pages complete source code can see here

     

  • Profile Image
    deluca
    Answered on August 07, 2012 at 06:49 AM

    Thank you for your reply.

    I am a bit surprises you haven't got a function that let us add another form name in a condition.

     

    Also, the above is a little tricky to be honest.

     

    I was trying to create pages with form breacks but it will not let me put paypal in the first page and  a purchase order on the next break, this is another very weird thing as it is so important to anyone to be able to jump from one page to the other while still have a kind of cart that can add multiple products.

     

    Thank you,

     

    Ben

  • Profile Image
    fxr
    Answered on August 07, 2012 at 06:57 AM

    Hi Ben,

    Yes, unfortunately, there is no way to add to different payment methods to the same form. If you want to give your users an option you do have to use two forms. 

    Although the method I show above to get two payment methods onto your form may appear a little tricky, its really just a matter of changing the Form IDs' used to those of your own. 

    If you want to try it, and get stuck or need help with positioning of the form, you are welcome to provide the URL of where you are trying to embed the forms and we will help with the necessary code. 

     

  • Profile Image
    deluca
    Answered on August 07, 2012 at 06:58 AM

    Thank you,

     

    I will have 3 forms in total. Could you please tell me if this code would work?

     

    <title>2 Form Selector</title>
    <head>
    <style type="text/css">
    </style>

    <script type="text/javascript">
    <!--
        function toggle_visibility(id1,id2,id3) {
           var e = document.getElementById(id1);
           var f = document.getElementById(id2);
           var g = document.getElementById(id3);
          
           if(e.style.display == 'block')
           {
              e.style.display = 'none';
              f.style.display = 'block';
              f.style.display = 'block';
           }
           else
           {
              e.style.display = 'block';
              f.style.display = 'none';
              f.style.display = 'block';
           }
              else
             {
               e.style.display = 'block';
              f.style.display = 'block';
              f.style.display = 'none';
           }
        //-->
    </script>

    </head>



    <body>
        <form action="">
            <input type="radio" name="form" onClick="javascript:toggle_visibility('form1','form2');" value="form1"> Form1
            <br />
            <input type="radio" name="form" onClick="javascript:toggle_visibility('form1','form2');" value="form2"/> Form2
            <br />
            <input type="radio" name="form" onClick="javascript:toggle_visibility('form1','form2');" value="form2"/> Form3
    </form>

    <div id="form1" style="display:none"><script type="text/javascript" src="//form.jotformeu.com/jsform/22193200289348"></script></div>
    <div id="form2" style="display:none"><script type="text/javascript" src="//form.jotformeu.com/jsform/22192442101338"></script></div>
    <div id="form3" style="display:none"><script type="text/javascript" src="//form.jotformeu.com/jsform/22192442101339"></script></div>
    <body>

     

    Thank you,

     

     

    Ben

  • Profile Image
    deluca
    Answered on August 07, 2012 at 07:03 AM

    Thanks Fxr, is my above ok do you think?

     

    Thank you,

     

    Ben

  • Profile Image
    fxr
    Answered on August 07, 2012 at 07:10 AM

    THis should work: http://pastie.org/4405271

    Just remember to update the form IDs with those of your own:

     

    ///

    <title>2 Form Selector</title>

    <head>

    <style type="text/css">

    </style>

     

    <script type="text/javascript">

    <!--

        function toggle_visibility(id) {

           var e = document.getElementById('form1');

           var f = document.getElementById('form2');

           var g = document.getElementById('form3');

     

           if(id=='form1' && e.style.display == 'none')       

           {

              e.style.display = 'block';

              f.style.display = 'none';

              g.style.display = 'none';

           }

     

           else if(id=='form2' && f.style.display == 'none')       

           {

              e.style.display = 'none';

              f.style.display = 'block';

              g.style.display = 'none';

           }

     

           else if(id=='form3' && g.style.display == 'none')       

           {

              e.style.display = 'none';

              f.style.display = 'none';

              g.style.display = 'block';

           }

      }

     

     

        //-->

    </script>

     

    </head>

     

     

     

     

        <form action="">

            <input type="radio" name="form" onClick="javascript:toggle_visibility('form1');" value="form1"> Form1

            <br />

            <input type="radio" name="form" onClick="javascript:toggle_visibility('form2');" value="form2"/> Form2

            <br />

            <input type="radio" name="form" onClick="javascript:toggle_visibility('form3');" value="form2"/> Form3

    </form>

     

    <div id="form1" style="display:none"><script type="text/javascript" src="//form.jotformeu.com/jsform/22193200289348"></script></div>

    <div id="form2" style="display:none"><script type="text/javascript" src="//form.jotformeu.com/jsform/22192442101338"></script></div>

    <div id="form3" style="display:none"><script type="text/javascript" src="//form.jotformeu.com/jsform/22192442101339"></script></div>

     

     

  • Profile Image
    ximena
    Answered on September 11, 2012 at 03:38 PM

    I am trying to do the same thing as Deluca. But after I click the radio buttom not form appear... I am using this code. Any advice? Thank you!

    Ticket Purchases
    White Studio Rental
    Training and Workshops
    <p>
    <title></title>
    <style type="text/css">

    </style>     <script type="text/javascript">

    <!--

        function toggle_visibility(id) {

           var e = document.getElementById('form1');

           var f = document.getElementById('form2');

           var g = document.getElementById('form3');

     

           if(id=='form1' && e.style.display == 'none')      

           {

              e.style.display = 'block';

              f.style.display = 'none';

              g.style.display = 'none';

           }

     

           else if(id=='form2' && f.style.display == 'none')      

           {

              e.style.display = 'none';

              f.style.display = 'block';

              g.style.display = 'none';

           }

     

           else if(id=='form3' && g.style.display == 'none')      

           {

              e.style.display = 'none';

              f.style.display = 'none';

              g.style.display = 'block';

           }

      }

     

     

        //-->

    </script></p>
    <form action="">
        <input type="radio" name="form" onClick="javascript:toggle_visibility('form1');" value="Ticket Purchases" /> Ticket Purchases          <br />
        <input type="radio" name="form" onClick="javascript:toggle_visibility('form2');" value="form2" /> White Studio Rental          <br />
        <input type="radio" name="form" onClick="javascript:toggle_visibility('form3');" value="form2" /> Training and Workshops
    </form>
    <div id="form1" style="display:none"><script type="text/javascript" src="//form.jotform.us/form/22293924942156"></script></div>
    <div id="form2" style="display:none"><script type="text/javascript" src="//jotform.us/form/22261446124142"></script></div>
    <div id="form3" style="display:none"><script type="text/javascript" src="//jotform.us/form/22294235237149"></script></div>
  • Profile Image
    NeilVicente
    Answered on September 11, 2012 at 04:08 PM

    @ximena

    Your script is loading the HTML forms as javascript files even if they aren't.

    For example:

    <script type="text/javascript" src="//form.jotform.us/form/22293924942156">

    should be

    <script type="text/javascript" src="//form.jotform.us/jsform/22293924942156">


    Apply this change to all form URLs on your codes, then let us know your results.