javascript - Dynamic change form using jQuery, AJAX - Stack Overflow

admin管理员组

文章数量:1406753

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?

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?

• javascript
• jquery
• ajax

Share Improve this question Follow asked Oct 14, 2015 at 16:13 Cassie KasandrCassie Kasandr 34133 gold badges66 silver badges1515 bronze badges 3

• Click handler on the submit button -> AJAX call -> Update form contents based on AJAX response. – tymeJV Commented Oct 14, 2015 at 16:15
• 2 @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 Commented Oct 14, 2015 at 16:18
• 1 You can actually do it several different ways. The question is how are you handling the data ing into PHP. are those forms going to be treated as 3 different forms or is it going to be a single form. – Lauwrentius Commented Oct 14, 2015 at 16:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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;
        }
    }
?>

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

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

本文标签： javascriptDynamic change form using jQueryAJAXStack Overflow