使用Jquery根据用户输入更改表单

Question

我有一个带有选择标签的表格。 我需要根据用户的选择来更改表单。 我相信，最简单的方法是使用JQuery。 这是我的代码：

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

注意：php while语句仅设置ID为1,2和3的当前三个选项“数字”，“符号”或“字母”

当我更改类别时，它不会触发jquery.change（），我想在不使用addhtml div的情况下对表单进行编码，但愿意在需要时使用它。

问题：是因为我正在使用php设置选择选项的值而未触发更改功能？ 如果可以，我该如何解决？ 如果不是，为什么不触发它？ 如何完成不使用addhtml div的目标？ 有没有更好的方法来实现我的目标？
提前致谢。

编辑：最初问题的答案：正如bistoco所说，php是由服务器预先编译并以html形式发送的，因此问题不是来自使用php设置select标记的值。

我现在确定这是由于我的php include文件的内容。 如果我的文件很简单，我确定它会注册change事件并加载内容，就像这样：

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

但是如果我添加任何空格或\\n字符以提高可读性，例如：

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

它不仅不起作用，而且还完全跳过更改事件。

新问题：jQuery HTML函数是否包含会导致其失败的非法字符列表？ 为什么当我不喜欢我的php include文件的内容时，甚至没有注册更改功能？

Answer 1

您必须了解的第一件事是php在服务器上运行，所有输出均呈现为html代码并发送到浏览器，并且在那里不可用。

也就是说，您至少有2个选择：

1.-回显所有表格选项，每个选项都在div中，您可以根据所选选项隐藏/显示。

<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.-使用模板系统或使用Ajax加载部分html片段。

Answer 2

PHP是一个预处理程序，因此以后再添加到网站中是没有用的。 只需通过设置其html或将.prepend（）或.append（）与表单元素一起使用来创建表单。

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

并在jQuery中

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

要么

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

编辑：错误地看了你的代码

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

认为那不行。

Answer 3

代替

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

这样，尝试

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

以便将html视为字符串。

还要确保表单文件没有html，head和body之类的标签，而只包含实际的表单。

编辑：我刚刚看到@nnnnnn已经说过了，要在应归还贷项的地方给予信用

Answer 4

我认为您可能只需要更改变量“ val”声明即可使代码正常工作。 我不认为

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

将工作。 根据您进行的比较，我认为应该是：

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

这将允许您获取选择元素的选定选项的文本值。