Using Jquery to change form based on user input

Question

I have a form with a select tag. I need my form to change based on the selection from the user. I am given to believe that the easiest way to do this is to use JQuery. Here is my code:

<div class="form-group">
<label for="category" >Category</label>
<select id="category" name="category" class="form-control">
<option value="0" >Select Category</option>

<?php 
  $sql_cat= "SELECT * FROM category";
  $result = mysqli_query($conn,$sql_cat);   
  $cat_items="";
  if($result) {
    while($cats = $result->fetch_assoc()) { 
      echo '<option value="'.$cats['id'].'" >'.$cats['cat_name'].'</option>';
    }
  } else {
    echo '';
  }
?>

</select>
</div>

<div id="addhtml"></div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#category").change(function() {
  alert("event triggered");

  var val = $(this).val();
  if (val == "number" || val == "symbol") {
     $("#addhtml").html(<?php include("html/form_number.html"); ?>);
  } else if (val == "letter") {
    $("#addhtml").html(<?php include("html/form_letter.html"); ?>);
  } else {
    $("#addhtml").html(<?php include("html/form_other.html"); ?>);
  }
});

});
</script>

Note: the php while statement just sets up the current three options of "number", "symbol" or "letter" with ids of 1,2 and 3 respectively

When I change the category, it does not trigger the jquery.change() I would like to code the form without using the addhtml div but am willing to use it if necessary.

Questions: Is the reason the change function is not being triggered because I am using php to set the values of the select options? If so how can I resolve? If not, why isn't it being triggered? How can I accomplish my goal of not using the addhtml div? Is there a better way to accomplish what I am going for?
Thanks in advance.

EDIT: Answers to initial questions: As stated by bistoco, php is pre compiled by the server and sent in as html so the issue is not from using php to set the values of the select tag.

I have now determined that it is due to the content of my php include files. I have determined that it registers the change event and loads the content just fine if my file is simple like this:

"<div><label>New Number</label></div>"

but if I add any white space or \n characters for human readability like this:

"<div>
  <label>New Number</label>
</div>"

Not only does it not work, but it also completely skips the change event.

New Questions: Does the jquery html function have a list of illegal characters that would cause it to fail? Why is it not even registering the change function when it doesn't like the contents of my php include file?

What do those <?php include>s return in the if/else structure? Are they returning quoted strings? If not you'll need to put quotes in your JS: .html("<?php include("html/form_number.html"); ?>") otherwise your JS is not valid and won't run at all. (Do you get any errors in the browser's console?) — nnnnnn
– nnnnnn, Commented Aug 1, 2015 at 1:00
Use alert to check whether the event is triggering, and what is the value (in the change function insert alert(val)) — user5166265
– user5166265, Commented Aug 1, 2015 at 1:01
@Lightwind I threw in an alert and it does not come up thus proving that the change event is not being triggered — Kris Kringle
– Kris Kringle, Commented Aug 1, 2015 at 1:29

bistoco · Accepted Answer · 2015-08-01 01:13:39Z

First thing that you must understand is that php runs on the server, all the output is rendered and sent as html code to the browser, and is not available there.

That said, you have at least 2 options :

1.- echo all form options, each one inside a div, that you can hide/show based on the selected choice.

<div class="form-group">
<label for="category" >Category</label>
<select id="category" name="category" class="form-control">
<option value="0" >Select Category</option>

<?php 
  $sql_cat= "SELECT * FROM category";
  $result = mysqli_query($conn,$sql_cat);   
  $cat_items="";
  if($result) {
    while($cats = $result->fetch_assoc()) { 
      echo '<option value="'.$cats['id'].'" >'.$cats['cat_name'].'</option>';
    }
  } else {
    echo '';
  }
?>

</select>
    <!-- ECHOING ALL FORM OPTIONS -->
    <div class="option-form" id="form-option-symbol"><?php include("html/form_number.html"); ?></div>
    <div class="option-form" id="form-option-letter"><?php include("html/form_letter.html"); ?></div>
    <div class="option-form" id="form-option-other"><?php include("html/form_other.html"); ?></div>
</div>

<style>
    div.option-form {
        display:none; /* HIDE ALL DIVS BY DEFAULT */
    }
</style>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $("#category").change(function() {
    // HIDE ALL DIVS
    $('div.option-form').hide();
      var val = $(this).val();
      if (val == "number" || val == "symbol") {
         $('form-option-symbol').show();
      } else if (val == "letter") {
         $('form-option-letter').show();
      } else {
        $('form-option-other').show();
      }
  });
});
</script>

2.- Using a template system or load partial html pieces with ajax.

Option #1 if statement .show() needed to be '#form-option-**option** to work for me. Thanks so much.

Dylan Wijnen · Accepted Answer · 2015-08-01 01:08:53Z

0

PHP Is a pre-processor so adding later into the website is useless. Just create your form with either setting its html or by using .prepend() or .append() with your form elements.

<form class="myform">
</form>

and in jquery

$('.myform').html('<input type="submit">');

or

$('.myform').append('<input type="submit"');

EDIT : Read your code wrong looked up

  <?php include('test.html'); ?>

don't think that would work.

edited Aug 1, 2015 at 1:08

answered Aug 1, 2015 at 1:05

Dylan Wijnen

2193 silver badges14 bronze badges

3 Comments

Kris Kringle Over a year ago

php include works fine but seems to have trouble with reading white space and \n. Any thoughts?

Dylan Wijnen Over a year ago

Can you maybe take a screen shot and show what's going on i tested it today, And it worked fine. Maybe provide us what you put in your .html forms aswell

Dylan Wijnen Over a year ago

Accidently tried the code from @bistoco use his code and it will work fine :)

user5166265 · Accepted Answer · 2015-08-01 01:14:19Z

0

Instead of

 $("#addhtml").html(<?php include("html/form_number.html"); ?>);

and such, try

 $("#addhtml").html("<?php include("html/form_number.html"); ?>");

so that the html will be treated as a string.

Also make sure the form files don't have tags such as html, head, and body, and only contain the actual form.

EDIT: I just saw that @nnnnnn already stated this, gotta give credit where credit is due

answered Aug 1, 2015 at 1:14

user5166265

Comments

OLCoder71 · Accepted Answer · 2015-08-01 01:30:04Z

0

I think you might just need to change your variable "val" declaration to get your code to work. I don't think

var val = $(this).val();

will work. Based on the comparison you are making, I believe it should be:

var val = $(this).children("option:selected").text();

which will allow you to get the text value of the select element's selected option.

answered Aug 1, 2015 at 1:30

OLCoder71

12 bronze badges

Collectives™ on Stack Overflow

Using Jquery to change form based on user input

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related