...

View Full Version : Dynamic form



Staggan
11-05-2012, 12:13 PM
Hello

I am looking to create a dynamic form for some input...

I want to be able to enter a number and create an input form with that number of inputs...

So if I enter 6 I would like a table generated with 6 inputs that when submitted will give me an array containing the values of those 6 inputs

Help would be appreciated

Thanks

yaseenyahya
11-05-2012, 01:44 PM
is this waht yu need??



<label for="selector">Type Here:</label>
<input id="selector" name="selector">
<input type="button" value="Submit" onClick="arrayGenerator()">

_______________________________________________________________

function arrayGenerator(){
var arrayM = new Array ("anything","you","want","here","want","to","do"),
checker = /1|2|3|4|5|6/,
getter = document.getElementById("selector").value;
checkerFinder = getter.search(checker);
if(checkerFinder === 0){
getter = getter -1;
var setter = arrayM[getter];
document.write(setter);
}
else if(getter.search(/\D/) === 0 || getter === "" || null)
{
alert("Please" + " " + "type" + " " + "a" + " " + "number!!");
}

else {
alert("please" + " " + "type" +" " + "less" +" " + "than" + " " + "six" + " " + "numbers.");
}
};

Philip M
11-05-2012, 05:42 PM
You might prefer something more flexible, but you could adapt this:-


<html>
<head>

<body onload = "showhide()">
<form>

<span id = "button" style="display:none;"><input type = "button" id = "but1" style=background-color:"#99FFFF" value = "Add A New Input Field" onclick = "addfield()"></span><br>

<span id = "sp1" >Input 1 <input type = "text" name = "txt1" id = "txt1"></span><br>
<span id = "sp2" >Input 2 <input type = "text" name = "txt2" id = "txt2"></span><br>
<span id = "sp3" >Input 3 <input type = "text" name = "txt3" id = "txt3"></span><br>
<span id = "sp4" >Input 4 <input type = "text" name = "txt4" id = "txt4"></span><br>
<span id = "sp5" >Input 5 <input type = "text" name = "txt5" id = "txt5"></span><br>
<span id = "sp6" >Input 6 <input type = "text" name = "txt6" id = "txt6"></span><br>
<span id = "message" style = "color:red"></span><br><br>
</form>
More stuff here

<script type = "text/javascript">

var count = 1;
var maxfields = 6;

function showhide() {
// reverse visibility for javascript-enabled browsers - others see six input fields and no button
document.getElementById("button").style.display="block";
for (var i=2; i<=maxfields;i++) {
var val = "sp" + i;
document.getElementById(val).style.visibility="hidden";
}
}

function addfield() {
count ++;
if (count > maxfields) {
document.getElementById("message").innerHTML = "Maximum of " + maxfields + " Input Fields";
document.getElementById("but1").style.backgroundColor = "red";
document.getElementById("but1").value = "Max number of fields is " + maxfields;
setTimeout('document.getElementById("message").innerHTML = "" ', 3000); // erase message after 3 seconds
return false;
}

var val = "sp" + count;
document.getElementById(val).style.visibility="visible";
}

</script>

"If you are a widow, for whatever reason,....." - Ed Balls, former UK goverment member

</body>

</body>
</html>

xelawho
11-05-2012, 09:21 PM
it seems to be fairly simple, except for the bit where you want the array of values on submission. Do you want to stay on the same page, and use those values, or do you want to submit that array to the server? Here's a start, anyway...


<html>
<head>
</head>
<body>
Enter number of inputs:<input type="text" id="num"><br>
<input type = "button" value = "Show Fields" onclick = "showFields()"><br>
<form id="theform">
</form>
<script type = "text/javascript">
function showFields() {
document.getElementById("theform").innerHTML="";
var numFlds=Number(document.getElementById("num").value);
if (!isNaN(numFlds)){
for (var i=0; i<numFlds;i++) {
var inp=document.createElement("input");
inp.type="input";
inp.name="inp"+i;
document.getElementById("theform").appendChild(inp);
document.getElementById("theform").appendChild(document.createElement("br"));
}
}
var sub=document.createElement("input");
sub.type="submit"
document.getElementById("theform").appendChild(sub);
}
</script>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum