我尝试编写一个函数,该函数接收用户关于在表单中创建多少字段的输入。然后该函数创建一个Form,其中包含文本框的数字(相当于用户输入)和一个提交按钮。我写了这个函数,但它似乎没有工作在哪里我出错了。如果有人能帮助我,我将不胜感激。 我的代码:
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
答案 0 :(得分:2)
首先,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);
}
答案 1 :(得分:1)
另一种方法:
<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>
答案 2 :(得分:0)
您的代码中有两个拼写错误。这样:
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);
}