简体   繁体   English

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

[英]Unable to POST dynamic form elements created using javascript

I am trying to POST dynamic form elements added using javascript but unable to do so. 我正在尝试发布使用javascript添加的动态表单元素,但无法这样做。 The elements are being shown when I add them but don't see anything on the test.php page. 当我添加元素时会显示这些元素,但在test.php页面上什么都看不到。

I have been trying to figure out the issue but in vain. 我一直试图找出问题,但徒劳无功。 I also used Firebug to inspect the DOM elements but it looked fine. 我还使用Firebug来检查DOM元素,但看起来还不错。 Please help 请帮忙

Here is my code: 这是我的代码:

<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>";
}

}

?>

It looks like you have assigned them value attributes and id attributes, but you have not given them name attributes, which the browser will need in order to send them so that they appear in PHP in $_POST : 看起来您已经给它们分配了value属性和id属性,但没有给它们提供name属性,浏览器将它们发送给它们时将需要它们,以便它们出现在$_POST中的PHP中:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM