Javascript按递增顺序添加新的输入字段

Javascript按递增顺序添加新的输入字段,javascript,php,jquery,html,Javascript,Php,Jquery,Html,我无法让javascript向getElementById添加变量。我所做的是允许用户在每篇文章中有10位作者。脚本显示了作者已经在系统中输入,现在我尝试允许他们添加更多的输入字段,只显示10个字段。以下是我目前掌握的代码: $y=1; //GET EXISTING AUTHORS FOR POST while ($getauthorsrow=$getauthorssql->fetch()) { $showauthor = $getauthorsrow['author'];

我无法让javascript向getElementById添加变量。我所做的是允许用户在每篇文章中有10位作者。脚本显示了作者已经在系统中输入,现在我尝试允许他们添加更多的输入字段,只显示10个字段。以下是我目前掌握的代码:

$y=1;
//GET EXISTING AUTHORS FOR POST
while ($getauthorsrow=$getauthorssql->fetch()) {
    $showauthor = $getauthorsrow['author'];
    $authorid = $getauthorsrow['ID'];
    echo "<input type='text' value='$showauthor' name='authorname[]'>
    <input type='hidden' value='$authorid' name='authorid[]'><br><br>";
    $y++;
}
$newy=$y-1;
?>

//SCRIPT TO ADD NEW FIELD ONLY TO THE POINT OF 10
<script language="javascript">
fields = <?php echo $newy; ?>;
    function addInput<?php echo $i; ?>() {
    if (fields != 10) {

        //HERE I'M TELLING IT TO GET text + $i (which is post number) + fields variable
        //So if it's the first post and the new field divs start a 5
        //Then it should getElementByid('text05') and continue on.

        document.getElementById('text<?php echo $i; ?>' + fields).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
        fields += 1;
    } else {
        document.getElementById('text<?php echo $i; ?>' + fields).innerHTML += "<br />Only 10 authors allowed.";
        document.ajaxform<?php echo $i; ?>.add<?php echo $i; ?>.disabled=true;
    }
}
</script>

//HERE I'M ADDING THE NEW DIVS FOR TEXT FIELDS AND STARTING
//THEM AT WHATEVER NUMBER POST $i IT IS AND WHATEVER THE $w is.
//SO IN THE EXAMPLE IN THE JAVASCRIPT IT'D SAY id='text05'
//THIS WORKS JUST FINE
<?php
$w=$newy;
while ($w<=10) {
    echo "<div id='text".$i.$w."'></div>";
    $w++;;
}

//ECHO THE ADD AUTHOR BUTTON
echo "
<input type='button' onclick='addInput$i()' name='add$i' value='Add Author'><br>
<input type='hidden' name='count' value='$newy'>
<input type='hidden' name='id' value='$fileid'>
<input type='submit'>
</form>
";
?>
$y=1;
//获取文章的现有作者
而($getauthorsrow=$getauthorssql->fetch()){
$showauthor=$getauthorsrow['author'];
$authorid=$getauthorsrow['ID'];
回声“


“; $y++; } $newy=$y-1; ?> //脚本仅将新字段添加到10点 字段=; 函数addInput(){ 如果(字段!=10){ //这里我告诉它获取text+$I(这是post number)+字段变量 //所以如果是第一篇文章,新的现场主管开始5分 //然后它应该获取elementbyid('text05')并继续。 document.getElementById('text'+字段).innerHTML+=“

”; 字段+=1; }否则{ document.getElementById('text'+字段)。innerHTML+=“
只允许10位作者。”; document.ajaxform.add.disabled=true; } } //在这里,我为文本字段添加新的div并开始 //无论$i是什么数字,也不管$w是什么。 //因此,在JAVASCRIPT的示例中,它会说id='text05' //这个很好用
尝试先将连接的字符串分配给JS变量,然后调用函数:

if (fields != 10) {

    var currentText = 'text<?php echo $i; ?>' + fields;
    document.getElementById(currentText).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
    fields += 1;
} else {
    document.getElementById(currentText).innerHTML += "<br />Only 10 authors allowed.";
    document.ajaxform<?php echo $i; ?>.add<?php echo $i; ?>.disabled=true;
}
if(字段!=10){
var currentText='text'+字段;
document.getElementById(currentText).innerHTML+=“

”; 字段+=1; }否则{ document.getElementById(currentText).innerHTML+=“
只允许10位作者。”; document.ajaxform.add.disabled=true; }
我需要将$I添加到javascript中的字段变量中。使用多个文件时,它会对同一个变量执行多次操作…我可以工作。

您好,我已经修改了您的html和JavaScript代码

<form id="ajaxform0">
<input type="text" value="Logan" name="authorname[]">
    <input type="hidden" value="121" name="authorid[]"><br><br><input type="text" value="Matt" name="authorname[]">
    <input type="hidden" value="122" name="authorid[]"><br><br><input type="text" value="Chad" name="authorname[]">
    <input type="hidden" value="123" name="authorid[]"><br><br><input type="text" value="hey" name="authorname[]">
    <input type="hidden" value="128" name="authorid[]"><br><br><input type="text" value="jordan" name="authorname[]">
    <input type="hidden" value="129" name="authorid[]"><br><br>
<script language="javascript">
fields = 5;
    function addInput0() {
    if (fields != 10) {
        var currentText = 'text0' + fields;
        document.getElementById(currentText).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
        fields += 1;
    } else {
        var myout = "Only 10 authors allowed.";
        document.getElementById("stat").innerHTML = myout;
    }
}
</script>

<div id="text05"></div><div id="text06"></div><div id="text07"></div><div id="text08"></div><div id="text09"></div><div id="text010"></div><div id="stat"></div>
<input type="button" onclick="addInput0()" name="add0" value="Add Author"><br>
<input type="hidden" name="count" value="5">
<input type="hidden" name="id" value="45">
<input type="submit">











字段=5; 函数addInput0(){ 如果(字段!=10){ var currentText='text0'+字段; document.getElementById(currentText).innerHTML+=“

”; 字段+=1; }否则{ var myout=“仅允许10位作者。”; document.getElementById(“stat”).innerHTML=myout; } }


检查并告诉我问题是否解决。

我仍然收到此错误(相同错误):未捕获类型错误:无法读取Null的属性“innerHTML”您确定您的div是用正确的名称和格式正确的名称打印出来的吗?你能发布一个HTML输出的示例吗?我刚刚将你的HTML粘贴到一个文件中,它对我来说工作得完美无缺。它添加字段,直到达到10,然后停止。
<form id="ajaxform0">
<input type="text" value="Logan" name="authorname[]">
    <input type="hidden" value="121" name="authorid[]"><br><br><input type="text" value="Matt" name="authorname[]">
    <input type="hidden" value="122" name="authorid[]"><br><br><input type="text" value="Chad" name="authorname[]">
    <input type="hidden" value="123" name="authorid[]"><br><br><input type="text" value="hey" name="authorname[]">
    <input type="hidden" value="128" name="authorid[]"><br><br><input type="text" value="jordan" name="authorname[]">
    <input type="hidden" value="129" name="authorid[]"><br><br>
<script language="javascript">
fields = 5;
    function addInput0() {
    if (fields != 10) {
        var currentText = 'text0' + fields;
        document.getElementById(currentText).innerHTML += "<center><input type='text' name='newauthorname[]'></center><br /><br />";
        fields += 1;
    } else {
        var myout = "Only 10 authors allowed.";
        document.getElementById("stat").innerHTML = myout;
    }
}
</script>

<div id="text05"></div><div id="text06"></div><div id="text07"></div><div id="text08"></div><div id="text09"></div><div id="text010"></div><div id="stat"></div>
<input type="button" onclick="addInput0()" name="add0" value="Add Author"><br>
<input type="hidden" name="count" value="5">
<input type="hidden" name="id" value="45">
<input type="submit">