Develop Reference

Change the Value of radio buttons with other radio buttons

So I have been trying to create a dynamic form that changes the value of the offered packages, by choosing what type of customer the user is.
My JSFiddle of the section of the form:
https://jsfiddle.net/mullern/ch8z0hry/4/
$(document).ready(function(){
$('#student').on('click', function() {
$('#minimal').val('100');
$('#soundonly').val('150');
$('#soundandlight').val('175');
$('#totalpartypackage').val('200');
});
$('#private').on('click', function() {
$('#minimal').val('150');
$('#soundonly').val('200');
$('#soundandlight').val('300');
$('#totalpartypackage').val('400');
});
$('#company').on('click', function() {
$('#minimal').val('200');
$('#soundonly').val('300');
$('#soundandlight').val('400');
$('#totalpartypackage').val('50');
});
});
I searched the internet for hours trying different solutions. In the end I read through the W3schools page about JQuery event methods and tried to piece together what seemed right to me. In the JSFiddle I also included a script to check if the values of the Radiobuttons. I noticed that the JSFiddle seems to work but on my own private server it doesn't. What am I doing wrong?
Edit: I am currently running the page on my synology NAS with Webstation.

You have error javascript in console? And you have included jquery?
Try insert this:
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

I have been Fiddling around with the code and came to the conclusion that it actually works fine. You can go check out my JSFiddle to see the final result:
https://jsfiddle.net/mullern/no0qfqhh/
The code I started with was actually already correct.
$(document).ready(function(){
$('#student').on('click', function() {
$('#minimal').val('100');
$('#soundonly').val('150');
$('#soundandlight').val('175');
$('#totalpartypackage').val('200');
});
$('#private').on('click', function() {
$('#minimal').val('150');
$('#soundonly').val('200');
$('#soundandlight').val('300');
$('#totalpartypackage').val('400');
});
$('#company').on('click', function() {
$('#minimal').val('200');
$('#soundonly').val('300');
$('#soundandlight').val('400');
$('#totalpartypackage').val('50');
});
});
Using the button at the end made checking the code very simple, especially for future testing when it comes to adding more values and displaying them in the end.
<div class="form-field-contain" id="customertype">
<fieldset data-role="controlgroup">
<label><input type="radio" name="customertype" id="student" value="Student/Apprentice">Stundent/Apprentice</label>
<label><input type="radio" name="customertype" id="private" value="private" checked="checked">Private</label>
<label><input type="radio" name="customertype" id="company" value="company">Company</label>
</fieldset>
</div>
<div class="form-field-contain" id="prices">
<fieldset data-role="controlgroup" id="pricetag">
<label><input type="radio" name="price" id="minimal" value checked="checked">Minimal</label>
<label><input type="radio" name="price" id="soundonly" value>Sound Only</label>
<label><input type="radio" name="price" id="soundandlight" value>Sound and Light</label>
<label><input type="radio" name="price" id="totalpartypackage" value>Total Party Package</label>
<label><input type="radio" name="price" id="custom" value="">Custom</label>
</fieldset>
</div>
<script>
function display() {
var a = document.getElementById('minimal').value;
var b = document.getElementById('soundonly').value;
var c = document.getElementById('soundandlight').value;
var d = document.getElementById('totalpartypackage').value;
alert("The value of the radio buttons are: " + a + " and " + b + " and " + c + " and " + d);
}
</script>
<button onclick="display()">Check</button>
Thank to everyone that contributed in any way.

Onclick event not working with radio button

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

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 (e.g. 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.

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

enabling a checkbox when another checkbox is checked using javascript

I am trying to enable a disabled checkbox when another checkbox is checked by using javascript. I believe my problem is when I am trying to pass the form information into the javascript.
Here is my HTML:
<form id="checkboxes">
<input type="checkbox" name="checkboxa" onclick="javascript:ToggleSwitch(form)" />1
<input type="checkbox" name="checkboxb" disabled="true" />2
</form>
Here is my Javascript:
<script type="text/javascript">
var form= document.getElementById("checkboxes")
function ToggleSwitch(form) {
if (form.elements["checkboxa"].checked)
form.elements["checkboxb"].disabled = false
} else {
form.elements["checkboxb"].disabled = true
}
</script>

You missed { and } in your javascript. Try this:
var form= document.getElementById("checkboxes")
function ToggleSwitch(form) {
if (form.elements["checkboxa"].checked) { // here
form.elements["checkboxb"].disabled = false
} else {
form.elements["checkboxb"].disabled = true
}
} // and here

Change you onclick event like this
onclick="javascript:ToggleSwitch(this.form)"
and also you don't need to var form= document.getElementById("checkboxes") since you are already passing it as a parameter from onclick event.
And you are also missing a parenthesis
Here is the js
<script>
function ToggleSwitch(form) {
if (form.elements["checkboxa"].checked) {
form.elements["checkboxb"].disabled = false
} else {
form.elements["checkboxb"].disabled = true
}
}
</script>
And here is the html
<form id="checkboxes">
<input type="checkbox" name="checkboxa" onclick="javascript:ToggleSwitch(this.form)" />1
<input type="checkbox" name="checkboxb" disabled="disabled" />2
</form>
And here is a demo

Firstly, you've got syntax errors in your javascript (missing { in the if statement).
You also have some redundancy in your function. It is essentially this pattern:
if (x) { return true; } else { return false; };
which can be simplified to
return x;
Here is a slightly different method, taking these points into account, and also removing the need to search the whole document for ids (which usually makes things more portable/reusable).
<html>
<head>
<script type="text/javascript">
function ToggleSwitch(el, other) {
el.form.elements[other].disabled = !el.checked;
}
</script>
</head>
<body>
<form id="checkboxes">
<input type="checkbox" name="checkboxa" onclick="ToggleSwitch(this, 'checkboxb')" />1
<input type="checkbox" name="checkboxb" disabled="true" />2
</form>
</body>
<html>

For radio input type onclick event not working inside form tag

I got stuck to what I think is silly. But now I have tried every combination but not able to find out what is going on.
onclick inside input type radio is not working when I put input type inside a form. But when I delete form tag it works. Also I have seen a code where onclick work inside a form tag but not working when I write.
This is not working:
<html>
<head>
<script>
function action(str){
document.getElementById("test1").innerHTML=str
}
</script>
</head>
<body>
<form>
<input type="radio" value="ping" name="rb" onclick="action(this.value)">Ping
<input type="radio" value="card" name="rb" onclick="action(this.value)">Card
<input type="radio" value="temp" name="rb" onclick="action(this.value)">Temprature
<p id="test1">radio will be displayed here</p>
</form>
</body>
</html>
When I remove form it works.

change the name of your function action
try this :
<html>
<head>
<script type="text/javascript">
function action123(str){
document.getElementById("test1").innerHTML=str
}
</script>
</head>
<body>
<form>
<input type="radio" value="ping" name="rb" onclick="action123(this.value);">Ping
<input type="radio" value="card" name="rb" onclick="action123(this.value);">Card
<input type="radio" value="temp" name="rb" onclick="action123(this.value);">Temprature
<p id="test1">radio will be displayed here</p>
</form>
</body>
</html>

You shouldn't use inline event functions anymore. Use event listeners:
radios = document.getElementsByName("rb");
for(i=0; i<radios.length; i++) {
radios[i].addEventListener('click', function(e){
document.getElementById("test1").innerHTML = e.target.value;
});
}
JSFiddle

"action" seems to be a blocked namesspace for forms
try sth like
<script>
function otherName(str){
document.getElementById("test1").innerHTML=str;
}
</script>
<form name="form">
<input type="radio" value="ping" name="rb" onclick="otherName(this.value)" />Ping
<input type="radio" value="card" name="rb" onclick="otherName(this.value)" />Card
<input type="radio" value="temp" name="rb" onclick="otherName(this.value)" />Temprature
<p id="test1">radio will be displayed here</p>
</form>
http://jsfiddle.net/waeqT/

Validate HTML using Javascript

I have the following code; I want to make sure that submit does not actually post to the page specified by action unless one of the two radio inputs has been selected. I have tried multiple variations of this and other code, and cannot seem to figure out whats wrong. Whether the radio buttons are selected or not it still posts to somepage.py.
<html>
<head>
<title>
Test Page
</title>
<script language="JavaScript">
function validate(formEntry) {
if (formEntry.Q1.q11.checked != true && formEntry.Q1.q12.checked != true)
return false;
return true;
}
</script>
</head>
<body>
<form action="somepage.py" method="POST" onsubmit="return validate(this);">
<input type="radio" name="Q1" id="q11" value="1" />
<input type="radio" name="Q1" id="q12" value="2" />
<input type="submit" name="Submit" />
</form>
</body>
</html>

If you make one button checked by defualt, then one will always be checked:
<input type="radio" name="Q1" id="q11" value="1" checked>
<input type="radio" name="Q1" id="q12" value="2" >
Or the function can be simply:
function validate(formEntry) {
return formEntry.Q1[0].checked || formEntry.Q1[1].checked ;
}
if either is checked it will return true, otherwise false.

if (!formEntry.Q1[0].checked && !formEntry.Q1[1].checked)
Trying to access input by form_name.input_name.input_id is really strange.

Use jquery validation. Checkout this link for details
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Demo page here:
http://jquery.bassistance.de/validate/demo/

It seems to work, look at:
http://jsfiddle.net/EEgea/
Maybe you'd better use a framework like JQuery to prevent javascript flaws between different browsers
Or use a validation framework like JQuery validation, I highly recommend that.

try your function like :-
function validate(formEntry) {
var radiobtn=document.getElementsByName('Q1');
if(!(radiobtn[0].checked || radiobtn[1].checked))
return false;
return true;
}