Question

我是jQuery的新手，无法完全理解它。我只是从我的php文件中复制了此代码并将其放在那里。

这是我在php中的代码：

        <div class="form-row" id="dynamic_field">
            <div class="input-group">
                <input type="text" class="form-control" name="lname" placeholder ="Last Name" required>
                <input type="text" class="form-control" name="fname" placeholder ="First Name" required>
                <input type="text" class="form-control" name="mname" placeholder ="Middle Name">
                <select class="form-control" name="gender" required>
                    <option value="">Gender</option>
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
                <br>
                &nbsp;Semester Started:
                <select class="form-control" name="semenrolled1" required>
                    <option>Select Semester</option>
                    <?php
                        $query5 = "select distinct(term_name) from term";
                        $rsf5 = mysql_query($query5);
                        while($row5 = mysql_fetch_array($rsf5)){
                    ?>
                    <option>
                        <?php 
                            if($row5['term_name']!=' '){
                                echo $row5['term_name'];
                            } 
                        ?>
                    </option>
                    <?php
                        }
                    ?>
                </select>
                <input type="text" class="form-control" name="acadyear1" placeholder ="Acad Year" required>
                <span class="input-group-addon">
                    <button type="button" name="dynamic_add" id="dynamic_add" class="btn btn-primary btn-save" style="background-color:#0066ff;" >
                            <span class="glyphicon glyphicon-plus" ></span>
                    </button>
                </span>
            </div>
        </div>

这是我用于动态输入字段的代码：

    $(document).ready(function(){
        var i = 1;
        $('#dynamic_add').click(function(){
            i++;
            $('#dynamic_field').append('<div class="form-row" id="row'+i+'"><div class="input-group"><input type="text" class="form-control" name="lname" placeholder ="Last Name" required><input type="text" class="form-control" name="fname" placeholder ="First Name" required><input type="text" class="form-control" name="mname" placeholder ="Middle Name"><select class="form-control" name="gender" required><option value="">Gender</option><option value="Male">Male</option><option value="Female">Female</option></select><br>&nbsp;Semester Started:<select class="form-control" name="semenrolled1" required><option>Select Semester</option><?php$query5 = "select distinct(term_name) from term";$rsf5 = mysql_query($query5);while($row5 = mysql_fetch_array($rsf5)){?><option><?php if($row5['term_name']!=' '){echo $row5['term_name'];} ?></option><?php}?></select><input type="text" class="form-control" name="acadyear1" placeholder ="Acad Year" required><span class="input-group-addon"><button name="remove" id="'+i+'" class="btn btn-danger btn_remove"><span class="glyphicon glyphicon-plus" ></span></button></span></div></div>');
        });

        $(document).on('click','.btn_remove', function(){
            var button_id = $(this).attr("id");
            $("#row"+button_id+"").remove();
        });
    });

该错误显示“解析错误”，我不知道该怎么办。

Answer 1

由于多种原因，您的问题发生了。

字符串之间没有正确的串联。
PHP中的语法不正确，例如<?php$query5。始终在PHP开始标记后提供一个空格，例如<?php $query5。
尽管单行代码有时看起来不错，但始终尝试着眼于代码的可读性并编写耗时（良好），简洁明了的代码。

使用以下代码。

$(document).ready(function(){
        var i = 1;
        $('#dynamic_add').click(function(){
            i++;
            let terms = "<?php 
                $query5 = "select distinct(term_name) from term";
                $rsf5 = mysql_query($query5); 
                while($row5 = mysql_fetch_array($rsf5)){
                    echo '<option>';
                    if($row5['term_name'] != ''){ echo $row5['term_name']; }
                    echo '</option>';
                } 
            ?>";
            let fields = '<div class="form-row" id="row'+ i +'">'
                +'<div class="input-group">'
                +'<input type="text" class="form-control" name="lname" placeholder ="Last Name" required>'
                +'<input type="text" class="form-control" name="fname" placeholder ="First Name" required>'
                +'<input type="text" class="form-control" name="mname" placeholder ="Middle Name">'
                +'<select class="form-control" name="gender" required>'
                    +'<option value="">Gender</option><option value="Male">Male</option>'
                    +'<option value="Female">Female</option>'
                +'</select>'
                +'<br>&nbsp;Semester Started:'
                +'<select class="form-control" name="semenrolled1" required>'
                    +'<option>Select Semester</option>'
                    +terms
                +'</select>'
                +'<input type="text" class="form-control" name="acadyear1" placeholder ="Acad Year" required>'
                +'<span class="input-group-addon"><button name="remove" id="'+i+'" class="btn btn-danger btn_remove">'
                +'<span class="glyphicon glyphicon-plus" ></span>'
                +'</button></span>'
                +'</div>'
                +'</div>';

            $('#dynamic_field').append(fields);
        });

        $(document).on('click', '.btn_remove', function(){
            var button_id = $(this).attr("id");
            $("#row"+button_id+"").remove();
        });
    });

如何修复包含动态输入字段的代码？

1 个答案: