Form over several pages - URL should remain

Question

Don´t know if my english is sufficient to explain this right: I have made a Form that is needs 4 or 5 pages until final submit comes. On every change the Post is added to the new page as a hidden field and a new script is called.

<form method="post" action="form4.php">

My problem is i dont want the browser to show the url to the new script and ideally keep it at the origin url.

I dont know the right terms to search on google or here for a solution. Maybe you can give me a hint how to accomplish this?

Answer 1

think i found another solution and want to share it:

the solution with the switch and the solution with ajax made me think about how to solve this easier. why not make the form on one page and hide the different parts. what waas before a button to submit the part is now a button to hide previous part and show next.

        <script type="text/javascript">
        window.addEvent('domready', function() 
            {
            $$('.blau').set('text', 'Erkennen Sie die Heilpflanze?');
            $('page_2').slide('hide');
            $('page_3').slide('hide');
            $('page_4').slide('hide');
            $('page_5').slide('hide');
            var togglePrefix = 'toggle_', boxPrefix = 'page_', emptyPrefix = '';
            $$('.submit_box a').addEvent('click', function(e)
                {
                e.stop();
                var id = $(this.get('id').replace(togglePrefix,emptyPrefix));
                var id_new = parseInt($(this).get('id').replace(togglePrefix, emptyPrefix)) + 1; 
                var next = ('page_'+id_new);
                var id_old = $(this.get('id').replace(togglePrefix,boxPrefix));
                $(id_old).set('slide', {duration: 'long', transition: 'linear'});
                $(id_old).slide('out');
                $(next).slide('in');

                if (next == 'page_1')
                  {

                  }
                if (next == 'page_2')
                  {

                  }
                if (next == 'page_3')
                  {

                  }
                if (next == 'page_4')
                  {
                  $$('.blau').set('text', '....und die letzte ist?');
                  }
                if (next == 'page_5')
                  {
                  $$('.blau').set('text', 'Nur noch ein paar Daten:');
                  }
                });
            });
        </script>

the html:

<form id="gewinnspiel" name="gewinnspiel" method="post" action="<?=$_SERVER[PHP_SELF]; ?>">
<div id="page_1"> 
    <div class="inhalt-gewinn">
      <div class="gewinn_bild"></div>
      <div class="gewinn_form">
              <div class="input_box">
                  <div><input type="radio" name="frage1" value="Kamille" /><span>Kamille</span></div>
                  <div><input type="radio" name="frage1" value="Kaktus" /><span>Kaktus</span></div>
                  <div><input type="radio" name="frage1" value="Krokus" /><span>Krokus</span></div>
              </div>
              <div class="submit_box"><a id="toggle_1" class="frage">nächste Frage...</a></div>
      </div>
      <div class="gewinn_werbung"></div>
    </div>
</div>

<div id="page_2">
    <div class="inhalt-gewinn">
      <div class="gewinn_bild"></div>
      <div class="gewinn_form">
          <div class="input_box">
              <div><input type="radio" name="frage2" value="Ringelblume" /><span>Ringelblume</span></div>
              <div><input type="radio" name="frage2" value="Rotklee" /><span>Rotklee</span></div>
              <div><input type="radio" name="frage2" value="Ringelkraut" /><span>Ringelkraut</span></div>
              </div>
              <div class="submit_box"><a id="toggle_2" class="frage">nächste Frage...</a></div>
      </div>
      <div class="gewinn_werbung"></div>
    </div>
</div>

<div id="page_3">
    <div class="inhalt-gewinn">
      <div class="gewinn_bild"></div>
      <div class="gewinn_form">
          <div class="input_box">
                <div><input type="radio" name="frage3" value="Enzian" /><span>Enzian</span></div>
                <div><input type="radio" name="frage3" value="Eisenkraut" /><span>Eisenkraut</span></div>
                <div><input type="radio" name="frage3" value="Eiche" /><span>Eiche</span></div>  
              </div>
              <div class="submit_box"><a id="toggle_3" class="frage">nächste Frage...</a></div>
      </div>
      <div class="gewinn_werbung"></div>
    </div>
</div>

<div id="page_4">
    <div class="inhalt-gewinn">
        <div class="gewinn_bild"></div>
        <div class="gewinn_form">
            <div class="input_box">
                  <div><input type="radio" name="frage4" value="Wollblume" /><span>Wollblume</span></div>
                  <div><input type="radio" name="frage4" value="Tulpe" /><span>Tulpe</span></div>
                  <div><input type="radio" name="frage4" value="Rose" /><span>Rose</span></div>
              </div>
              <div class="submit_box"><a id="toggle_4" class="frage">nächste Frage...</a></div>
      </div>
      <div class="gewinn_werbung"></div>
    </div>
</div>

<div id="page_5">
    <div class="inhalt-gewinn">
        <div class="gewinn_bild"></div>
        <div class="gewinn_form">
            <div class="input_box_ende">     
                <?php echo '<input name="date" type="hidden" value="', time(), '" />'; ?>
                <div class="nosee">eMail:<input name="email" type="text" id="email" value="<?=$_POST['email']; ?>" size="30" /></div>
                <div><span>Vorname:</span><input type="text" name="vorname" value="<?=$_POST['vorname']; ?>"/></div>
                <div><span>Nachname:</span><input type="text" name="nachname" value="<?=$_POST['nachname']; ?>"/></div>
                <div><span>Strasse:</span><input type="text" name="strasse" value="<?=$_POST['strasse']; ?>"/></div>
                <div><span>Ort:</span><input type="text" name="ort" value="<?=$_POST['ort']; ?>"/></div>
                <div><span>PLZ:</span><input type="text" name="plz" value="<?=$_POST['plz']; ?>"/></div>
                <div><span>eMail:</span><input type="text" name="imehl" value="<?=$_POST['imehl']; ?>"/></div>
            </div>
            <div class="submit_box"><input id="submit" name="senden" type="submit" value="Senden" /></div>
          </form>
        </div>
    </div>
</div>

all working ! thx for the inspiration!

Answer 2

Another option is to handle the form by the same script in stages.

<form action="formhandler.php" method="post">
<input type="hidden" name="form_stage" value="1" />
....
</form>

and within the formhandler.php:

switch($_POST['form_stage']) {
   case 5:
       // handle the stage 5 stuff here
       break;
   case 4:
       // handle stage 4 stuff here, output form for stage 5
       break;
   case 3:
       // handle stage 3 stuff here, output form for stage 4
       break;
   case 2:
      // ditto
      break;
   case 1:
   default:
      // display initial form here
}

Of course, you don't have to use a switch for this. A long sequence of if/else if works just as well, it comes down to personal preference/code complexity. But this basic workflow allows you to keep the same url and still display multiple different forms without having to resort to AJAX/javascript.

Answer 3

Load your php site inside an iframe within some page.. The url of this page will always remain.

Answer 4

You can use Ajax and pass data from form to php script and than load new form. Or you can pass argument(hidden or not) to file:

<form action="form.php?p=1" method="post">
...
</form>

Hidden parameter:

<form action="form.php" method="post">
<input type="hidden" value="4" name="p">
...
</form>

Depending on p value you load proper form and do things with rest of data.

Answer 5

If the action of the form is form4.php, then you can't change which URL the form posts to. However, you can do a redirect immediately after processing the data of the post to the URL you want the user to be at.

Alternately, you can change your form actions so they all post to the same page and just allow for multiple types of posting in your PHP.