使用php动态添加表单字段

Add form fields dynamically with php

本文关键字：表单 字段 添加 动态 php 使用      更新时间：2023-09-26

参考这篇文章。添加表单字段动态填充下拉列表与php我已经使用了他的代码，但将修改它，以适应我的需要，因为我几乎没有关于javascript。我有一切工作，除了当你按下+按钮，它永远不会创建更多的输入框。如果有任何帮助就太好了。

我的php文件

<?php
session_start();
require_once("dbconfig.php");
?>
<html>
<head>
<script type="text/javascript" src="addfish.js"></script>
</head>
<form id="form1" name="form1" method="post" action="results.php">
 <div id="itemRows">
    <select name="species">
            <option value="">Select Species</option>';
            <?php $stmt = $dbc->prepare("SELECT species FROM fish");
            $stmt->execute();
while($speciesq = $stmt->fetch(PDO::FETCH_ASSOC))
{
    echo "<option value='"" . $speciesq['species'] ."'">" . $speciesq['species'] ."</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>

</html>

addfish.js文件

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) {
        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.speciesnumber1.value+'"> Weight: <input type="text" name="speciesweight'+rowNum+'" value="'+frm.speciesweight.value+'"> <input type="button" value="-" onclick="removeRow('+rowNum+');"></p>';
        jQuery('#itemRows').append(row);
        frm.add_qty.value = '';
        frm.add_name.value = '';
    }, "json");
}
function removeRow(rnum) {
    jQuery('#rowNum'+rnum).remove();
}

这是我的getlist。php

<?php
session_start();
include("dbconfig.php");
$stmt = $dbc->prepare("SELECT species FROM fish");
$stmt->execute();
$result = array();
while ($rows = $stmt->fetch(PDO::FETCH_ASSOC)){
   $result[] = array(
    'value' => $rows['species'],
    );
}
echo json_encode($result);
?>

你的代码是使用jQuery，但我不知道你在哪里包括这个库。试着把这段代码放在include addfish.js header:

之前
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

如果你需要添加行与这些字段动态我建议你做一行，这是原来的行:

<div class="rows" data-rows="1">
    <div class="row row-first">
       <select name="row[0][select_name]">
          <option value="1">Some value</option>
       </select>
       <input type="text" name="row[0][text_name]" />
    </div>
</div>

和javascript

<script type="text/javascript">
    $('#add_row').on('click', function(){
        var row = $('.row-first').clone(); // Clone the first row
        var rows = parseInt($('.rows').attr('data-rows'));
        rows++;
        $('.rows').attr('data-rows', rows);
        row.removeClass('row-first'); // Prevent multiple rows cloning
        $(row).find('[name]').each(function(){
              var name = $(this).attr('name');
              name = name.replace(/'[[0-9+]']/, '[' + rows + ']');
              $(this).attr('name', name);
              $(this).val("").change(); // Null the select
        });
       $('.rows').append(row);
    });
</script>

因此，您要做的是克隆第一行并删除要搜索的类。增加行数并用新的行号替换行中的所有名称，例如row[0][name]变成row[1][name]，并添加行。

当你编辑行时，你必须把数据行设置为确切的数字。您可以像count($myRows)那样做。当你写删除行函数时，不要删除第一行。

希望对大家有帮助。

// You can use this 
var row = '<p id="rowNum'+rowNum+'">'+ddsel+ddopt+ddselc+'Number: <input type="text" name="speciesnumber'+rowNum+'" size="7" value="'+$($(frm).find('input[name="speciesnumber1"]')[0]).val()+'"> Weight: <input type="text" name="speciesweight'+rowNum+'" value="'+$($(frm).find('input[name="speciesnumber1"]')[0]).val()+'"> <input type="button" value="-" onclick="removeRow('+rowNum+');"></p>';
            jQuery('#itemRows').append(row);
相关文章：