选择下拉列表后填充内部html代码

时间:2018-09-05 18:01:17

标签: php jquery html ajax innerhtml

我有一个选择:

<form class="form-horizontal" method="post" >

                        <div class="form-group">
                            <label class="control-label col-sm-2">Oyunçu seçin</label>
                            <div class="col-sm-10">
                                <?php $players = select("`id`,`name`","`players`","`id`","ASC")->fetchAll(PDO::FETCH_ASSOC); ?>
                                <select id="player" name="player" class="form-control">
                                    <option value="0">--Oyunçu seçin--</option>
                                <?
                                foreach ($players as $player) {
                                    echo '<option value="'.$player['id'].'">'.$player['name'].'</option>';
                                }
                                ?>
                            </select>
                                <div id="divFileInput"></div>
                            </div>
                        </div>
                    </form>

一旦在此选择中选择了项目,就会出现新的texbox:

   $(function(){
        $('#player').change(function(){
            var selections = $("#player :selected");
            var html = '';
            $.each(selections,function(i,item){
                html += ':<div class="form-group"><label class="control-label col-sm-2">Ad</label>' +
                    '<div class="col-sm-10">' +
                    '<input type="text" id="name" name="name" class="form-control"  value="<?= $playerfetch['name'];?>" readonly>' +
                    '</div></div><div class="form-group">' +
                    '<label class="control-label col-sm-2">Kod</label>' +
                    '<div class="col-sm-10">' +
                    '<input type="text" id="code" name="code" class="form-control" readonly>' +
                    '</div></div>'+
                '<div class="form-group"><label class="control-label col-sm-2">Doğum tarixi</label>' +
                  '<div class="col-sm-10">' +
                    '<input type="text" id="birthday" name="birthday" class="form-control" readonly>' +
                    '</div></div><div class="form-group">' +
                    '<label class="control-label col-sm-2">Cins</label>' +
                    '<div class="col-sm-10">' +
                    '<input type="text" id="gender" name="gender" class="form-control" readonly>' +
                    '</div></div>' +
                '<div class="form-group"><label class="control-label col-sm-2">Məşqçi</label>' +
                '<div class="col-sm-10">' +
                '<input type="text" id="trainer" name="trainer" class="form-control" readonly>' +
                '</div></div><div class="form-group">' +
                '<label class="control-label col-sm-2">Çəki</label>' +
                '<div class="col-sm-10">' +
                '<input type="text" id="weight" name="weight" class="form-control" readonly>' +
                '</div>' +
                    '<div class="form-group">' +
                    '<div class="col-sm-offset-2 col-sm-10">'+
                    '<input type="submit" value="Əlavə et">'+
                    '</div>'+
                    '</div>'+
                    '</div>';
            })
            $('#divFileInput').html(html);
        })

现在,我想用数据库中的值填充这些texbox,但是我遇到了问题。我意识到我需要使用AJAX,因为PHP是一种服务器端语言。 我以前从未使用过AJAX,可以将js脚本进行一些修改后转换为ajax,还是需要再次编写代码,外观应该如何?

1 个答案:

答案 0 :(得分:0)

您已经在使用JQuery,因此不需要进行任何修改。看来您需要从db获取数据到脚本。您可以检查W3SCHOOLS example,但是将db数据提取到脚本中并不安全。如果将JQuery与PHP结合使用,则应将PHP用于这些目的。希望您的问题得到回答...