www.webdeveloper.com
Results 1 to 2 of 2

Thread: Radio button clears and disables text field

  1. #1
    Join Date
    May 2004
    Posts
    13

    Radio button clears and disables text field

    have 5 radio buttons and 1 text field. 4 radio buttons have different money value and the text field is a fill in.

    I am wanting to clear and disable the text field and its radio button when a different radio button is chosen. Here is the code I am using.
    <tr>
    <td>
    <input name="OPS" type=radio value="15.00" checked /></td>
    <td>$15.00 </td>
    </tr>
    <tr>
    <td width="5%">
    <input type=radio name="OPS" value="25.00" /></td>
    <td width="95%"> $25.00 </td>
    </tr>
    <tr>
    <td width="5%">
    <input type=radio name="OPS" value="50.00" /></td>
    <td width="95%">$50.00 </td>
    </tr>
    <tr>
    <td width="5%">
    <input type=radio name="OPS" value="75.00" /></td>
    <td width="95%">$75.00 </td>
    </tr>
    <tr>
    <td width="5%">
    <input name="OPS" type=radio value="opsmoney" / ></td>
    <td width="95%"><b>$</b>
    <input name="opsmoney" type=text id="opsmoney" size="20" / >
    </td>
    </tr>

    Any help would be appreciated.
    Thanks

  2. #2
    Join Date
    Feb 2008
    Posts
    1,666
    Here is the change to your HTML:
    HTML Code:
    <tr>
      <td>
        <input type="radio" name="OPS" value="15.00"
         onclick="return HandleRadioOtherBox(OPS, opsmoney)" /></td>
      <td>$15.00 </td>
    </tr>
    <tr>
      <td width="5&#37;">
        <input type="radio" name="OPS" value="25.00"
         onclick="return HandleRadioOtherBox(OPS, opsmoney)" /></td>
      <td width="95%"> $25.00 </td>
    </tr>
    <tr>
      <td width="5%">
        <input type="radio" name="OPS" value="50.00"
         onclick="return HandleRadioOtherBox(OPS, opsmoney)" /></td>
      <td width="95%">$50.00 </td>
    </tr>
    <tr>
      <td width="5%">
        <input type="radio" name="OPS" value="75.00"
         onclick="return HandleRadioOtherBox(OPS, opsmoney)" /></td>
      <td width="95%">$75.00 </td>
    </tr>
    <tr>
      <td width="5%">
        <input type="radio" name="OPS" value="opsmoney"
         onclick="return HandleRadioOtherBox(OPS, opsmoney)" /></td>
      <td width="95%"><b>$</b>
        <input name="opsmoney" type=text id="opsmoney" size="20" / ></td>
    </tr>
    and here is the JavaScript code:
    Code:
    function HandleRadioOtherBox(grp, txt)
    {
    	var x, len = grp.length;
    	for (x=0; x<len; ++x)
    	{
    		if (grp[x].checked) break;
    	}
    	if (x < len && grp[x].value == txt.name)
    	{
    		txt.disabled = false;
    		txt.select();
    		txt.focus();
    	}
    	else
    	{
    		txt.value = "";
    		txt.disabled = true;
    	}
    	return true;
    }
    window.onload = function()
    {
    	var ele = document.forms[0].elements;
    	return HandleRadioOtherBox(ele['OPS'], ele['opsmoney']);
    }
    Last edited by MrNobody; 01-12-2009 at 07:12 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles