CODEWITHSUNDEEP
javascriptdojoradio-buttondom-events
MozenRath
MozenRath

Reputation: 10030

Radio Button event handling

I have a radio button where I want to disable a text field whenever a particular value in the radio button is not selected(checked). I am using dojo's radio button. Can you help me out with this?

    <dt><label for="Records_Size">Test Run Size</label></dt>
    <dd>
        <input id="Records_All" type="radio" dojoType="dijit.form.RadioButton" name="SourceQuery" checked 
        value="All"></input>
        <label for="Records_All">All input records</label>
    </dd>
    <dt>&nbsp;</dt>
    <dd>
        <span><input id="Records_Query" type="radio" dojoType="dijit.form.RadioButton" name="SourceQuery" 
        value="Query" ></input>
        <label for="Records_Query">Limit input records to:</label></span><span>&nbsp;<input type="text"
        dojoType="dijit.form.TextBox" id="Row_Count" style="width: 25px;" value="10"/></span>
    </dd>

The radio buttons on my UI

Basically, I need an event that triggers whenever this button looses focus and an event whenever it gains it back but the processing is different for both the events.

Upvotes: 1

Views: 4365

Answers (1)

Andrew Leach
Andrew Leach

Reputation: 12983

If you want purely client-side activity for this, then...

<script>
function ManageTextBox(el){
    t=document.getElementById('Row_Count');
    if (el.value=='Query') {t.disabled=false}
       else {t.disabled=true}
    }
</script>

<dt><label for="Records_Size">Test Run Size</label></dt>
<dd>
    <input id="Records_All" type="radio" dojoType="dijit.form.RadioButton" name="SourceQuery" checked
    value="All" onchange="ManageTextBox(this)"></input>
    <label for="Records_All">All input records</label>
</dd>
<dt>&nbsp;</dt>
<dd>
    <span><input id="Records_Query" type="radio" dojoType="dijit.form.RadioButton" name="SourceQuery" 
    value="Query" onchange="ManageTextBox(this)"></input>
    <label for="Records_Query">Limit input records to:</label></span><span>&nbsp;<input type="text"
    dojoType="dijit.form.TextBox" id="Row_Count" style="width: 25px;" value="10"/ disabled></span>
</dd>

Note that each radio button gets an onchange attribute, and because the "All" radio button starts out checked, the text box needs to start out disabled. Changing the value of the radio buttons calls the function which alters the status of the text box depending on the new value of the buttons.

http://jsfiddle.net/LyStj/

Upvotes: 2

Related Questions