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?

Click handler on the submit button -> AJAX call -> Update form contents based on AJAX response. — tymeJV
– tymeJV, Commented Oct 14, 2015 at 16:15
@tymeJV: Don't use click handlers with forms (they do not work with keyboard submission on Enter). Always use a submit handler! — iCollect.it Ltd
– iCollect.it Ltd, Commented Oct 14, 2015 at 16:18
You can actually do it several different ways. The question is how are you handling the data coming into PHP. are those forms going to be treated as 3 different forms or is it going to be a single form. — Lauwrentius
– Lauwrentius, Commented Oct 14, 2015 at 16:32

Rosmarine Popcorn · Accepted Answer · 2015-10-20 13:28:51Z

4

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;
        }
    }
?>

edited Oct 20, 2015 at 13:28

answered Oct 14, 2015 at 18:23

Rosmarine Popcorn

11k11 gold badges62 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cassie Kasandr Over a year ago

Thanks. It kinda works - but every time I hit submit the new form shows up and it reverts back to original at the same time. So do you have any idea how to fix that?

Rosmarine Popcorn Over a year ago

Prevent the form for it's default submission by doing a return false at the end of the form submit event.

Nishant Dongare · Accepted Answer · 2015-10-14 18:16:40Z

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

Brian Seim at EvoDynamic Inc · Accepted Answer · 2015-10-14 18:07:03Z

0

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.

answered Oct 14, 2015 at 18:07

Brian Seim at EvoDynamic Inc

1581 gold badge2 silver badges10 bronze badges

Collectives™ on Stack Overflow

Dynamic change form using jQuery, AJAX

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related