Блог

У меня есть форма с двумя списками со списком.2-й выпадающий список изначально содержит параметры с пустым значением.Значения для 2-го выпадающего списка добавляются динамически в соответствии со значением 1-го выпадающего списка с помощью php-скрипта в другом файле, который вычисляет значения для 2-го из базы данных. Я использовал метод innerhtml для замены выпадающего списка на html в php. Теперь загрузочный валидатор не распознает изменение значения второго выпадающего списка при выборе.Предполагается, что значение 2-го значения является пустым. Как заставить его сканировать снова после добавления значений?

 <!--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 amp;amp; 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>
  

Определять и использовать пользовательский обработчик ajax излишне, поскольку вы используете jQuery.

давайте попробуем так,

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

поскольку вы подключаете элемент управления формой «на лету», валидатор не знает о новом элементе. Вам нужно снова вызвать валидатор, чтобы сообщить, что вы добавили несколько новых элементов для проверки.