asked on

To dynamically generate the HTML file!!

Hi experts,
I have to generate an HTML form such that..
say first I'll display some text box & an input button (radio, checkbox..) to find if the user wants to enter some more data or not. If he wants to enter some data I have to dynamically generate a form which is similar to first form. And all the text boxes & buttons must have unique names so that I can retrieve all the values entered by the user.

VincentPuglia

Is this a school assignment or are you being paid to do something you cannot?

1) create the original page
2) get your vals
3) use document.write to write
4) loop to create the field elements & unique names (doc...('<input type="text" name="text"' + i + '>')

post some code

Vinny

vosk

That's how I would do, althought the question was not precise on which more data the user can enter:

<html>
<head>
<script language="JavaScript">
function A(v)
{
document.getElementById('q1').innerHTML = "<big>-</big>How many questions would you like more?<br><select name='d' onChange='B(this.value);'><option value='0'>Select from here...\n<option value='1'>1 more\n<option value='2'>2 more\n<option value='3'>3 more\n<option value='4'>4 more\n</select>";
document.getElementById('qd').innerHTML = "<big>-</big>Click <span style='cursor:hand;text-decoration:underline' onClick='Del();'>here</span> to reset.";
}
function B(n)
{
var i;
if (n!=0)
      {
      document.getElementById('q1').innerHTML = "";
      for (i=1;i<=n;i++)
            {
            document.getElementById('q1').innerHTML += "<big>-</big>Question nº "+i+" :<br><input type='text' name='question"+i+"' value=''><br><br>";
            }
      document.getElementById('q1').innerHTML += "<input type='button' name='submit' value='Submit...' onClick='C();'><br>";
      }
}
function C()
{
alert("force here to submit");
document.getElementById('ff').submit();
}
function Del()
{
document.getElementById('q1').innerHTML = "<big>-</big>Want to resp. more?<br><input type='button' name='b' value='Yes, show more...' onClick='A();'><input type='button' name='c' value='No, submit now.' onClick='C();'><br><br>";
document.getElementById('qd').innerHTML = "";
}
</script>
</head>
<body>
<form name="ff" action="sss.ext" method="post">
<big>-</big>Name:<input type="text" name="a" value=""><br><br>
<div id="q1">
<big>-</big>Want to resp. more?<br>
<input type="button" name="b" value="Yes, show more..." onClick="A();">
<input type="button" name="c" value="No, submit now." onClick="C();"><br><br>
</div>
<br><br>
<div id="qd"></div>
</form>
</body>
</html>

the method to add new fields is similar as the posted by Vincent, a simple loop between 1 and the variable. Althought that sample isn't complete, because when you pass the form to a serverside script, you may have the fields that really exists on the page; so the best way to complete is to add a srting with an 'array' format, where inform all the variables that have been used on the page. Then the serverside will get first only that array, will separate all the variables and finally it knows the names of the fields from will get values.

jbosch(vosk)

ASKER CERTIFIED SOLUTION

Yavor_01126

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

mmveeru

ASKER

Hi!

thank you for ur suggestions

warm regards