使用Javascript動態創建表單

我試着寫一個函數，該函數從用戶接收關於要在表單中創建多少個字段的輸入。然後該函數創建一個包含數字（等同於用戶輸入）文本框和一個提交按鈕的表單。我寫了函數，但它似乎沒有工作，我哪裏出錯了。如果有人能幫助我，我將不勝感激。我的代碼：使用Javascript動態創建表單

function createTextBox() 
    { 
     var box=document.getElementById('pop');        //getting the ID of the containner 
     var val=document.getElementById('uValue').value;     //getting the Input value from the user 

     var candidateForm=document.createElement('form');     //Creating a form and giving the attributes 
     candidateForm.name="candidateForm"; 
     candidateForm.method="post"; 
     candidateFomr.action="process.php"; 

     for(var i=0; i<val;i++) 
     { 
      var newTextbox = document.createElement('input');    //creating the textboxes according to the users input 
      newTextbox.type="textbox"; 
      newTextbox.name="candidate[]"; 
      newTextbox.id="candidateId"; 

      candidateForm.appendChild(newTextbox);       //putting the created textboxes in the form 

     } 

     var saveButton=document.createElement('input');      //creating the submit button which when clicked will save the value written in the textboxes 
     saveButton.type="submit"; 
     saveButton.name="submitButton"; 
     saveButton.value="Enter"; 
     candidateForm.appendChild(saveButton);        //putting the submit button in the form 

     box.appendChild(candiateForm);          //And putting the form in the containner. 

     //alert (val); 
    }

這裏是HTML部分提前

<body> 
<input type="textbox" name="value_box" id="uValue" ></input> 
<input type="button" onclick="javascript:createTextBox()" value="Click"></input> 
<div id="pop"></div> 
</body>

感謝：d

來源

2012-07-22 Chakra

當我運行它，它不工作，我不知道爲什麼它不工作。 :( – Chakra 2012-07-22 17:40:45

**如何**它不工作？會發生什麼？ – SLaks 2012-07-22 17:41:02

你確定val是一個數字嗎？也許它是一個像「5」而不是5的字符串。嘗試var val = + document.getElementById（'uValue' ）.value – Azder 2012-07-22 17:42:04

要與input類型開始是獨立的標籤。

你的HTML改爲

<input type="textbox" name="value_box" id="uValue" /> 
<input type="button" onclick="javascript:createTextBox()" value="Click"/> 
<div id="pop"></div>

還修改了JS

function createTextBox() 
    { 
     var box=document.getElementById('pop');        //getting the ID of the containner 
     var val=document.getElementById('uValue').value;     //getting the Input value from the user 

     var candidateForm=document.createElement('form');     //Creating a form and giving the attributes 
     candidateForm.name="candidateForm"; 
     candidateForm.method="post"; 
     candidateFomr.action="process.php"; 

     for(var i=0; i<val;i++) 
     { 
      var newTextbox = document.createElement('input');    //creating the textboxes according to the users input 
      newTextbox.type="textbox"; 
      newTextbox.name="candidate[]"; 
      newTextbox.id="candidateId"; 

      candidateForm.appendChild(newTextbox);       //putting the created textboxes in the form 

     } 

     var saveButton=document.createElement('input');      //creating the submit button which when clicked will save the value written in the textboxes 
     saveButton.type="submit"; 
     saveButton.name="submitButton"; 
     saveButton.value="Enter"; 
     candidateForm.appendChild(saveButton);        //putting the submit button in the form 

     box.appendChild(candiateForm);          //And putting the form in the containner. 

     //alert (val); 
    }

來源

2012-07-22 17:57:58

JavaScript工作完全正常...它只是兩個TYPO那裏.. – Chakra 2012-07-22 18:11:39

ne方式感謝您的努力兄弟..：D – Chakra 2012-07-22 18:14:57

你在你的代碼的兩個錯別字。這：

candidateFomr.action="process.php";

應該是這樣的：

candidateForm.action="process.php";

這：

box.appendChild(candiateForm);

應該是這樣的：

box.appendChild(candidateForm);

我測試了錯誤代碼並更正了它的代碼。

爲了使文本框垂直顯示，可以每一個後添加 br元素：

for(var i=0; i<val;i++) 
{ 
    var newTextbox = document.createElement('input');    //creating the textboxes according to the users input 
    newTextbox.type="textbox"; 
    newTextbox.name="candidate[]"; 
    newTextbox.id="candidateId"; 

    candidateForm.appendChild(newTextbox);       //putting the created textboxes in the form 
    var brElement = document.createElement("br"); 
    candidateForm.appendChild(brElement); 

}

編輯：你的意思是這樣嗎？

for(var i=0; i<val;i++) 
{ 
    var lblElement = document.createElement("label"); 
    lblElement.innerHTML = "Label " + (i+1) + " "; 
    candidateForm.appendChild(lblElement); 
    var newTextbox = document.createElement('input');    //creating the textboxes according to the users input 
    newTextbox.type="textbox"; 
    newTextbox.name="candidate[]"; 
    newTextbox.id="candidateId"; 

    candidateForm.appendChild(newTextbox);       //putting the created textboxes in the form 
    var brElement = document.createElement("br"); 
    candidateForm.appendChild(brElement); 

}

來源

2012-07-22 17:45:51 jeff

其中是TYPO兄弟？ – Chakra 2012-07-22 17:46:52

編輯我的答案以顯示錯別字的位置。 – jeff 2012-07-22 17:48:46

謝謝你的工作很好..謝謝你：D – Chakra 2012-07-22 17:54:41

你的另一種方法：

<script> 
     function generateForm() 
     { 
     $FormHTML = ""; 
     $fieldCount = document.getElementById("fieldsCount").value; 
     console.log($fieldCount); 
     for ($i = 1; $i <= $fieldCount; $i++) 
     { 
      $FormHTML += "<div><b>Form input " + $i + ":</b><br><input type='text' id='element" + $i + "' name='element" + $i + "' style='width:200px;'/></div>\n"; 
     } 
     document.getElementById("FieldsContainer").innerHTML = $FormHTML; 
     } 
    </script> 

    <form> 
     <select id="fieldsCount" name="fieldsCount" onChange="generateForm()"> 
     <option value="0">Please choose</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="5">5</option> 
     <option value="10">10</option> 
     </select> 
     <div id="FieldsContainer"></div> 
    </form>

來源

2012-07-22 17:48:19 Darcey

感謝您的幫助..非常感謝：D – Chakra 2012-07-22 18:24:43

使用Javascript動態創建表單

回答

相關問題