Fatal编程技术网
  • javascript/
  • Javascript 使用php动态添加表单字段

Javascript 使用php动态添加表单字段

javascript php jquery

Javascript 使用php动态添加表单字段,javascript,php,jquery,Javascript,Php,Jquery,指的是这个帖子。我已经使用了他的代码，但将根据我的需要对其进行修改，因为我对javascript几乎一无所知。我有一切工作，除了当你按下+按钮，它永远不会创建更多的输入框。任何帮助都会很好 这是我的php文件 <?php session_start(); require_once("dbconfig.php"); ?> <html> <head> <script type="text/javascript" src="addfish.js"><

指的是这个帖子。我已经使用了他的代码，但将根据我的需要对其进行修改，因为我对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();
}

var rowNum=0；

var ddsel='您的代码正在使用jQuery，但我看不出您在哪里包含这个库。尝试将此代码放在标题中包含addfish.js之前：


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




$（“#添加_行”）。在（'click'，function（）上{
var row=$（'.row first'）.clone（）；//克隆第一行
var rows=parseInt（$（'.rows'）.attr（'data-rows'））；
行++；
$（'.rows'）.attr（'data-rows'，rows）；
row.removeClass（'row-first'）；//防止多行克隆
$（行）。查找（“[name]”）。每个（函数（）{
var name=$（this.attr（'name'）；
name=name.replace（/\[[0-9+]\]/，'['+行+']'）；
$（this.attr（'name'，name）；
$（this.val（“”.change（）；//将选择
});
$（'.rows'）。追加（row）；
});


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

此外，在编辑行时，必须将数据行设置为精确的数字。你可以像计数（$myRows）那样做。在编写remove row函数时，不要删除第一行

希望它能帮助你。
//你可以用这个

// 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);


var row='
'+ddsel+ddopt+ddselc+'Number:Weight:
'；
jQuery（'#itemRows'）.append（row）；

尝试打开浏览器的开发者工具，并查看JavaScript控制台。您将在那里找到许多调试信息。如果他们帮不了你，试着把他们贴出来。这将对我们有很大帮助。Javascript控制台说这个未捕获的类型错误：无法读取未定义addfish.js:13（匿名函数）addfish.js:13 j jquery.min.js:2 k.fireWith jquery.min.js:2 x jquery.min.js:4 bOK的属性'value'，我发现它的值=“+frm.speciesweeght.value+”，名称错误应该是value=“+frm.speciesweet1.value+”感谢您的评论，请始终在开发人员工具中查找。它们为您提供了有用的信息，就像提示“speciesweeght”没有属性“value”一样。阅读调试信息在开始时有点混乱，但它对您有很大帮助！是的，谢谢你，丹尼尔。在这方面还是新手，不知道javascript控制台。谢谢你指给我看！

// 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);