无法发布使用javascript创建的动态表单元素_Javascript_Forms

无法发布使用javascript创建的动态表单元素

javascript forms

无法发布使用javascript创建的动态表单元素,javascript,forms,Javascript,Forms,我试图发布使用javascript添加的动态表单元素，但无法做到这一点。当我添加这些元素时，它们会显示出来，但在test.php页面上看不到任何内容我一直在努力想办法解决这个问题，但徒劳无功。我还使用Firebug检查DOM元素，但它看起来很好。请帮忙这是我的密码： <html> <head> <script type="text/javascript"> function add() { //Create an input type dynamica

我试图发布使用javascript添加的动态表单元素，但无法做到这一点。当我添加这些元素时，它们会显示出来，但在test.php页面上看不到任何内容

我一直在努力想办法解决这个问题，但徒劳无功。我还使用Firebug检查DOM元素，但它看起来很好。请帮忙

这是我的密码：

<html>
<head>
<script type="text/javascript">

function add() {

//Create an input type dynamically.
var element1 = document.createElement("input");
var element2 = document.createElement("input");
var newdiv = document.createElement("button");
var space = document.createElement("div");
//Assign different attributes to the element.

element1.setAttribute("type", "text");
element2.setAttribute("type", "text");
//newdiv.setAttribute("type", "button");
//element.setAttribute("value", type);
//element.setAttribute("name", type);
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;

var area = document.getElementById('area');

var divIdName1 = 'name'+num;
var divIdName2 = 'amount'+num;
var divIdName3 = 'button'+num;

element1.setAttribute('id',divIdName1);
element2.setAttribute('id',divIdName2);
newdiv.setAttribute('id',divIdName3);

element1.setAttribute('value',divIdName1);
element2.setAttribute('value',divIdName2);
newdiv.setAttribute('value','harsh');

//  element2.setAttribute('id', );

//Append the element in page (in span).
space.innerHTML='<br />';
newdiv.onclick =  function() {
//document.write(divIdName1);
var olddiv = document.getElementById(divIdName1);
area.removeChild(olddiv);
olddiv = document.getElementById(divIdName2);
area.removeChild(olddiv);
olddiv = document.getElementById(divIdName3);
area.removeChild(olddiv);
area.removeChild(space);
}



area.appendChild(element1);
area.appendChild(element2);
area.appendChild(newdiv);
area.appendChild(space);
}
</script>
</head>
<body>
<form id="frmMain" name="frmMain" method=get action=test.php>

    <input type="hidden" value="0" id="theValue" />
        <div id="area">
            <input type="button" value="+" onclick="add()"/>
            <br />
            <br />
       </div> 
       <input type=submit value=submit>
</form>
</body>
</html>


PHP code : test.php

<?
echo "<h1>Form posted with Ajax</h1>";
echo "<h4>POST variables</h4>";
print_r($_POST);
foreach($_POST as $key=>$value){
echo "yes";
if(is_array($value)){       
    for($no=0;$no<count($value);$no++){
        echo "<b>".$key."[$no]</b>: ".$value[$no]."<br>";   
    }
}else{
    echo "<b>".$key."</b>: ".$value."<br>";
}


}

echo "<h4>GET variables:</h4>";
foreach($_GET as $key=>$value){
if(is_array($value)){       
    for($no=0;$no<count($value);$no++){
        echo "<b>".$key."[$no]</b>: ".$value[$no]."<br>";   
    }
}else{
    echo "<b>".$key."</b>: ".$value."<br>";
}

}

?>


函数add（）{
//动态创建输入类型。
var element1=document.createElement（“输入”）；
var element2=document.createElement（“输入”）；
var newdiv=document.createElement（“按钮”）；
var space=document.createElement（“div”）；
//为元素指定不同的属性。
element1.setAttribute（“类型”、“文本”）；
element2.setAttribute（“类型”、“文本”）；
//setAttribute（“类型”、“按钮”）；
//setAttribute（“值”，类型）；
//setAttribute（“名称”，类型）；
var numi=document.getElementById（'theValue'）；
var num=（document.getElementById（'theValue'）。value-1）+2；
numi.value=num；
var area=document.getElementById（'area'）；
var divIdName1='name'+num；
var divIdName2='amount'+num；
var divIdName3='按钮'+num；
element1.setAttribute（'id'，divIdName1）；
element2.setAttribute（'id'，divIdName2）；
newdiv.setAttribute（'id'，divIdName3）；
element1.setAttribute（'value'，divIdName1）；
element2.setAttribute（'value'，divIdName2）；
setAttribute（'value'，'harsh'）；
//element2.setAttribute（'id'，）；
//在页面中追加元素（在span中）。
space.innerHTML='
'；
newdiv.onclick=函数（）{
//文件。编写（divIdName1）；
var olddiv=document.getElementById（divIdName1）；
地区.搬迁儿童（旧分区）；
olddiv=document.getElementById（divIdName2）；
地区.搬迁儿童（旧分区）；
olddiv=document.getElementById（divIdName3）；
地区.搬迁儿童（旧分区）；
区域。移除儿童（空间）；
}
面积.附件（要素1）；
面积.附件（要素2）；
地区.儿童（新分区）；
面积.子（空间）；
}




PHP代码：test.PHP

看起来您已经为它们分配了

值

属性和

id

属性，但是您没有为它们分配

名称

属性，浏览器需要这些属性才能发送它们，以便它们在PHP中显示在

$\u POST

：

// id attrs
element1.setAttribute('id',divIdName1);
element2.setAttribute('id',divIdName2);
newdiv.setAttribute('id',divIdName3);

//  Value attrs
element1.setAttribute('value',divIdName1);
element2.setAttribute('value',divIdName2);
newdiv.setAttribute('value','harsh');

// Don't forget name attrs
element1.setAttribute('name','somename1');
element2.setAttribute('name','somename2');
newdiv.setAttribute('name','someval');

@user1044209乐于帮助，欢迎使用堆栈溢出。如果您对答案感到满意，请单击旁边的复选标记将其标记为已接受。某些浏览器（IE）在通过

setAttribute

分配“重要”属性时会导致问题。为了方便起见，请使用

element1.name='somename1'；element2.name='somename2'取而代之。同样值得一提的是，在IE7中（可能8也不记得了），按钮内部的HTML将被传递，而不是它的值。