Q_24433511: how to disable pieces of a form by clicking an image or text

This example shows how to use two images and utilize JavaScript to select different content in hidden fields bases on what image is clicked, or the text next to it.

This page will remain online for future reference. The original question can be viewed at Experts-Exchange, but requires (free) membership. More information about me, about how this site is maintained and about how to use these pages for yourself, check out the opening page.

Use the following code:

I've left the code real simple, to make the subject matter understandable. Try the buttons and see what happens with the rightmost part of the url in the browser bar. You'll see that the two hidden fields are changed. What you see is is what is sent to the server.

<!-- the fields that get enabled/disabled -->
<input type="hidden" id="hidden1" name="hidden1" value="thefirst" />
<input type="hidden" id="hidden2" name="hidden2" value="thesecond" />

<!-- image 1, disables hidden1 -->
<img src="../../images/image1.png"
onclick="document.getElementById('hidden1').disabled = true;
         document.forms[0].submit();" />

<!-- image 2, disables hidden2 -->
<img src="../../images/image2.png" 
onclick="document.getElementById('hidden2').disabled = true;
         document.forms[0].submit();" />

	

	click this image or text to disable hidden1, which effectively sends hidden2
	click this image or text to disable hidden2, which effectively sends hidden1