添加表单域动态填充下拉列表用PHP [英] Add form fields dynamically populated dropdown list with php

问题描述

我试图让3表单字段（下拉列表中动态填充用的.php脚本和2的文本字段），也有一个按钮来添加3个和3个等（如用户点击按钮）我尝试了多种方法，但似乎没有为我工作。 （我是小白的JS，AJAX，jQuery的，所以我大多试过我已经在互联网上找到脚本）。 下面是这些表单字段的code：

I'm trying to make 3 form fields (a dropdown list dynamically populated by a .php script and 2 text fields) and also with a button add 3 more and 3 more and so on (as user clicks the button) I have tried several ways but nothing seems to work for me. (I'm noob in JS, AJAX, jQuery so I mostly tried scripts I've found on the internet). Here's the code of these form fields:

<form id="form1" name="form1" method="post" action="results.php">
 <div id="itemRows">
    <select name="species">
            <option value="">Select Species</option>';
            <?php $sql = "SELECT common FROM species";
            $speciesq = mysqli_query($con, $sql);

while($row = mysqli_fetch_array($speciesq))
{
    echo "<option value=\"" . $row['common'] ."\">" . $row['common'] ."</option>";
}
?> 
</select>
    Number: <input type="text" name="speciesnumber1" size="7" /> Weight: <input type="text" name="speciesweight1" /> <input onClick="addRow(this.form);" type="button" value="+" />     
    </div></form>

和这种形式后，还有的code：

and after this form there's the code:

<script type="text/javascript">
var rowNum = 0;
var ddsel = '<select name="species'+rowNum+'>';
var ddopt = '<option value="">Select Species</option>';
var ddselc= '</select>';
function addRow(frm) {
    rowNum ++;
    $.post("getlist.php", function(data) {
        for (var i=0; i<data.length; i++) {
            ddopt += '<option value="'+data[i].value+'">'+data[i].value+'</option>';
        } 
    }, "json");
    var row = '<p id="rowNum'+rowNum+'">'+ddsel+ddopt+ddselc+'Number: <input type="text" name="speciesnumber'+rowNum+'" size="7" value="'+frm.add_qty.value+'"> Weight: <input type="text" name="speciesweight'+rowNum+'" value="'+frm.add_name.value+'"> <input type="button" value="-" onclick="removeRow('+rowNum+');"></p>';
    jQuery('#itemRows').append(row);
    frm.add_qty.value = '';
    frm.add_name.value = '';
}

function removeRow(rnum) {
    jQuery('#rowNum'+rnum).remove();
}
</script>

getlist.php是一个简单的脚本，填充的下拉列表，并发送数据：

getlist.php is a simple script that populates the dropdown list and sends the data:

<?php
include("dbcon.php");
$sql = mysqli_query ($con, "SELECT common FROM species");
$result = array();
while ($row = mysqli_fetch_array($sql)){
    $result[] = array(
    'value' => $row['common'],
    );
}
echo json_encode($result);
?>

所以，当我点击+按钮（添加行）没有任何反应。

So when I click the "+" button (to add the row) nothing happens.

推荐答案

您只是有一些code。在错误的地方：

You just have some code in the wrong spot:

var row = '<p id="rowNum'+rowNum+'">'+ddsel+ddopt+ddselc+'Number: <input type="text" name="speciesnumber'+rowNum+'" size="7" value="'+frm.add_qty.value+'"> Weight: <input type="text" name="speciesweight'+rowNum+'" value="'+frm.add_name.value+'"> <input type="button" value="-" onclick="removeRow('+rowNum+');"></p>';
jQuery('#itemRows').append(row);
frm.add_qty.value = '';
frm.add_name.value = '';

需要转移到后返回功能是这样的：

needs to be moved into the post return function like this:

function addRow(frm) {
    rowNum ++;
    $.post("getlist.php", function(data) {
        var frm = document.getElementById('form1');
        for (var i=0; i<data.length; i++) {
            ddopt += '<option value="'+data[i].value+'">'+data[i].value+'</option>';
        } 
        var row = '<p id="rowNum'+rowNum+'">'+ddsel+ddopt+ddselc+'Number: <input type="text" name="speciesnumber'+rowNum+'" size="7" value="'+frm.add_qty.value+'"> Weight: <input type="text" name="speciesweight'+rowNum+'" value="'+frm.add_name.value+'"> <input type="button" value="-" onclick="removeRow('+rowNum+');"></p>';
        jQuery('#itemRows').append(row);
        frm.add_qty.value = '';
        frm.add_name.value = '';
    }, "json");
}

这篇关于添加表单域动态填充下拉列表用PHP的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！