1

I'd like to create a HTML form as follows:

<form action="<?php print($action); ?>" method="post">
<label for="possibilities">Possibilites</label>
        <select name="possibility" id="possibility">
        <?php foreach ($possibilites as $possibility): ?>
            <option value="<?php print($possibility['id']); ?>"><?php
                print($possibility['name']); ?></option>
          <?php endforeach; ?>
        </select>
        <rest>The rest of the form</rest>
</form>

When the user selects a certain value from the options menu, the rest of the form will be generated (instead of <rest>The rest of the form</rest>)

This page accepts a lot of PHP variables that will be used in the rest of the form.

How would you generate the rest of the form based on the value selected from the options?

The rest of the form will accept lots of PHP variables in various input elements generated dynamically. The user should have the possibility to switch between various rests (<rest> ... </rest> until he submits the completed form. The code should not open security holes.

Which approach would you choose and why? (Javascript with loading partial HTML files? Building various DOM trees (with PHP variables in it) for the <rest>...</rest>s or some approach from PHP code)?

8
  • Is there a reason you wouldn't simply include all the options and then show the relevant options as the user fills out the form? Why must you fetch them separately? Are there a large number of subsequent options?
    – Brad
    Commented Sep 16, 2014 at 20:47
  • I could include all the options in one form, but it would be uncomfortable for the user to decide what is needed to fill in in every case. I could make disabled fields but the form would be two large, if I would include all the possibilities in one form (with lots of disabled fields).
    – xralf
    Commented Sep 16, 2014 at 21:01
  • No I'm saying hide the options until they're needed. Why is this harder than a show/hide, is what I'm asking.
    – Brad
    Commented Sep 16, 2014 at 22:15
  • @Brad Could you show some example code, to know exactly what you mean (e.g. in Fiddle)?
    – xralf
    Commented Sep 16, 2014 at 22:30
  • Using jQuery... $('#someDivId').show() or $('#someDivId').hide(). My question for you is, what's in the rest of this form? Is it absolutely massive? Why are you inclined to loading it separately?
    – Brad
    Commented Sep 16, 2014 at 23:10

5 Answers 5

3
+100

create an additional div or any other html element where form needs to be displayed

<div class="formGenerated"></div>

Then in javascript change event helps to know when any of the option is selected

$(document).ready(function() {
    $('#possibility').on('change', function() {
      var selectedVal =  $('#possibility').val();//value of the option selected
       $.ajax({
           url:'multipleForms.php',
           type:'POST',
           dataType:'json', 
           data:{name:selectedVal},
           success:function(resp){
             $('.formGenerated').html(resp);
          }
       });
    });
});

// multipleForms.php
<?php
   $name = $_POST['name'];
   if($name == 'x'){
     $x = 'your form goes here';
     echo json_encode($x);
   }
   //similarly for other conditions
?>

Hope this might help you.

1

With jquery tho following code would be an option:

$(document).ready(function() {
    $('#selectId').on('change', function() {
        $('#restDivId').load('partialHtmlPage.php?value=' + $('#selectId').val());
    });
});
2
  • So, the partialHtmlPage should contain a root form element? Or could I have in the partial HTML page only the content of the form (with needed elements) and load it as part (children) of the form on the original page? The problem with having two forms, is that the user would have to click two buttons to send the completed two forms. Or is it possible to have nested forms?
    – xralf
    Commented Sep 16, 2014 at 20:51
  • 1
    Because the load method updates the DOM you can have 1 root form. I haven't tested this but I don't think it will cause trouble
    – Barry127
    Commented Sep 16, 2014 at 20:59
1

Building various DOM trees is the faster choice. And there is no better or more secure choice actually, both are the same if we're talking security...

1

Use document fragment and dom manipulation to dynamically update your markup. It is fast enough and completely client side. In respect to the use of jQuery, I would rather be framework agnostic at first unless you need some specific options provided by said frameworks.

Doc:

1

To me it would really depend on a few things:

  • How many additional form elements are you going to need to display?
  • Do you need record the steps in filling out the form on the server side in some manner?
  • Do you need to evaluate the data submitted in the form along with data only available on the server in order to determine what next form components to show?

If you only have a few different form options and addining in the DOM as hidden elements on page download does not add what you deem to be unacceptable incremental page download times, you may strongly consider a javascript only solution to hide/show form elements based on your desired logic. If you answered yes to either of other items, and assuming you want to do all this without a page reload, then you would need to use AJAX methodology.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.