JavaScriptを使用して作成された動的フォーム要素をPOSTできません

JavaScriptを使用して追加されたダイナミックフォーム要素をPOSTしようとしていますが、実行できません。要素を追加すると要素が表示されますが、test.phpページには何も表示されません。JavaScriptを使用して作成された動的フォーム要素をPOSTできません

私は問題を理解しようとしていましたが、無駄でした。私も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>"; 
} 

} 

?>

出典

2011-11-13 user1044209

あなたは彼らにvalue属性とid属性が割り当てられているように見えますが、あなたは彼らに、ブラウザがそれらを送信するために必要となるname属性を与えられていませんPHPで表示されるように、$_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');

出典

2011-11-13 13:57:27

ありがとうございました！ – user1044209

@ user1044209 Stack Overflowをお手伝いしますように。あなたが答えに満足しているなら、それの横にあるチェックマークをクリックして、それを合格とマークしてください。 –

一部のブラウザ（* Cough * IE）は、 'setAttribute'を介して"重要な "プロパティを割り当てるときに問題を引き起こします。そのためには、 'element1.name = 'somename1'を使用してください。 element2.name = 'somename2'; '代わりに。また、IE7では（おそらく8も覚えていないかもしれませんが）ボタン内部のHTMLは渡され、その値は渡されません。 –

JavaScriptを使用して作成された動的フォーム要素をPOSTできません

答えて

関連する問題