[RESOLVED] How to add fields to the form

@telmessosAug 21.2007

Hi all,

I have a form and there are three drop down menus which has the values from 0 to 10. I want my javascript code add new text fields to the form when the drop down menu changes.
For Example:
Selected option is 0. When the client changes it to 3 I want the code add
<input type=”text” name=”clientname1″ /><br>
<input type=”text” name=”clientname2″ /><br>
<input type=”text” name=”clientname3″ /><br>
to the HTML.

Any idea how?

Thanks
Ceyhun

to post a comment

JavaScript

10 Comments(s) _↴

@PadonakAug 21.2007 — #is [url=http://fisioterapiautebo.com/padonak/webdeveloper/adding_new_elements_to_a_form.htm][b]this[/b][/url] what you need?

@a1steakAug 22.2007 — #Padonak,

That's a very nice example! Very impressive how you completely created the form field input complete. Was wondering ... I will create select box instead of text input. Will create the select and all the options similar to your example. But afterwards I will need to access the data by way of the select box name or id to see which option was selected. Will I run into trouble if the select box from previous creations has same name / id as the final one? I mean will it confuse the browser? I doubt it but thought I'd ask. You are very much appreciated already. Thanks.

a1steak

@PadonakAug 22.2007 — #[b]a1steak[/b], hi :-)

every ID on your page [b]must[/b] be unique or the browser is going to understand this as an error. same names as i know allowed only in case of radio boxes... i believe there must exist the way to do what you want w/o having same id's or names. sorry for bad english

@a1steakAug 22.2007 — #My desire is to create 3 select boxes, two of which having options that are dependent on selected value of other.

I think using your procedure works for filling my div with the string that creates select box and the options. And when the other select box is altered I created an onchange function that redraws the select boxes having dependency. But there was one problem so far which was overcome (something else very strange with IE7 too ... need some help on that -- probably something with CSS ??? don't know what it is). I included within the select string an "onchange=" event handler so it knows when to redraw the dependent select boxes. But that was not recognized ... something strange ... think the parameter inside the onchange function call was being perceived as an undefined variable instead of a string. So I removed that from the long string. After filling the div with innerHTML I declared that new select object to have an onchange property like:

[CODE]     // insert this large string into the now blank div
 divRegion.innerHTML = newSelect;
 // give the newly created select object an onchange property
 var textselRegion = 'sel'+txtFromToInt+'Region';
 document.getElementById(textselRegion).onchange=function() {
 afterAlterRegion(txtFromToInt);
 }[/CODE]

That seems to work. The onchange is being recognized and the "afterAlterRegion()" function is being called as desired. Did not have to give each redraw of the select box a new div. Not yet ... fingers crossed. Have more to go ... will later read the select value of the select boxes and that is where it might become an issue.

Other excellent discussion:

http://alexle.net/archives/150

http://forums.htmlhelp.com/lofiversion/index.php/t966.html

Would you be able to tell me why IE is acting so strange with my page? It's something to do with CSS I think? I switched over from table design to CSS design and the "row" div of my CSS has a strange overlap of text. This is interfering with my 3rd select box. IE sometimes draws it and sometimes not. Its' like IE recognizes JS and does what is expected, but for that special row it repeats some of the text ??? Very strange. I've looked at code hoping to find extra < or > or , or such typo. Seems I can manipulate the position of the overhang row. Have you ever seen such a thing?

Here's my active forum post on WD:

http://www.webdeveloper.com/forum/showthread.php?t=158702

Please email me (susan.nyu @at@ gmail d.o.t com) you know how to decifer that. Thanks very much!

@telmessosauthorAug 22.2007 — #That's a good example but it not exactly what I need. What I need 3 drop downs creating text fields with different name

For example:

a drop down for adults creating text fields with name adults1, adults2 etc

a drop down for children creating text fields with name child1, child2 etc

a drop down for infants creating text fields with name inf1, inf2 etc

So when you select 2 in all drop downs, it must create a code of

<input type="text" name="adults1" /><br>

<input type="text" name="adults2" /><br>

<input type="text" name="child1" /><br>

<input type="text" name="child2" /><br>

<input type="text" name="inf1" /><br>

<input type="text" name="inf2" /><br>

Thanks

@PadonakAug 22.2007 — #if you change the script it will do it.

@telmessosauthorAug 22.2007 — #if i knew that much javascript i wouldn't ask in this forum ?

@telmessosauthorAug 23.2007 — #any ideas to help me solve this problem?

@PadonakAug 23.2007 — #does [url=http://fisioterapiautebo.com/padonak/webdeveloper/adding_new_elements_to_a_form_modified.htm][b]this[/b][/url] solve it? :-) sorry was at work have just come home

@telmessosauthorAug 23.2007 — #padonak. it is perfect my friend. Thank you very much

Also in #JavaScript _↴

Frame-Specific Rollover Images Making CSS layers move sending a data pulse

Success!

Help @telmessos spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] How to add fields to the form

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] How to add fields to the form

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴