我有一个带有两个组合框的表单。第二个组合框最初带有空值选项。第二个组合框的值是通过另一个文件中的 php 脚本根据第一个组合框的值动态添加的,该脚本计算第二个组合框的值D b。 我使用innerhtml方法将组合框替换为php中的html。 现在, Bootstrap 验证器在选择第二个组合框时无法识别第二个组合框值的变化。它假设第二个组合框的值为空。 如何让它在添加值后再次扫描?
<!--main.html-->
<div class="form-group">
<label class="col-md-3 control-label">Degree Type</label>
<div class="col-md-6">
<select name="dtype" onChange="display(this.value)" class="form-control">
<option value="" selected="selected">-- Select Type --</option>
<option value="UG">UG</option>
<option value="PG">PG</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Name of the Department</label>
<div class="col-md-6">
<div id="show_dept">
<select name="dept" class="form-control">
<option value="" selected="selected">-- Select Dept --</option>
</select>
</div>
</div>
</div>
<!--Validation-->
<script type="text/javascript">
$(document).ready(function() {
$('#tryitForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh',
submitHandler: function(validator, form, submitButton) {
// Use Ajax to submit form data
$.post(form.attr('action'), form.serialize(), function(result) {
// ... process the result ...
}, 'json');
}
},
fields: {
dept: {
validators: {
notEmpty: {
message: 'The Department cannot be empty'
}
}
}
});
});
</script>
<!--Ajax-->
<script type="text/javascript">
// JavaScript Document
var XMLHttpRequestObject = false;
function display(dept_type) {
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttpRequestObject.onreadystatechange = function() {
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
document.getElementById("show_dept").innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.open("GET", "get_dept.php?dept_type=" + dept_type, true);
XMLHttpRequestObject.send();
}
</script>
<!--get_dept.php-->
<?php
$con=mysql_connect( 'localhost', 'root', '') or die( 'Mysql not connected');
mysql_select_db( 'db',$con) or die( 'DataBase not connected');
$dtype=$_REQUEST[ 'dept_type'];
$query="select * from dept_mast where Deg_Type='$dtype'" ;
?>
<select name="dept" class="form-control">
<option value="" selected="selected">-- Select Dept --</option>
<?php
$query_result=mysql_query($query)or mysql_error();
while($row=mysql_fetch_array($query_result)) { ?>
<option value="<?php echo $row[ 'Dept_Name']; ?>">
<?php echo $row[ 'Dept_Name']; ?>
</option>
<?php }
?>
</select>
最佳答案
由于您使用的是 jQuery,因此定义和使用自定义 ajax 处理程序是多余的。
我们试试这个方法
<script type="text/javascript">
function validate() {
$('#tryitForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh',
submitHandler: function (validator, form, submitButton) {
// Use Ajax to submit form data
$.post(form.attr('action'), form.serialize(), function (result) {
// ... process the result ...
}, 'json');
}
},
fields: {
dept: {
validators: {
notEmpty: {
message: 'The Department cannot be empty'
}
}
}
});
});
}
$(document).ready(function () {
validate();
});
function display(dept_type) {
$.get('get_dept.php', {
dept_type: dept_type
}, function (response) {
$("#show_dept").empty().html(response);
validate();
});
}
</script>
由于您是动态附加表单控件,因此验证器不知道新元素。您需要再次调用验证器来告知您已添加一些新元素进行验证。
关于javascript - 对动态添加的组合框进行 Bootstrap 验证器验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24472770/