newbie question about AJAX

[Man-wai Chang]

<form name="frmTest" type="submit" method="post">
<input type="textbox" name="txtA" size=10 value=""><a
href="pickitem.php">?</a>
<select name="cboB" value="">
<option value="1">1
<option value="2">1
</select>
<input type="submit" name="cmdSave">
</form>

Using AJAX, i would like to re-populate the options of cboB after user
picked a value for txtA via form pickitem.php.

Could someone post some source codes or maybe a website that talks about
this specific example?

 

[Peter Michaux]

<form name="frmTest" type="submit" method="post">
<input type="textbox" name="txtA" size=10 value=""><a
href="pickitem.php">?</a>
<select name="cboB" value="">
<option value="1">1
<option value="2">1
</select>
<input type="submit" name="cmdSave">
</form>

Using AJAX, i would like to re-populate the options of cboB after user
picked a value for txtA via form pickitem.php.

Could someone post some source codes or maybe a website that talks about
this specific example?

I recommend you don't try to manipulate the options of the select
element directly. There are cross browser issues to worry about.

If the Ajax request returns HTML then have the server return HTML for
the entire select element with the new options nested inside. Then
replace the select element using innerHTML of some element wrapping
the select.

If you are looking for and Ajax library there are many Yahoo! UI,
AjaxToolbox, Fork, MochiKit, Dojo, Prototype, MooTools, jQuery...

Peter

 

[scripts.contact]

<form name="frmTest" type="submit" method="post">
<input type="textbox" name="txtA" size=10 value=""><a
href="pickitem.php">?</a>
<select name="cboB" value="">
<option value="1">1
<option value="2">1
</select>
<input type="submit" name="cmdSave">
</form>

Using AJAX, i would like to re-populate the options of cboB after user
picked a value for txtA via form pickitem.php.

to remove options, use
selectElement.remove(Option-Index)
e.g.
document.forms.frmTest.cboB.remove(0)

to add Option, use selectElement.add(option element)
e.g.
var optionElement=new Opton("text","value")
selectElement.add(optionElement)

 

[Peter Michaux]

to remove options, use
selectElement.remove(Option-Index)
e.g.
document.forms.frmTest.cboB.remove(0)

to add Option, use selectElement.add(option element)
e.g.
var optionElement=new Opton("text","value")
selectElement.add(optionElement)

Does that really work cross browser? My memory about some issue
somewhere related to select elements is vague.

Thanks,
Peter

 

[-Lost]

Does that really work cross browser? My memory about some issue
somewhere related to select elements is vague.

See RobG's reply to "<select>.remove() Performance and Necessity"

 

[-Lost]

to remove options, use
selectElement.remove(Option-Index)
e.g.
document.forms.frmTest.cboB.remove(0)

to add Option, use selectElement.add(option element)
e.g.
var optionElement=new Opton("text","value")
selectElement.add(optionElement)

var optionElement = new Option("text", "value"); // Option not Opton

 

[scripts.contact]

Peter Michaux wrot:

Does that really work cross browser? My memory about some issue
somewhere related to select elements is vague.

.... you are right.

for firefox, you need(2nd arg=option element):
sel.add( new Option('text','val'),sel.options[sel.options.length] )

for ie (2nd arg= optional OR index ):
sel.add( new Option('text','val') )

:-<