Resetting a single form field

[webmarkart]

I cannot believe how much this little thing is causing me such a headache...

I have a small form and I want to have a link (or button if needed) to reset a single select field.

This is what I have but it's not working - I left out the other fields of the form just to simplify things.

	<form name="ImageMediaMgrForm" action="/admin-bin/pubsys/imagemediamgr.cgi?i_id=60;nmf_rpoint=" method="post" enctype="multipart/form-data">
	<input type="hidden" name="mode" value="save_add">
	<input type="hidden" name="prev_mode" value="add">
	<input type="hidden" name="id" value="">
	<input type="hidden" name="i_id" value="60">
	
	<table width="80%" border="0" cellpadding="2" cellspacing="1" align="center">
	<tr class="nesttable">
		<td class="fielddesc">&nbsp;Skip These Media Versions:</td>
		<td>
            <select name="media_version_id" size="3" multiple >
               <option value="1">Highlight</option>
               <option value="2">Embedded</option>
               <option value="3">Standalone</option>
            </select>
            <a href="#" onClick="document.ImageMediaMgrForm.media_version_id.selected==0">reset</a></td>
	</tr>
	<tr>

		<td colspan="2" class="center">
			<input type="submit" name="submit" value="Submit" class="frmbutton">
			<input type="button" name="cancel" value="Cancel" onClick="document.location='?i_id=60;mode=search_results'" class="frmbutton">
		</td>
	</tr>
	</table>

[mark87]

Try this -

<a href="#" onClick="document.forms[0].media_version_id.value = 0; return false">reset</a>

[webmarkart]

thanks for the reply mark87 but it doesn't seem to work

[Bill Posters]

e.g.

function clearOptions() {
	if (!document.getElementsByTagName) return;
	var options = document.getElementById('media_version_id').getElementsByTagName("option"), 
	oLength = options.length;
	for(var i=0; i < oLength; i++) {
		options[i].selected = false;
	}
}

<select name="media_version_id" id="media_version_id" size="3" multiple="multiple">
	<option value="1">Highlight</option>
	<option value="2">Embedded</option>
	<option value="3">Standalone</option>
</select>

…

<a href="#" onclick="clearOptions(); return false;">Clear options</a>

Note that the name attribute of the select element has also been used for the id attribute.


What this does is find all the option elements within an element with id="media_version_id" and changes each of their selected attributes to false (unselected).

hth

[webmarkart]

great thanks! That works like a charm