Onclick event not working with radio button
Question
I am new to html
I am trying to add a onclick event with radio button but it is not working. I am unable to figure out the reason. Please help.
Example code
<script>
function select(btn)
{
var1=document.getElementById("radio1");
var2=document.getElementById("radio2");
var3=document.getElementById("radio3");
if(var1.checked==true)
{
document.myform.action="A.html";
}
elseif(var2.checked==true)
{
document.myform.action="B.html";
}
else
{
document.myform.action="C.html";
}
}
</script>
function test()
{
alert('Testing')
}
{% block radio_buttons %}
<br><br><br>
<!-- <input type="radio" id="radio1" name="project_type" value=0 checked onclick="alert('yes')"><label>Projects I own</label> -->
<input type="radio" id="radio1" name="project_type" value=0 checked onclick="select('this')"><label>Projects I own</label>
<br>
<input type="radio" id="radio2" name="project_type" value=1 onclick="test()"><label>Projects I manage</label>
<br>
<input type="radio" id="radio3" name="project_type" value=1 onclick="select()"><label>Projects I can edit</label>
<br>
{% endblock %}
This code I have added in templates. I tried adding alerts. Alert get exceuted but not onclick event
2 answers
solution1
1 ACCPTED 2015-09-19 14:15:02
The select function contains a syntax error and is therefore never executed. Write:
else if (var2.checked==true)
instead of
elseif (var2.checked==true)
To avoid these kind of errors open the developer console of your browser and check if syntax errors are shown.
Second the choice of select for the function name is unfortunate, since input elements have a select function which is called instead of your function. To avoid this rename your function (eg radioSelect ) and call it accordingly ( onclick="radioSelect(this);" ).
Also your test function is placed outside of a script element which is not a good idea.
solution2
0 2015-09-19 15:07:00
You have quite a few syntax errors in your code. And you don't need the (btn) after your select in your function. You have omitted a few semi-colons, not least the one after the testing alert.
This code works
<head> <script> function select() { var1 = document.getElementById("radio1"); var2 = document.getElementById("radio2"); var3 = document.getElementById("radio3"); if (var1.selected === true) { document.myform.action = "A.html"; } else if(var2.selected === true) { document.myform.action = "B.html"; } else { document.myform.action = "C.html"; } } function test() { alert('Testing'); } </script> </head> <body> <br> <br> <br> <!-- <input type="radio" id="radio1" name="project_type" value=0 checked onclick="alert('yes')"><label>Projects I own</label> --> <input type="radio" id="radio1" name="project_type" value=0 checked onclick="select();"> <label>Projects I own</label> <br> <input type="radio" id="radio2" name="project_type" value=1 onclick="test();"> <label>Projects I manage</label> <br> <input type="radio" id="radio3" name="project_type" value=1 onclick="select();"> <label>Projects I can edit</label> </body>
Here is a fiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.