AJAX dropdown list clear before value

[nicosa]

Hello guys,
i need your help about how to clear value from ajax selected value, the code i use from thread daved83 about AJAX dropdown list. i have modified a little for that code, the code is like below

<tr>
<td style="vertical-align:top;" rowspan="5" width="130px">Shipment by<br/><span style="font-size:10px">(select nearest city <br/>if not find your city)</span>
<div class="ship_only"><p>Sorry, for your inconvenience.<br/>For now, other area besides jakarta please <a href="<?php echo $config_basedir;?>contact_us">contact us</a></p>
</div>
</td>
<td style="vertical-align:top; padding-left:"><input name="br" type="radio" checked onClick="SetHTML2('c1')"/>TIKI regular
<span id="c1" style="">
<div style="margin-left:20px;margin-top:5px;">
<table width="60%" border="0" cellspacing="0" cellpadding="3">
  <tr>
    <td width="150">Province</td>
    <td  width="150"><select name="province" id="province" onChange="getNextMenu(0)"><option value="">Select province</option>
<?php $c = mysql_query("SELECT * FROM provinsi");
while($crow = mysql_fetch_array($c)){    
	
echo '<option value="'.$crow["id_provinsi"].'">'.$crow["provinsi"].'</option>';
	}
	?>
        </select></td>
  </tr>
  <tr style="">
    <td>City</td>
    <td ><select name="city" id="city" onChange="getNextMenu(1)"  disabled>
<option value="none selected"> Select province first</option> 
        </select></td>
  </tr>
  <tr style="">
    <td>Price</td>
    <td class="hid">
   <select name="val" id="val" disabled>
<option value="none selected"> Select city First </option> 
     </select> /kg
   </td>
  </tr>
  </table>
  </div>
</span>
</td>
</tr>

<td>
<input name="br" type="radio" onClick="SetHTML2('d1');" >TIKI ONS
<span id="d1" style="display:none">
<br/>
<div style="margin-left:20px;margin-top:5px;">
<table width="60%" border="0" cellspacing="0" cellpadding="3">
  <tr>
    <td width="150">Province</td>
    <td  width="150"><select name="province" id="province2" onChange="getNextMenu2(0)"><option value="">Select province</option>
<?php $c = mysql_query("SELECT * FROM provinsi");
while($crow = mysql_fetch_array($c)){    
	
echo '<option value="'.$crow["id_provinsi"].'">'.$crow["provinsi"].'</option>';
	}
	?>
        </select></td>
  </tr>
  <tr style="">
    <td>City</td>
    <td ><select name="city" id="city2" onChange="getNextMenu2(1)"  disabled>
<option value="none selected"> Select province first</option> 
        </select></td>
  </tr>
  <tr style="">
    <td>Price</td>
    <td class="hid">
   <select name="val" id="val2" disabled>
<option value="none selected"> Select city First </option> 
     </select> /kg
   </td>
  </tr>
  </table>
  </div>
</span><br/>
</td>
</tr>

the system is when visitor click TIKI regular, drop down ajax list will appear and visitor can chose province, city and price will automaticly appear after chose city.

the problem is the price value will still there after visitor move chose other option, like TIKI ons.

need help for: how i can clear the chosen value if visitor move chose other option?

many thank,

[Airshow]

Nicosa,

The simplest strategy is to disable the all three select menus when "TIKI ONS" is selected. This will leave their options intact in case the user returns to "TIKI Regular". Use element.disabled = true; and element.disabled = false; If you really must neutralise the menus, then one possible strategy would be as follows:

When getNextMenu(x) is called, get it to :

• hide the neutral vesion of <select> menu x+1, (without removing it from the DOM)
• append a new <select> menu (populated with its <option>s) to appear in the same position on the page as the original.

When "TIKI ONS" is selected, you now have a mechanism to return to the initial state by :

• removing the populated <select> menus from the DOM.
• showing the neutral <select> menus.

This should put everything back to the initial state so that the user can, if necessary, start afresh after returning to "TIKI Regular".

To do this you will need to use DOM methods:

• document.getElementById() (or document.form.formElementName)
• element.appendChild()
• element.removeChild()
• element.style.display = 'none'
• element.style.display = 'inline'.

Airshow

[nicosa]

first of all, thank you Airshow for your kindness helping my problem.
almost one week i try to understand your suggestion but i can not understand because i am a beginner in javscript. i really still need your help, can you give me sample code? many thank Airshow

[Airshow]

This is the sort of thing I envisaged:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
* { font-family:verdana; font-size:10pt; }
</style>

<script>
var $ = function(x){ return document.getElementById(x); }
function setHTML(s) {
	var m0, m1, m2;
	var sections = ['reg', 'ons'];//add any further sections here
	var menus = ['city', 'val'];//add any further sections here
	for(var i=0; i<sections.length; i++) {
		m0 = sections[i] + '_' + 'province';
		$(m0).disabled = (sections[i] !== s) ? true : false;
		for(var j=0; j<menus.length; j++) {
			m1 = sections[i] + '_' + menus[j] + '_x';
			m2 = sections[i] + '_' + menus[j];
			$(m1).style.display = (sections[i] !== s) ? 'inline' : 'none';
			$(m2).style.display = (sections[i] === s) ? 'inline' : 'none';
		}
	}
}

onload = function(){
	 $('brReg').checked = true;
	 setHTML('reg');
};
</script>
</head>

<body>

<form name="myForm">
<table border>
<tr>
<td style="vertical-align:top;" rowspan="5" width="130px">
Shipment by
<p style="font-size:10px">(select nearest city <br/>if not find your city)</div>
<p class="ship_only">Sorry, for your inconvenience.<br/>For now, other area besides jakarta please <a href="<?php echo $config_basedir;?>contact_us">contact us</a></p>
</td>
<td style="padding:5px; padding-left:20px;">
	<input name="br" id="brReg" type="radio" value="reg" onClick="setHTML('reg');" /><label for="brReg">TIKI Regular</label>
	<table id="regular_section" width="60%" border="0" cellspacing="0" cellpadding="3">
	<tr>
	<td width="150">Province</td>
	<td width="150">
	<select name="province" id="reg_province" onChange="getNextMenu(0)">
		<option value="">Select province</option>
		<option value="p1">Province 1</option>
		<option value="p2">Province 2</option>
		<option value="p3">Province 3</option>
		<option value="p4">Province 4</option>
	</select>
	</td>
	</tr><tr>
	<td>City</td>
	<td>
	<span id="reg_city_x"><select onChange="getNextMenu(1)" disabled>
		<option value="none selected"> Select province first</option>
	</select></span>
	<span id="reg_city"><select name="city" id="reg_city" onChange="getNextMenu2(1)">
		<option value="cityA">City A</option>
		<option value="cityB">City B</option>
		<option value="cityC">City C</option>
		<option value="cityD">City D</option>
	</select></span>
	</td>
	</tr><tr>
	<td>Price</td>
	<td class="hid">
	<span id="reg_val_x"><select disabled>
		<option value="none selected">Select city First </option>
	</select>&nbsp;/kg</span>
	<span id="reg_val"><select name="val">
		<option value="p1">Price a</option>
		<option value="p2">Price b</option>
		<option value="p3">Price c</option>
		<option value="p4">Price d</option>
	</select>&nbsp;/kg</span>
	</td>
	</tr>
	</table>
</td>
</tr>
<td style="padding:5px; padding-left:20px;">
	<input name="br" id="brOns" type="radio" value="ons" onClick="setHTML('ons');" /><label for="brOns">TIKI ONS</label>
	<table id="ons_section" width="60%" border="0" cellspacing="0" cellpadding="3">
	<tr>
	<td width="150">Province</td>
	<td width="150">
	<select name="province" id="ons_province" onChange="getNextMenu2(0)">
		<option value="">Select province</option>
		<option value="p1">Province 1</option>
		<option value="p2">Province 2</option>
		<option value="p3">Province 3</option>
		<option value="p4">Province 4</option>
	</select>
	</td>
	</tr><tr>
	<td>City</td>
	<td>
	<span id="ons_city_x"><select id="" onChange="getNextMenu2(1)" disabled>
		<option value="none selected"> Select province first</option>
	</select></span>
	<span id="ons_city"><select name="city" onChange="getNextMenu2(1)">
		<option value="cityA">City A</option>
		<option value="cityB">City B</option>
		<option value="cityC">City C</option>
		<option value="cityD">City D</option>
	</select></span>
	</td>
	</tr><tr>
	<td>Price</td>
	<td class="hid">
	<span id="ons_val_x"><select disabled>
	<option value="none selected">Select city first</option>
	</select>&nbsp;/kg</span>

	<span id="ons_val"><select name="val">
		<option value="p1">Price a</option>
		<option value="p2">Price b</option>
		<option value="p3">Price c</option>
		<option value="p4">Price d</option>
	</select>&nbsp;/kg</span>
	</td>
	</tr>
	</table>
</td>
</tr>
</table>
</form>

</body>
</html>

It may not be exactly what you want, but should give you some ideas.

Airshow

[nicosa]

Nice Air show,
i get your idea, but i can not hide or collapse disabled value. eg. schema like below

TIKI REGULAR(radio unchecked)
TIKI ONS(radio checked)
province
city
value
TNT (radio unchecked)
UPS (radio unchecked)

in your idea before if radio unchecked the menu province, city, and value still show up so it will take to much place if we have lot of radio button.
Need your advice again Airshow.

many thank

[Airshow]

Nicosa,

If I understand correctly, then that makes the code is very much simpler :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
* { font-family:verdana; font-size:10pt; }
</style>

<script>
var $ = function(x){ return document.getElementById(x); }
function setHTML(s) {
	var n = 2;//number of sections
	for(var i=0; i<n; i++) {
		$('s'+i).style.display = (i === s) ? 'block' : 'none';
	}
}

onload = function(){
	 $('brReg').checked = true;
	 setHTML(0);
};
</script>
</head>

<body>

<form name="myForm">
<table border>
<tr>
<td style="vertical-align:top;" rowspan="5" width="130px">
Shipment by
<p style="font-size:10px">(select nearest city <br/>if not find your city)</div>
<p class="ship_only">Sorry, for your inconvenience.<br/>For now, other area besides jakarta please <a href="<?php echo $config_basedir;?>contact_us">contact us</a></p>
</td>
<td style="padding:5px; padding-left:20px;">
	<input name="br" id="brReg" type="radio" value="reg" onClick="setHTML(0);" /><label for="brReg">TIKI Regular</label>
	<div id="s0">
	<table width="60%" border="0" cellspacing="0" cellpadding="3">
	<tr>
	<td width="150">Province</td>
	<td width="150">
	<select name="province" id="reg_province" onChange="getNextMenu(0)">
		<option value="">Select province</option>
		<option value="p1">Province 1</option>
		<option value="p2">Province 2</option>
		<option value="p3">Province 3</option>
		<option value="p4">Province 4</option>
	</select>
	</td>
	</tr><tr>
	<td>City</td>
	<td>
	<select name="city" id="reg_city" onChange="getNextMenu2(1)">
		<option value="cityA">City A</option>
		<option value="cityB">City B</option>
		<option value="cityC">City C</option>
		<option value="cityD">City D</option>
	</select>
	</td>
	</tr><tr>
	<td>Price</td>
	<td class="hid">
	<select name="val">
		<option value="p1">Price a</option>
		<option value="p2">Price b</option>
		<option value="p3">Price c</option>
		<option value="p4">Price d</option>
	</select>&nbsp;/kg
	</td>
	</tr>
	</table>
	</div>
</td>
</tr>
<td style="padding:5px; padding-left:20px;">
	<input name="br" id="brOns" type="radio" value="ons" onClick="setHTML(1);" /><label for="brOns">TIKI ONS</label>
	<div id="s1">
	<table width="60%" border="0" cellspacing="0" cellpadding="3">
	<tr>
	<td width="150">Province</td>
	<td width="150">
	<select name="province" id="ons_province" onChange="getNextMenu2(0)">
		<option value="">Select province</option>
		<option value="p1">Province 1</option>
		<option value="p2">Province 2</option>
		<option value="p3">Province 3</option>
		<option value="p4">Province 4</option>
	</select>
	</td>
	</tr><tr>
	<td>City</td>
	<td>
	<select name="city" onChange="getNextMenu2(1)">
		<option value="cityA">City A</option>
		<option value="cityB">City B</option>
		<option value="cityC">City C</option>
		<option value="cityD">City D</option>
	</select>
	</td>
	</tr><tr>
	<td>Price</td>
	<td class="hid">
	<select name="val">
		<option value="p1">Price a</option>
		<option value="p2">Price b</option>
		<option value="p3">Price c</option>
		<option value="p4">Price d</option>
	</select>&nbsp;/kg
	</td>
	</tr>
	</table>
	</div>
</td>
</tr>
</table>
</form>

</body>
</html>

Note that each set of menus is now wrapped in <div id="sX"> where X is the section number, and we simply pass 0, 1, 2 etc to setHTML to identify the active section.

Also, the disabled versions of City and Price menus are now not required so we have deleted them.

Airshow

[nicosa]

Hello Airshow,
sorry for long time not online.
the script you written simplier then one. but i think we have a problem because the value from before still intact there how we make those field disabled to avoid the value send to process/database when we click submit.

thank again Airshow

[Airshow]

No time right now. I'm off to work in a few minutes. Will look at it when I get home this evening.

Airshow

[Airshow]

Nicosa,

As far as I am aware, setting non-displayed form elements are not submitted, though maybe not all browsers follow this rule.

Therefore, to be certain we can both hide and disable all select menus in non-current sections, like this :

function setHTML(s) {
	var n = 2;//number of sections
	for(var i=0; i<n; i++) {
		var section = $('s'+i);
		section.style.display = (i === s) ? 'block' : 'none';
		var menus = section.getElementsByTagName('select');
		for(var j=0; j<menus.length; j++) {
			menus[j].disabled = (i === s) ?  false: true;
		}
	}
}

You can prove that menus are disabled by temporarily commenting out the line

section.style.display = (i === s) ? 'block' : 'none';

Airshow

[nicosa]

Long time, i was not online.
Airshow, you already written a good solution for my problem.
as far it is working well.
once again many thank for your advice.