CODEWITHSUNDEEP
javascripthtml
user3462609
user3462609

Reputation: 105

OnClick of RadioButton not working

I was trying to change the text of a submit button on change of radio button .My code for html part is : 

<input type="radio" onclick="check()" name="radio-view"  data-icon="segment-titlestyle-segonly"  id="segment1" value="Yes"/> 
<label for="segment1"  id="controls">
<span class="ui-btn-text-controls">Yes</span>
</label> 

<input type="radio" onclick="check()" name="radio-view" data-icon="segment-titlestyle-segonly" id="segment2" value="No" checked="checked"/>  
<label for="segment2" id="controls">
<span class="ui-btn-text-controls">No</span>
</label> 


<input type="submit" value="send" name="sendbutton" id="sendbutton"/>

My javascript code is as follow : 

function check(){
var x;
x=document.f1.radio-view;
if(x[0].checked){
    document.f1.sendbutton.value="PROCEED";
}
else if(x[1].checked){
    document.f1.sendbutton.value="SEND";
}
}

But its not changing the test.What can be the reason for it?

Upvotes: 0

Views: 101

Answers (2)

display name
display name

Reputation: 4185

See Demo here: http://jsfiddle.net/Tngbs/

//HTML
<form>
    <fieldset id="SPserviceStatus" data-role="controlgroup" data-type="horizontal" data-mini="true">
                    <legend>Group<span class="required">*</span></legend>
                    <input type="radio"  name="ss" id="s1" value="Yes">
                    <label for="serviceStatus1">Yes</label>
                    <input type="radio"  name="ss" id="s2" value="No"  checked="checked">
                    <label for="serviceStatus2">No</label>
                </fieldset>
                        <input type='submit' id='submitBtn' value='SUBMIT' />
</form>

//JS
$("#s1").click(function () {
    document.getElementById("submitBtn").value = "Yes Clicked";
    return false;
});
$("#s2").click(function () {
    document.getElementById("submitBtn").value = "No Clicked";
    return false;
});

Upvotes: 0

raina77ow
raina77ow

Reputation: 106365

If you decide to address elements directly, use their names properly:

var x = document.f1['radio-view'];

... as you cannot access with the dot syntax the properties which names are not valid identifiers. document.f1.radio-view is treated as document.f1.radio - view, which apparently makes no sense.

But actually, I'd rather skip this part completely: if radio-button is clicked, it's definitely set as checked. So this...

<input type="radio" onclick="check(this)" ... />
...
function check(button) {
  document.f1.sendbutton.value = button.value === 'Yes' ? 'PROCEED' : 'SEND';
}

... should be quite enough, as this demo shows.

Upvotes: 1

Related Questions