Dynamically generate forms?...

[lonewaft]

I have a project where I have a survey and people fill it in and javascript does several client-side stuff like check-all checkboxes, check for alphanumeric letters etc...
There's a section where I'm trying to add a dynamically generating form...
Basically I'll have a button that when pressed will generate textbox, checkboxes, radio buttons, etc, and I'll have another button to delete it if needed..
I'm trying to figure out how to do this but its just so overwhelming for me. I'm new to javascript and learning new things on the fly.

Another problem is that I'm sending this form to a php page to get the data processed, and I don't know how to handle unexpected dynamically generated forms' datas...
Somebody help me please?

[DrDOS]

Basically you have two ways of doing it, one is building all the HTML code for the generated form as a block in the form of a javascript variable and making it the innerHTML of a div. The other way is to use createElement to make the form elements.

[lonewaft]

Originally Posted by DrDOS

Basically you have two ways of doing it, one is building all the HTML code for the generated form as a block in the form of a javascript variable and making it the innerHTML of a div. The other way is to use createElement to make the form elements.

could you show me an example with code?
the 2nd way? createElement?

[panzertech]

Have a look at this link
http://www.roseindia.net/javascript/...eelement.shtml

[lonewaft]

Alright guys, new problem
A nice guy named low tech sent me a link on dynamically generating form by appending elements to divs with functions. It worked. However, there's a problem with the radio buttons.
The method of appending elements just copied and pasted the existing form and appended it to existing code, so all the new radio buttons generated have the SAME NAME...
so if i generate 4 or 5 new forms, they have radio buttons with the same name, so i can only select one button out of 4-5 forms.. BIG PROBLEM.. I can't think of a way around this, can someone help me?

[xelawho]

generally it's done with an incrementing variable and the function that creates the fields is set up so that every time it is called that number goes up one and is appended to the name (or id or whatever), thereby keeping it unique.

there are other ways, but that would seem to be easiest.

if you're stuck, show some code - I'm sure someone will help you out.

[lonewaft]

function addInput(divName){
          var newdiv = document.createElement('div');
          newdiv.innerHTML = document.getElementById('awardForm').innerHTML;
          document.getElementById(divName).appendChild(newdiv);
}

awardform is a hidden div that i use as the basis for replication, and i create a new element in a visible div.

<table border="1" width="600">
<tr>
		<td width = "500"><b>Description</b></td>
		<td width = "100"><b>Select</b></td>
	</tr>
	<tr>
		<td>International/Global (Intel Westinghouse)</td>
		<td><input type="radio" name="awardLevel[]" value="6"></td>
	</tr>
	<tr>
		<td>National (National Merit Finalist, AP Scholar w/Distinction) </td>
		<td><input type="radio" name="awardLevel[]" value="5"></td>
	</tr>
	<tr>
		<td>State (CIF, CSF, Scholar Athlete)</td>
		<td><input type="radio" name="awardLevel[]" value="4"></td>
	</tr>
	<tr>
		<td>Regional (SoCal Academic Awards; Association awards)</td>
		<td><input type="radio" name="awardLevel[]" value="3"></td>
	</tr>
	<tr>
		<td>Community (City/town scholarships; City-hall recognitions)</td>
		<td><input type="radio" name="awardLevel[]" value="2"></td>
	</tr>
	<tr>
		<td>Local/school (Honor Roll; Principal; MVP; Perf award)</td>
		<td><input type="radio" name="awardLevel[]" value="1"></td>
	</tr>
    <tr>
  </table>

is part of the code that's being cloned.



I don't think your method of incrementing a variable in the name wouldn't work, since I'm not generating new forms, I'm replicating existing ones without code changes..

[xelawho]

I'm not sure how the suffix will work with your square brackets in your radio names, but give this a go...

<script type="text/javascript">
var count=0;		
function addInput(divName){
          var newdiv = document.createElement('div');
          newdiv.innerHTML = document.getElementById('awardForm').innerHTML.replace(/awardLevel/g,"awardLevel"+count);
          document.getElementById(divName).appendChild(newdiv);
		  count++;
}
		</script>

[lonewaft]

Ahh its working beautifully, thank you!
Now I'll have to see how it affects php code..

[Old Pedant]

WHAT??? This makes no sense!

if i generate 4 or 5 new forms, they have radio buttons with the same name, so i can only select one button out of 4-5 forms.. BIG PROBLEM..

NOT TRUE AT ALL!

Example:

<html>
<body>
<form>
<input type="radio" name="rb[]" value="1"/>
<input type="radio" name="rb[]" value="2"/>
<input type="radio" name="rb[]" value="3"/>
<input type="radio" name="rb[]" value="4"/>
</form>
<hr/>
<form>
<input type="radio" name="rb[]" value="1"/>
<input type="radio" name="rb[]" value="2"/>
<input type="radio" name="rb[]" value="3"/>
<input type="radio" name="rb[]" value="4"/>
</form>
<hr/>
<form>
<input type="radio" name="rb[]" value="1"/>
<input type="radio" name="rb[]" value="2"/>
<input type="radio" name="rb[]" value="3"/>
<input type="radio" name="rb[]" value="4"/>
</form>
</body>
</html>

The radio buttons all have the same name.

But the ones in the first form are COMPLETELY SEPARATE from those in the 2nd or 3rd form, etc.

Radio button names that are the same *IN A SINGLE FORM* are grouped, but they are *NOT* grouped across forms.

You "solved" a problem that doesn't exist!

[lonewaft]

Originally Posted by Old Pedant

WHAT??? This makes no sense!


NOT TRUE AT ALL!

Example:

<html>
<body>
<form>
<input type="radio" name="rb[]" value="1"/>
<input type="radio" name="rb[]" value="2"/>
<input type="radio" name="rb[]" value="3"/>
<input type="radio" name="rb[]" value="4"/>
</form>
<hr/>
<form>
<input type="radio" name="rb[]" value="1"/>
<input type="radio" name="rb[]" value="2"/>
<input type="radio" name="rb[]" value="3"/>
<input type="radio" name="rb[]" value="4"/>
</form>
<hr/>
<form>
<input type="radio" name="rb[]" value="1"/>
<input type="radio" name="rb[]" value="2"/>
<input type="radio" name="rb[]" value="3"/>
<input type="radio" name="rb[]" value="4"/>
</form>
</body>
</html>

The radio buttons all have the same name.

But the ones in the first form are COMPLETELY SEPARATE from those in the 2nd or 3rd form, etc.

Radio button names that are the same *IN A SINGLE FORM* are grouped, but they are *NOT* grouped across forms.

You "solved" a problem that doesn't exist!

Oh sorry I didn't give the full details of the problem.. These checkboxes are only part of a giant form, when I was saying I was "replicating the form" i meant i was replicating a part of the form, not the entire form.

[Old Pedant]

AHHHH! *MAJOR* difference!

Okay...ignore the little man in the corner.

[lonewaft]

WAIT, I think you just gave me an idea..
Is there a way to submit multiple forms with one button?

[Old Pedant]

Sort of...

You can only submit one <form> to the server. Think about it: If you submitted multiple forms, the server would respond with a new HTML page *for each submittal*. Which one "wins"????

But what you could do is gather all the answers from multiple forms and, for example, put those answers into <input type="hidden"> in your master form and then submit the master form.

Not overly hard to do. It does mean, though, that you have to write JS code to handle converting (for example) a set of radio buttons into a single value for a single hidden field.