In Area 1, when I checked checkbox bbbbbb or checkbox cccccc
input will disable , it's not work
But in Area 2 it's OK
Why Area1 function not work ?
thank you.
Area 1
<br>
<input type="text" id="a" name="a">
<br>
<input type="checkbox" id="b" name="b"/> bbbbbb
<br>
<input type="checkbox" id="c" name="c"/> cccccc
</div>
<script type="text/javascript">
window.onload=function(){
document.getElementById('b').onchange = function () {
document.getElementById('c').checked = false;
document.getElementById('a').disabled = this.checked;
};
document.getElementById('c').onchange = function () {
document.getElementById('b').checked = false;
document.getElementById('a').disabled = this.checked;
};
}
</script>
<br>
<br>
<br>
<br>
<br>
Area 2
<br>
<input type="text" id="1" name="1">
<br>
<input type="checkbox" id="2" name="2"/> 222222
<br>
<input type="checkbox" id="3" name="3"/> 333333
</div>
<script type="text/javascript">
window.onload=function(){
document.getElementById('2').onchange = function () {
document.getElementById('3').checked = false;
document.getElementById('1').disabled = this.checked;
};
document.getElementById('3').onchange = function () {
document.getElementById('2').checked = false;
document.getElementById('1').disabled = this.checked;
};
}
</script>
The second window.onload is overriding the first one.
Why Area1 function not work ?
Because you are overwriting window.onload with a new function. Only the function that you assigned last will be executed on page load.
That's one of the reasons why to use addEventListener to bind event handlers:
window.addEventListener('load', function() {
// ..
});
This allows you to bind multiple handlers to the same element.
There are a couple of alternatives:
Aggregate both functions into one.
Create the functions explicitly and call both in the event handler. E.g.
function area1() { ... }
function area2() { ... }
window.onload = function() {
area1();
area2();
};
Don't use window.onload at all. Since you already placed the code after the elements in the document, you don't need window.onload. You can run the code directly, e.g.
Area 1
<br>
<input type="text" id="a" name="a">
<br>
<input type="checkbox" id="b" name="b"/> bbbbbb
<br>
<input type="checkbox" id="c" name="c"/> cccccc
</div>
<script type="text/javascript">
document.getElementById('b').onchange = function () {
document.getElementById('c').checked = false;
document.getElementById('a').disabled = this.checked;
};
document.getElementById('c').onchange = function () {
document.getElementById('b').checked = false;
document.getElementById('a').disabled = this.checked;
};
</script>
I recommend to read the excellent articles about event handling on quirksmode.org. The explain all the different ways of how to bind event handlers.
You can't have the window.onload=function(){ function twice, it can only be declared once. If you declare it twice, it will choose one of them to work when the window is loaded. Use this instead:
Area 1
<br>
<input type="text" id="a" name="a">
<br>
<input type="checkbox" id="b" name="b"/> bbbbbb
<br>
<input type="checkbox" id="c" name="c"/> cccccc
</div>
<br>
<br>
<br>
<br>
<br>
Area 2
<br>
<input type="text" id="1" name="1">
<br>
<input type="checkbox" id="2" name="2"/> 222222
<br>
<input type="checkbox" id="3" name="3"/> 333333
<script type="text/javascript">
window.onload=function(){
document.getElementById('b').onchange = function () {
document.getElementById('c').checked = false;
document.getElementById('a').disabled = this.checked;
};
document.getElementById('c').onchange = function () {
document.getElementById('b').checked = false;
document.getElementById('a').disabled = this.checked;
};
document.getElementById('2').onchange = function () {
document.getElementById('3').checked = false;
document.getElementById('1').disabled = this.checked;
};
document.getElementById('3').onchange = function () {
document.getElementById('2').checked = false;
document.getElementById('1').disabled = this.checked;
};
}
</script>
Related
I know this has been asked a few times but I haven't seen any posts regarding the use of the labels. The code below works for deselecting a radio button when no labels are written.
How can I add labels which allow the radio buttons to be selected/deselected with the clicking of the words rather than just the radio button itself. When I add labels my code seems to go haywire.
This is the working snippet with spans instead of labels
document.getElementsByName('foo').forEach((radioBttn) => {
radioBttn.addEventListener('click', function first() {
if (this.checked) {
this.onclick = function second() {
this.checked = false;
};
} else {
this.onclick = null;
}
});
});
document.getElementsByName('bar').forEach((radioBttn) => {
radioBttn.addEventListener('click', function first() {
if (this.checked) {
this.onclick = function second() {
this.checked = false;
};
} else {
this.onclick = null;
}
});
});
<span class="foo">
<input type="radio" name="foo"> Foo</span>
<span class="bar">
<input type="radio" name="bar"> Bar</span>
<br>
<span class="foo">
<input type="radio" name="foo"> Foo</span>
<span class="bar">
<input type="radio" name="bar"> Bar</span>
<br>
<span class="foo">
<input type="radio" name="foo"> Foo</span>
<span class="bar">
<input type="radio" name="bar"> Bar</span>
This is the non-working snippet with labels instead of spans
document.getElementsByName('foo').forEach((radioBttn) => {
radioBttn.addEventListener('mousedown', function first() {
if (this.checked) {
this.onclick = function second() {
this.checked = false;
};
} else {
this.onclick = null;
}
});
});
document.getElementsByName('bar').forEach((radioBttn) => {
radioBttn.addEventListener('mousedown', function first() {
if (this.checked) {
this.onclick = function second() {
this.checked = false;
};
} else {
this.onclick = null;
}
});
});
<label class="foo" for="foo1">
<input type="radio" name="foo" id="foo1">Foo</label>
<label class="bar" for="bar1">
<input type="radio" name="bar" id="bar1">Bar</label>
<br>
<label class="foo" for="foo2">
<input type="radio" name="foo" id="foo2">Foo</label>
<label class="bar" for="bar2">
<input type="radio" name="bar" id="bar2">Bar</label>
<br>
<label class="foo" for="foo3">
<input type="radio" name="foo" id="foo3">Foo</label>
<label class="bar" for="bar3">
<input type="radio" name="bar" id="bar3">Bar</label>
I have created a radio button which says "no" and "yes". By default, nothing is selected.
So what I'm looking to do here is, if someone select no, nothing happens, but if someone select "Yes" It should print a text below saying hello world.
Can someone help?
<input type="radio" value="no-charge">
No
<input type="radio" value="charge">
Yes
You need to set up event listeners for clicks on the radio buttons. When either is clicked, you need to check the value of the checked button. When it's "yes", set your message to "hello world", and blank when it's "no":
var radioY = document.getElementById("radioY");
var msg = document.getElementById("msg");
var radioQuery = document.getElementsByName("query");
function start() {
radioQuery[0].addEventListener("click", checkClicked);
radioQuery[1].addEventListener("click", checkClicked);
}
//
function checkClicked() {
for (var x = 0; x < radioQuery.length; x++) {
if (radioQuery[x].checked && radioQuery[x].value == "yes") {
msg.innerHTML = "Hello World";
return;
} else {
msg.innerHTML = "";
}
}
}
//
window.load = start();
<input name="query" value="no" type="radio"> No
<input name="query" value="yes" id="radioY" type="radio"> Yes
<div id="msg"></div>
Here's a jQuery solution you might prefer:
$(document).ready(function() {
$("#radioY").click(function() {
$("#msg").text("Hello World!");
});
$("#radioN").click(function() {
$("#msg").text("");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='radio' id='radioN' name='query' value='no' /> No
<input type='radio' id='radioY' name='query' value='yes' /> Yes
<div id="msg"></div>
Just add an event listener for click to the related element:
Javascript solution:
document.querySelector('input[value="charge"]').addEventListener("click", function()
{
document.getElementById("someId").innerHTML += "HELLO WORLD!<br>";
});
<input type="radio" name="myRadio" value="no-charge">
No
<input type="radio" name="myRadio" value="charge">
Yes
<p id="someId"></p>
JQuery solution:
$('input[value="charge"]').click(function()
{
$("#someId").html($("#someId").html() + "HELLO WORLD!<br>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="myRadio" value="no-charge">
No
<input type="radio" name="myRadio" value="charge">
Yes
<p id="someId"></p>
Add an event listener like so:
document.getElementById("yes").addEventListener("click", () => console.log("Hello world!"));
<form>
<input type="radio" value="no-charge"> No
<input type="radio" value="charge" id="yes"> Yes
</form>
1.Way
let radio_1 = document.getElementById("radio_1")
radio_1.addEventListener("click",function(){
alert("hello world")
})
<input type="radio" value="no-charge" id="radio_1">
<input type="radio" value="charge" id="radio_2">
2.Way
function myAlert(){
alert("hello world")
}
<input type="radio" value="no-charge" onclick=myAlert()>
<input type="radio" value="charge" id="radio_2">
3.Way
$("#radio_1").click(function(){
alert("hello world")
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" value="no-charge" id=radio_1>
<input type="radio" value="charge" id="radio_2">
function onChange(event) {
var x = document.getElementById("hello-world");
console.log(event.target.value);
if(event.target.value === "yes"){
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<input type="radio" name="group" value="no" onchange="onChange(event);">
No
<input type="radio" name="group" value="yes" onchange="onChange(event);">
Yes
<div id="hello-world" style="display:none">Hello World</div>
<input name="query" value="yes" id="radioY" type="checkbox"> Yes
<div id="msg"></div>
<script>
var radioY = document.getElementById("radioY");
var msg = document.getElementById("msg");
var radioQuery = document.getElementsByName("query");
function start() {
radioQuery[0].addEventListener("click", checkClicked);
radioQuery[1].addEventListener("click", checkClicked);
}
//
function checkClicked() {
for (var x = 0; x < radioQuery.length; x++) {
if (radioQuery[x].checked && radioQuery[x].value == "yes") {
msg.innerHTML = "Hello World";
return;
} else {
msg.innerHTML = "";
}
}
}
//
window.load = start();
</script>
Sorry, now I have another problem: if the checkbox is unchecked I want the file on record to stay but every time after submit the file is getting erased from the database. Can someone help please? My code is at [JSFiddle] (jsfiddle.net/sc6ksu0m/87) 87
I found a solution to my problem. I do not know if this the best solution but it is working the way I want.
Here is the code:
HTML CODE:
Abstract:
<br>
<input name="abstract" type="text" size="40" class="style5" value="<? echo "$info[abstract]";?>"/ >
<label>
<input type="checkbox" id="confirm">
</label>
<input name="abstract" type="file" id="abstract" size="30" class="style5" disabled / onchange="ValidateSingleInput(this);">
<br>
<span class="formnotes">(Current value)</span> <br>
<br>
Previous Paper or Poster:
<br>
<input name="poster" type="text" size="40" class="style5" value="<? echo "$info[poster]";?>"/>
<label>
<input type="checkbox" id="confirmp">
</label>
<input name="poster" type="file" id="poster" size="30" class="style5" disabled / onchange="ValidateSingleInput(this);">
<br>
<span class="formnotes">(Current value)</span>
<br>
Resume:
<br>
<input name="resume" type="text" size="40" class="style5" value="<? echo "$info[resume]";?>"/>
<label>
<input type="checkbox" id="confirmr">
</label>
<input name="resume" type="file" id="resume" size="30" class="style5" disabled / onchange="ValidateSingleInput(this);">
<br>
<span class="formnotes">(Current value)</span> <br>
And here is JavaScrip Code:
<script language="JavaScript">
window.onload = function() {
var checker = document.getElementById('confirm');
var sbm_abstract = document.getElementById('abstract');
var checkerp = document.getElementById('confirmp');
var sbm_poster = document.getElementById('poster');
var checkerr = document.getElementById('confirmr');
var sbm_resume = document.getElementById('resume');
checker.onchange = function () {
if(this.checked) {
sbm_abstract.disabled = false;
}
else {
sbm_abstract.disabled = true;
}
} ;
checkerp.onchange = function () {
if(this.checked) {
sbm_poster.disabled = false;
}
else {
sbm_poster.disabled = true;
}
};
checkerr.onchange = function () {
if(this.checked) {
sbm_resume.disabled = false;
}
else {
sbm_resume.disabled = true;
}
};
}; </script>
I'm trying to input the value of the checked radio button as one of a functions parameres (here sign). This is my code:
<!DOCTYPE html>
<html>
<head>
<script src="proj4js/lib/proj4js/lib/proj4js-compressed.js"></script>
</head>
<body>
<script>
function func1 (x,y, sign){
var z=(x+y)*sign
document.getElementById("Z").innerHTML = z;
}
</script>
<form >
first input:<br>
<input id="Y" type="text" y="Y" value=85>
<br>
second input:<br>
<input id="X" type="text" x="X" value=15>
<br>
<input type="radio" name="hem" value=1 id = "N" >north
<input type="radio" name="hem" value=-1 id = "S" >south
The Answer:<br>
<input id="Z" type="text" z="Z" >
<br><br>
</form>
<button type="button" onclick="func1(Number(document.getElementById('X').value),Number(document.getElementById('Y').value), ?? )"> try it </button>
I don't know what to put instead of ?? ? The sign determines if sign is positive or negative.
make input elements as
<form id="demoForm">
first input:<br>
<input id="Y" type="text" value=85>
<br>
second input:<br>
<input id="X" type="text" value=15>
<input type="radio" name="hem" value="1" id="N" >north
<input type="radio" name="hem" value="-1" id ="S" >south
The Answer:<br>
<input id="Z" type="text" z="Z" >
</form>
<script>
function getRadioVal(form, name) {
var val;
// get list of radio buttons with specified name
var radios = form.elements[name];
// loop through list of radio buttons
for (var i=0, len=radios.length; i<len; i++) {
if ( radios[i].checked ) { // radio checked?
val = radios[i].value; // if so, hold its value in val
break; // and break out of for loop
}
}
return val; // return value of checked radio or undefined if none checked
}
var val = getRadioVal( document.getElementById('demoForm'), 'hem' );
alert(val); //you can pass this value as parameter
</script>
The simple way would be to write a helper function to collect your paramters and then call your function from this function.
You could use jQuery to get the value of the checked
$('input[name=hem]:checked').val()
Just need to make sure that the form you're using has an id. Then you wouldn't have to pass to the function just get the value directly from the form in your function.
<script>
function func1 (x,y){
var sign = $('input[name=hem]:checked').val();
var z=(x+y)*sign;
document.getElementById("Z").innerHTML = z;
}
</script>
<!DOCTYPE html>
<html>
<head>
<!--
<script src="proj4js/lib/proj4js/lib/proj4js-compressed.js"></script>
-->
</head>
<body>
<form >
first input:<br>
<input id="Y" type="text" y="Y" value=85>
<br>
second input:<br>
<input id="X" type="text" x="X" value=15>
<br>
<input type="radio" name="hem" value="1" id="N" >north</input>
<input type="radio" name="hem" value="-1" id="S" >south </input>
The Answer:<br>
<input id="Z" type="text" z="Z" >
<br><br>
</form>
<button type="button" onclick="func1(Number(document.getElementById('X').value),Number(document.getElementById('Y').value), getAppropriateValue() )"> try it </button>
<script>
function func1 (x,y, sign){
var z=(x+y)*sign
document.getElementById("Z").value = z;
}
function getAppropriateValue(){
var result = 0;
var checkboxN = document.getElementById('N');
var checkboxS = document.getElementById('S');
if(checkboxN && checkboxN.checked) result = 1;
if(checkboxS && checkboxS.checked) result = -1;
return result;
}
</script>
You can entirely take off third param and can output sign based on radio checked property.
<script>
function func1 (x,y) {
var z=(x+y);
if(document.getElementById("N").checked) {
z= z*1;
}elseif(document.getElementById("N").checked) {
z=z*-1;
}
document.getElementById("Z").value = z;
}
</script>
For instance, radiobutton one = value 1, radiobutton two = value 2.
Here is the code I have:
Script file:
<script type="text/javascript">
$(document).ready(function () {
$("div[data-role='footer']").prepend('Back');
$(".Next").click(function () {
$.mobile.changePage("#" + $("#Answer").val());
});
$("input[type=radio]").click(function () {
var answer = $(this).val();
$("#Answer").val(answer);
});
$('.Answer').live("click", function () {
var NextQuestionID = $(this).attr('NextQuestionId');
if (NextQuestionID == '') {
location.href = "/Surveys/Index";
}
$("#survey").load('/Questions/GetQuestion', { Id: NextQuestionID }, function () {
$('#answerInput').textinput();
$(".Answer").button();
});
});
});
and here is my markup:
<input type="radio" name="Answer" id="radio-choice-1" value="Question2" />
<input id="Answer" class="Answer" type="hidden" value="first" />
<div class="innerspacer">
Next
</div>
How do I assign the radio button as value from 1 to 4 and sum up the value for all the question?
There is a lot going on in your question and it is unclear what you want. I'm taking a guess and assuming you have a say 5 radio buttons and you want the 5th radio button value to be the sum of the other 4 values. Is that correct?
Here is an example of doing that: jsfiddle
HTML:
<div id="container">
<label>
<input type="radio" name="something" value="1">
A?
</label>
<label>
<input type="radio" name="something" value="3">
B?
</label>
<label>
<input type="radio" name="something" value="5">
C?
</label>
<label>
<input type="radio" name="something" value="">
All?
</label>
</div>
JavaScript:
$(document).ready(function() {
var choices = $('input[name="something"]');
var total = 0;
choices.each(function() {
var choice = $(this);
var value = parseInt(choice.val(), 10);
if (!isNaN(value)) {
total += value;
}
});
choices.filter(':last').val(total);
});
You will need to adapt this to your HTML.