This question already has answers here:
How to get the selected radio button’s value?
(19 answers)
Closed 8 years ago.
undefined output!! am i missing sth ? any idea ?
here is the radio button inputs :
<tr>
<td>Yes <input type="radio" name="email" id="email" value="yes"/></td>
<td></td>
<td>No <input type="radio" name="email" id="email" value="no"checked="checked"/></td>
</tr>
<input type="button" value="submit" onclick="doIt()" style="width: 150px; height:30px" />
<script type="text/javascript" language="javascript">
function doIt() {
var emailopt = document.getElementById('email').checked.value;
alert (emailopt);
}
The way you have tried is completely wrong. Instead use the below approach
1) Iterate through all the radio buttons with name property
2) Now using checked attribute, place an if statement and then extract the value
function doIt() {
var emailopt = document.getElementsByName('email');
for (i = 0; i < emailopt.length; i++) {
if (emailopt[i].checked) {
alert(emailopt[i].value)
}
}
}
Fiddle
Try using this:
function doIt() {
var emailopt = document.getElementById('email').checked;
alert (emailopt);
}
It will return true and false.
Lets me know if you have any questions.I hope it will help you.
Related
This question already has answers here:
Check/Uncheck checkbox with JavaScript
(12 answers)
Closed 7 months ago.
I have parent element like:
<span style="background: yellow; padding: 50px;" onClick="setCheckBox()"><span>
<span> </span> <input type="checkbox" name="f01" value="100"></span></span>
and js function:
function setCheckBox() {
document.getElementsByTagName('input'[0].checked = 'true';
}
Want to change the checkbox input on parent click (yellow color)
Thanks in advance!
you would use .checked = true; like so
document.getElementsByTagName('input')[0].checked = true;
<input type="checkbox" name="f01" value="100">
This question already has answers here:
How to check/uncheck radio button on click?
(22 answers)
Closed 1 year ago.
I don't understand why my radio button will, un-check, then check, but won't turn back off again. Can someone please help explain this? Here's my HTML:
$('#member').click(() => {
if ($('#member').attr('checked')) {
$('#member').removeAttr('checked')
$('#member').prop('checked', false)
} else {
/* $('#member').attr('checked') */
$('#member').prop('checked', true)
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="member" name="member" value="member" checked>
<label for="member">Member Reported</label><br>
You just add the checked attribute back again like below
$('#member').attr('checked','checked');
$('#member').click(() => {
if($('#member').attr('checked')) {
$('#member').removeAttr('checked')
$('#member').prop('checked',false)
} else {
$('#member').attr('checked','checked');
$('#member').prop('checked',true);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="radio" id="member" name="member" value="member" checked>
<label for="member" >Member Reported</label><br>
It is bad idea to use single radio button. Radio buttons are meant to be used in groups, as defined by their sharing the same name attribute.
You can use checkbox for the purpose.
But if you insist on to know why your code works only for first time, the answer is:
After first click else part of your code always run because you never set $('#member').attr('checked','checked'); in else part.
This question already has answers here:
How to select empty inputs (value="") using jQuery
(7 answers)
Closed 6 years ago.
I am trying to get an empty input if there is one in my div using jQuery. It is not working as it should.
There are 4 empty inputs in the div.
Here is my jquery:
var firstEmpty = $('#brochureItems').find('input:text:not(:checkbox,:button):visible:first:enabled[value= ""]').first().val();
console.log(firstEmpty);
That outputs 'undefined'.
When I remove the "[value=""]", I get '(an empty string)' outputted.
I just thought of something, I am adding those inputs in dynamically with jquery on page load. Would that have something to do with it?
If I understood you right you want to get all empty inputs inside a div. To do so, try this code:
HTML
<div>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text" value="asdsad">
</div>
JS
var firstEmpty = $("div input[type='text']").filter(function() { return $(this).val() == ""; });
or if you want take all empty:
var emptyInputs = [];
$("div input[type='text']").each(function(){
if($(this).val() == '')
emptyInputs.push($(this))
});
Here is working Fiddle: https://jsfiddle.net/xs9jagc8/
Try this:
function findEmpty(){
var div=document.getElementById('theDivID');
for(var i=0;i<div.children.length;i++){
if(div.children[i].value==''){
return div.children[i].id;
}
}
return false;
}
function verify(){
var lol = findEmpty();
if(lol===false){
//Do whatever
alert("All filled!");
} else {
alert("The first empty input is: "+lol);
}
}
<div id='theDivID'>
<input id='blah' type='text'/>
<input id='bleh' type='text'/>
<input id='qwertyuiop' type='text'/>
<input type='text'/>
</div>
<input type='button' onclick='verify();' value='Check'/>
This question already has answers here:
Can I make a <button> not submit a form?
(8 answers)
Closed 6 years ago.
I try to make a calculator with javascript with the onclick event I want the value of the button to convert an input text box.
When I write the code the value of the button briefly in the text box , but it disappears instantly.
The code that i use can you find below this text, what am i doing wrong.
HTML:
var iGetal = 0;
function GetalRekenmachine()
{
iGetal = iGetal + 1;
document.getElementById("Display").value = iGetal;
}
<button id="Cijfer7" value="7" onclick="GetalRekenmachine()">7</button>
<input type="text" id="Display"/>
Because the default type of a button is submit. So either cancel the click action or set the type to be button.
<button id="Cijfer7" value="7" onclick="GetalRekenmachine(); return false;">7</button>
or
<button type="button" id="Cijfer7" value="7" onclick="GetalRekenmachine()">7</button>
var iGetal = 0;
function GetalRekenmachine(event)
{
iGetal = iGetal + 1;
document.getElementById("Display").value = iGetal;
event.preventDefault()
}
<button id="Cijfer7" value="7" onclick="GetalRekenmachine()">7</button>
<input type="text" id="Display"/>
This question already has answers here:
Radio Button and an Input field
(3 answers)
Closed 8 years ago.
im trying to activate/disable a textinput by activating/disabling a radio button.
html:
<input name="test" type="radio" value="one" onclick="activate();"/>
<input class="" name="info" type="text" size="5" maxlength="5" disabled>
<input name="test" type="radio" value="two""/>
javascript:
function activate(){
document.forms[0].info.disabled = !document.forms[0].test[0].checked;
}
when u activate the 1st radio button, the input text should be activated. when u activate 2nd button, it should be disabled.
but this code doesnt work. does anyone know better?
You need to run the activate function again when the other radio button is clicked.
Try this:
window.onload=function() {
var rad = document.getElementsByName("test");
for (var i=0;i<rad.length;i++) {
rad[i].onclick=function() {
this.form.info.disabled=this.value!="one";
}
}