Dynamically add input field to page

[mtran]

Hi, I have the following example form in which I want if users click on the checkbox [NOT the submit button], the input text field will be added right away somewhere on the same page, then everything will be submitted when users click on the Submit button.

Right now when I clicked, the page refreshes.
The real list of checkboxes is pretty long, about 30 items. I'm not sure what is a good way of doing this.

Thanks for help!



<form name="contact">
<input type="checkbox" name="Distributor" value="MSN" onclick="generate_formId();" /> MSN<br />
<input type="checkbox" name="Distributor" value="Yahoo" onclick="generate_formId();" /> Yahoo!<br />
<input type="checkbox" name="Distributor" value="Google" /> Google<br /><br />

<script type="text/javascript">

function generate_formId(){
var Distributor_id = new Array()
Distributor_id[0]="http://www.msn.com";
Distributor_id[1]="http://www.yahoo.com";
Distributor_id[2]="http://www.google.com";

for (var i=0; i < document.contact.Distributor.length; i++){
if (document.contact.Distributor[i].checked){
document.write('<input name="form_id" type="text" value="'+Distributor_id[i]+'" />');}}
//return false;
}
</script>

<input type="submit" value="submit" onclick="generate_formId();" />
</form>

[Nile]

It's because of your document.write. Here, try this:



<form name="contact">
<div id="finput"></div>
<input type="checkbox" name="Distributor" value="MSN" onclick="generate_formId();" /> MSN<br />
<input type="checkbox" name="Distributor" value="Yahoo" onclick="generate_formId();" /> Yahoo!<br />
<input type="checkbox" name="Distributor" value="Google" /> Google<br /><br />
<input type="submit" value="submit" onclick="generate_formId();" />
</form>

<script type="text/javascript">

function generate_formId(){
var Distributor_id = new Array()
Distributor_id[0]="http://www.msn.com";
Distributor_id[1]="http://www.yahoo.com";
Distributor_id[2]="http://www.google.com";

for (var i=0; i < document.contact.Distributor.length; i++){
if (document.contact.Distributor[i].checked){
document.getElementById('finput').innerHTML='<input name="form_id" type="text" value="'+Distributor_id[i]+'" />';}}
//return false;
}
</script>


Should work. :)