RadioButton and textLink

  • vickriz
  • Novice
  • Novice
  • User avatar
  • Posts: 31
  • Loc: Phlippines

Post 3+ Months Ago

hello once again im back for help..

i have this code; from click the radiobutton or the link beside it how can we obtained to disabled or enabled some form elements..

Code: [ Select ]
<table width="100%" cellpadding="3" cellspacing="1">
    <tr>
        <td><input type="radio" name="NominateAs" id="Nominated" accesskey="O"></td>
        <td><a href="#">N<span>o</span>minated</a></td>
        <td class="column2"><input type="radio" name="NominateAs" id="NominatedBy" accesskey="P"></td>
        <td class="column2"><a href="#">Nominated by <span>P</span>arty</a></td>
    </tr>
    <tr>
        <td colspan="2">Nominater Title:</td>
        <td colspan="2" class="column2"><select name="NominaterTitle" size="1" multiple id="NominaterTitle" tabindex="16">
        <option value="-1" selected>------------------</option>
        <option value="1">Attorney</option>
        <option value="2">Chairman</option>
        <option value="3">Congressman</option>
        <option value="4">Engineer</option>
        <option value="5">Governor</option>
        <option value="6">Honorable</option>
        <option value="7">Mayor</option>
        <option value="8">Mr.</option>
        <option value="9">President</option>
        <option value="10">Senator</option>
        <option value="11">Vice-Mayor</option>
        </select></td>
    </tr>
    <tr>
        <td colspan="2">Nominater's LN:</td>
        <td colspan="2" class="column2"><input type="text" name="NominaterLN" id="NominaterLN" maxlength="50" size="30"></td>
    </tr>
    <tr>
        <td colspan="2">Nominater's FN:</td>
        <td colspan="2" class="column2"><input type="text" name="NominaterFN" id="NominaterFN" maxlength="50" size="30"></td>
    </tr>
    <tr>
        <td colspan="2">Nominater's MN:</td>
        <td colspan="2" class="column2"><input type="text" name="NominaterMN" id="NominaterMN" maxlength="50" size="25"></td>
    </tr>
    <tr>
        <td colspan="2">Nominater's NS:</td>
        <td colspan="2" class="column2"><input type="text" name="ccNominaterNS" id="NominaterNS" maxlength="4" size="8"></td>
    </tr>
</table>
....some of the code...
<td colspan="2" align="center">
  <input type="button" name="submit" value="Submit">&&&
  <input type="reset" name="reset" value="Reset">
  <br><small>Submit Once</small>
</td>
  1. <table width="100%" cellpadding="3" cellspacing="1">
  2.     <tr>
  3.         <td><input type="radio" name="NominateAs" id="Nominated" accesskey="O"></td>
  4.         <td><a href="#">N<span>o</span>minated</a></td>
  5.         <td class="column2"><input type="radio" name="NominateAs" id="NominatedBy" accesskey="P"></td>
  6.         <td class="column2"><a href="#">Nominated by <span>P</span>arty</a></td>
  7.     </tr>
  8.     <tr>
  9.         <td colspan="2">Nominater Title:</td>
  10.         <td colspan="2" class="column2"><select name="NominaterTitle" size="1" multiple id="NominaterTitle" tabindex="16">
  11.         <option value="-1" selected>------------------</option>
  12.         <option value="1">Attorney</option>
  13.         <option value="2">Chairman</option>
  14.         <option value="3">Congressman</option>
  15.         <option value="4">Engineer</option>
  16.         <option value="5">Governor</option>
  17.         <option value="6">Honorable</option>
  18.         <option value="7">Mayor</option>
  19.         <option value="8">Mr.</option>
  20.         <option value="9">President</option>
  21.         <option value="10">Senator</option>
  22.         <option value="11">Vice-Mayor</option>
  23.         </select></td>
  24.     </tr>
  25.     <tr>
  26.         <td colspan="2">Nominater's LN:</td>
  27.         <td colspan="2" class="column2"><input type="text" name="NominaterLN" id="NominaterLN" maxlength="50" size="30"></td>
  28.     </tr>
  29.     <tr>
  30.         <td colspan="2">Nominater's FN:</td>
  31.         <td colspan="2" class="column2"><input type="text" name="NominaterFN" id="NominaterFN" maxlength="50" size="30"></td>
  32.     </tr>
  33.     <tr>
  34.         <td colspan="2">Nominater's MN:</td>
  35.         <td colspan="2" class="column2"><input type="text" name="NominaterMN" id="NominaterMN" maxlength="50" size="25"></td>
  36.     </tr>
  37.     <tr>
  38.         <td colspan="2">Nominater's NS:</td>
  39.         <td colspan="2" class="column2"><input type="text" name="ccNominaterNS" id="NominaterNS" maxlength="4" size="8"></td>
  40.     </tr>
  41. </table>
  42. ....some of the code...
  43. <td colspan="2" align="center">
  44.   <input type="button" name="submit" value="Submit">&&&
  45.   <input type="reset" name="reset" value="Reset">
  46.   <br><small>Submit Once</small>
  47. </td>


If the user clicked on Nominated button or link, the Nominater's element will enabled. and if the NominatedByParty button or link will click it will disabled it...
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • RichB
  • Guru
  • Guru
  • User avatar
  • Posts: 1121
  • Loc: Boston

Post 3+ Months Ago

I'm assuming that you mean you want all the Nominater fields disabled when "Nominated By Party" is chosen and enabled when "Nominated" is selected. I'm also assuming that you want the text links to select their corresponding radio buttons. To do that add this in the head portion of the html file:
Code: [ Select ]
<script>
function choose(id){
// this selects the radio button that goes with the text link
document.getElementById(id).checked=true;
}
function disable(){
document.getElementById("NominaterTitle").disabled=true;
document.getElementById("NominaterLN").disabled=true;
document.getElementById("NominaterFN").disabled=true;
document.getElementById("NominaterMN").disabled=true;
document.getElementById("NominaterNS").disabled=true;
}
function enable(){
document.getElementById("NominaterTitle").disabled=false;
document.getElementById("NominaterLN").disabled=false;
document.getElementById("NominaterFN").disabled=false;
document.getElementById("NominaterMN").disabled=false;
document.getElementById("NominaterNS").disabled=false;
}
</script>
  1. <script>
  2. function choose(id){
  3. // this selects the radio button that goes with the text link
  4. document.getElementById(id).checked=true;
  5. }
  6. function disable(){
  7. document.getElementById("NominaterTitle").disabled=true;
  8. document.getElementById("NominaterLN").disabled=true;
  9. document.getElementById("NominaterFN").disabled=true;
  10. document.getElementById("NominaterMN").disabled=true;
  11. document.getElementById("NominaterNS").disabled=true;
  12. }
  13. function enable(){
  14. document.getElementById("NominaterTitle").disabled=false;
  15. document.getElementById("NominaterLN").disabled=false;
  16. document.getElementById("NominaterFN").disabled=false;
  17. document.getElementById("NominaterMN").disabled=false;
  18. document.getElementById("NominaterNS").disabled=false;
  19. }
  20. </script>

and then change the links and radio boxes to look like this:
Code: [ Select ]
<td><input type="radio" name="NominateAs" id="Nominated" accesskey="O" onclick='enable()'></td>
<td><a href="#" onclick='choose("Nominated");enable()'>N<span>o</span>minated</a></td>
<td class="column2"><input type="radio" name="NominateAs" id="NominatedBy" accesskey="P" onclick='disable()'></td>
<td class="column2"><a href="#" onclick='choose("NominatedBy");disable()'>Nominated by <span>P</span>arty</a></td>
  1. <td><input type="radio" name="NominateAs" id="Nominated" accesskey="O" onclick='enable()'></td>
  2. <td><a href="#" onclick='choose("Nominated");enable()'>N<span>o</span>minated</a></td>
  3. <td class="column2"><input type="radio" name="NominateAs" id="NominatedBy" accesskey="P" onclick='disable()'></td>
  4. <td class="column2"><a href="#" onclick='choose("NominatedBy");disable()'>Nominated by <span>P</span>arty</a></td>


you will also have to add onreset="enable()" to the form tag to reset the fields to enabled if the reset button on the form is clicked, so it should look something like this:
Code: [ Select ]
<form name="whatever" onreset="enable()">

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 64 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.