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?

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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.