Dynamic change form using jQuery, AJAX

Question

I've got little problem because I don't really know how should I do this.

Let's say I've got this HTML form:

<form action="#" method="post">
<select name="change_reason" required>
    <option value="">Please choose</option>
    <option value="1">Getting apple</option>
    <option value="2">Walking outside</option>
    <option value="3">Other</option>
</select>
<input type="submit" value="Submit">

Depending on the selected answer I want to present second (different) form but without reloading the page (AJAX) and which would be submitted to PHP script. So let's say someone chose 'Getting apple', hit Submit so then the form would changed to:

<form action="/my_script.php" method="post">
<p>Getting apple, OK!</p>
<textarea name="apples" rows="2">So I am getting some apples</textarea>
<input type="submit" value="Submit">

Let's say someone chose 'Walking outside' so the form would change to:

<form action="/my_script.php" method="post">
<p>Walking outside, OK!</p>
<textarea name="apples" rows="2">So I will walk outside now</textarea>
<input type="submit" value="Submit">

Can anyone please tell me how can I get this done?

Answer 1

Just place a switch on your script and load form content from the ajax response.

<form action="#" method="post">
    <div class="dynamic-inputs">
        <select name="change_reason" required>
            <option value="">Please choose</option>
            <option value="1">Getting apple</option>
            <option value="2">Walking outside</option>
            <option value="3">Other</option>
        </select>
    </div>
    <input type="submit" value="Submit">
</form>

<script>
$(document).ready(function(){
    $("form").submit(function(){
        var myForm = $(this);
        var data = $(this).serializeArray();//serialize form inputs and pass them to php
        $.post("/myscript.php",data,function(data){
            myForm.find(".dynamic-inputs").html(data);
        });
        return false;
    });
});
</script>

While you can place a switch on your PHP script and return a value based on the change_reason input parameter

<?php 
    $change_reason = isset($_REQUEST["change_reason"]) ? $_REQUEST["change_reason"] : null;
    if($change_reason){
        switch ($change_reason) {
            case 1:
                echo '<p>Getting apple, OK!</p>
<textarea name="apples" rows="2">So I am getting some apples</textarea>';
                break;
            case 2:
                echo '<p>Walking outside, OK!</p>
<textarea name="apples" rows="2">So I will walk outside now</textarea>';
                break;
        }
    }
?>

Answer 2

Steps 1)Add each form into a modal or in lightbox
2)open each modal onchange event of select box
3)Write ajax for each individual form and close modal after submission.

$(":select[name='change_reason']").change(function() {
  /*If you are using Bootstrap the create sprate modal for this.
For more details
http://getbootstrap.com/javascript/#modals
Add each form in separate modal and open that on by giving name to each form
*/

  $('#' + $('select[name=selector]').val()).modal()

});

/* Write Ajax for sumission of indivusal forms  and close that modal after submission of each form
http://api.jquery.com/jquery.ajax/ 
Take a look at it.
*/

<!-- Add this forms into modal and give it a id  -->
<div class="modal fade" id="same-id-as-value-of-select-box">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <form action="/my_script.php" method="post">
          <p>Getting apple, OK!</p>
          <textarea name="apples" rows="2">So I am getting some apples</textarea>
          <input type="submit" value="Submit">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->


<!-- Add this forms into modals -->
<form action="/my_script.php" method="post">
  <p>Walking outside, OK!</p>
  <textarea name="apples" rows="2">So I will walk outside now</textarea>
  <input type="submit" value="Submit">

Hope this will Help you

Answer 3

If the forms are reasonably small like the ones you presented. I would just load them on the page in separate hidden div's. Then as stated in the comments, use a submit handler to determine which form to show on the page and hide the initial form.

If the forms are "too long" for this concept, I would definitely use jQuery AJAX to submit the form data and load the new form into a destination div on the page. . . maybe even replacing the existing form.