CODEWITHSUNDEEP
javascriptphphtmlforms
xralf
xralf

Reputation: 3642

Creating dynamic forms based on the values selected

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)?

Upvotes: 1

Views: 1531

Answers (5)

Davan Polampalli
Davan Polampalli

Reputation: 219

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.

Upvotes: 3

Mike Brant
Mike Brant

Reputation: 71384

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.

Upvotes: 1

Sebas
Sebas

Reputation: 21532

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:

Upvotes: 1

Asher
Asher

Reputation: 577

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...

Upvotes: 1

Barry127
Barry127

Reputation: 1212

With jquery tho following code would be an option:

$(document).ready(function() {
    $('#selectId').on('change', function() {
        $('#restDivId').load('partialHtmlPage.php?value=' + $('#selectId').val());
    });
});

Upvotes: 1

Related Questions