<input id="firstLocation" type="radio" />
<label for="firstLocation">text</label>
<input id="secondLocation" type="radio" />
<label for="secondLocation">text</label>
<input class="cityName" id="locationName" type="text" value="" />
So basically, this is my html. What I want to do now, is to use JavaScript, not jQuery, to clear the text input field (if something had previously been entered) whenever the radio buttons are clicked and to uncheck the radio buttons whenever someone clicks onto the text field. I quickly found a jQuery solution, but got the task to use JavaScript instead. As I'm not having very much experience with JS, I can't wrap my head around it to get it to work.
Any thoughts?
Would appreciate very much.
You can use .querySelectorAll() and .querySelector() in order to find the elemnts and .addEventListener() to attach the event handlers:
document.querySelectorAll('#firstLocation, #secondLocation').forEach(function(ele, idx) {
ele.addEventListener('change', function(e) {
document.querySelector('#locationName').value = '';
});
});
document.querySelector('#locationName').addEventListener('input', function(e) {
document.querySelectorAll('#firstLocation, #secondLocation').forEach(function(ele, idx) {
ele.checked=false;
});
})
<input id="firstLocation" type="radio" />
<label for="firstLocation">text</label>
<input id="secondLocation" type="radio" />
<label for="secondLocation">text</label>
<input class="cityName" id="locationName" type="text" value="" />
Related
I am new in coding. I have two radio buttons. If a “yes” is selected in either from them a certain field (here kouAP) must be AUTOMATICALLY set to a value (in this case 0.56). The problems are:
how to make both radio buttons to set the value to a single field?
How to keep the wished value if one of the is “yes” and the other is “no”? No matter of the order of clicking.
My JQuery makes no sense :(
Thanks you
HTML
<label for="Pre002">ccs</lable>
<br />
<input type="radio" id="Pre002o" name="css" value="0">
<label for="Pre002o">none</label>
<input type="radio" id="Pre002d" name="css" value="4">
<label for="Pre002d">yes</label>
<br />
<label for="Pre066">mi</lable>
<br />
<input type="radio" id="Pre066a" name="mi" value="0">
<label for="Pre066a">yes</label>
<input type="radio" id="Pre066b" name="mi" value="1">
<label for="Pre066b">no</label>
<br />
<input id="kouAP" type=“text” name="kouAP" readonly="true" placeholder="kouAP">
<label for="kouAP">at least one yes</label>
JQuery
$('input[type=radio].css; input[type=radio].mi').click(function(e){
if ($(this).attr("id") == "Pre002d" || $(this).attr("id") == "Pre066a" ){
$("#kouAP").val(0.5677075);
}
else {
$("#kouAP").val(0);
}
});
There is nothing wrong with code.
Just provide the name of the element you listen the click from.
Replace:
$('input[type=radio].css; input[type=radio].mi').click(...);
With:
$('input').click(...);
or:
$('input[type=radio]').click(...);
to avoid future errors.
I just advice you to go through the basics again :)
EDIT
For the second question, I guess it's just a work around with if..else. Hope it helps.
$('input').click(function(e){
if ($('#Pre002d').is(':checked') || $('#Pre066a').is(':checked')){
$("#kouAP").val(0.5677075);
}
else{
$("#kouAP").val(0);
}
});
I want to hide specific section of display i.e, onclick of a button. How can i achieve it with pure javascript. here is a piece of my code.
<input type="radio" name="fx" value="YES" onClick="other();hide();"> Yes
<input type="radio" name="fx" value="NO" checked> No
On selecting 'YES' in the radio button i want to hide/disable this input field:
<INPUT TYPE="number" id="ctc" NAME="fctc" value=0 required/>
You can add an event listener using javascript like this
document.getElementById("myBtn").addEventListener("click", hideElm);
and in hideElm function you can hide the element
function hideElm() {
document.getElementById("container").style.display = "none";
}
If you absolutely must, define a function to hide the element or assign a style that makes in invisible, like so https://jsfiddle.net/wfu9k0ck/
Otherwise take a look at event listeners. you assign a listener to an element, like
document.getElementById("yourButtonsId").addEventListener("click", functionToRemove);
when the button is clicked the eventListener fires the event, in this case functionToRemove
After doing some research i found the solution to hide the input field
function hide() {
var newHTML="<input type='hidden' name='ctc' value='0'>";
document.getElementById("ctc").innerHTML = newHTML;
}
<input type="radio" name="fx" value="YES" onClick="hide();"> Yes
<input type="radio" name="fx" value="NO" checked> No
<p id="ctc"> <INPUT TYPE="number" NAME="ctc" value=0 required/></p>
I'm not so familiar with Javascript and I know this to be a very easy question, but I can't figure out where I'm going wrong.
I'm trying to disable two input fields unless a radio button with the id "custom" is selected.
HTML
<input type="radio" name="period" value="week" /> Weekly
<input type="radio" name="period" value="fortnight" /> Fortnightly
<input type="radio" name="period" value="month" /> Monthly
<input type="radio" name="period" value="quarter" /> Quarterly
<input type="radio" name="period" value="year" /> Annually
<input type="radio" name="period" id="custom" value="one-time" onchange="datedis()"/
<input type="date" name="from" disabled /> to <input type="date" name="to" disabled />
Javascript
function datedis() {
if(document.getElementsById("custom").checked) {
document.getElementsByName("from").disabled = false;
document.getElementsByName("to").disabled = false;
} else {
document.getElementsByName("from").disabled = true;
document.getElementsByName("to").disabled = true;
}
}
Here is my code in JSFiddle.
Multiple issues:
Use onclick instead of onchange, and make sure to assign the event handler to all radio buttons, not just custom, otherwise clicking away from custom will not disable the input field.
See also: OnChange event handler for radio button (INPUT type="radio") doesn't work as one value
It's getElementById, not getElementsById.
There's no document.getElementByName.
In jsfiddle, define a function with window.foo = function() {...}, not function foo() {...} (because that code is embedded in onload).
FYC: http://jsfiddle.net/MEsGH/
<input type="radio" name="animal" id="cat" value="Cat" />
<label for="cat">Cat</label>
<input type="radio" name="animal" id="radio-choice-2" value="choice-2"/>
<label for="radio-choice-2">Dog</label>
<input type="radio" name="animal" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="animal" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
<input type="button" value="Get Radio Button Value" onclick="getValue();"
I want to get the value of selected Radio Button on click of button I had written the code
function getValue () {
alert("Value is :"+$('input[name=animal]:checked').val());
}
But its not working and getting Undefined
Update:
I have used js of Jquery and jquerymobile
for jquery its for fine but as i am using it for mobile app so i need both the js library so in second case it didnot work.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
[Solved]
Hi I think you are getting the value without checking any radio button.
Load your page then select any one of radio button and then call getValue function
Alternatively you can put any radio button selected by default.
e.g.
replace first radio button with
<input type="radio" name="animal" id="cat" value="Cat" checked="true"/>
<label for="cat">Cat</label>
Try this
$("#myform input[type='radio']:checked").val();
OR
var myRadio = $('input[name=myRadio]');
//Use the filter() function, not find(). (find() is for locating child elements, whereas //filter() searches top-level elements in your selection.)
var checkedValue = myRadio.filter(':checked').val();
I have some test code here
<input type="radio" name="group1">1
<input type="radio" name="group1">2
<input type="radio" name="group1">3
<br>
<input type="text" name="text1">
<br>
<input type="radio" name="group2">1
<input type="radio" name="group2">2
<input type="radio" name="group2">3
<br>
<input disabled type="submit">
Please can you tell me if there is a way to watch multiple fields so that if their values changes i can enable a button..
So in short instead of having 3 .change rules watching each other... can't i do one piece of code that watches all 3 and if the values equals a particular something it enables the submit button ?
Thanks
Lee
$(':radio').change(function() {
if ($(this).attr('name') == 'group2')
$(':submit').removeAttr('disabled');
});
You can use the click event hander. For e.g.:
$(":radio[name='group1'],:radio[name='group2'],:radio[name='group3']").live("click",function(){
//do something
});
if i correct understood ur question, here it is:
set classes (for less JS code):
<input type="radio" class="g1-1" name="group1">1
<input type="radio" class="g1-2" name="group1">2
<input type="radio" class="g1-3" name="group1">3
<br>
<input type="text" class="text" name="text1">
<br>
<input type="radio" class="g2-1" name="group2">1
<input type="radio" class="g2-2" name="group2">2
<input type="radio" class="g2-3" name="group2">3
<br>
<input disabled type="submit">
JS:
$(function(){
$('input').click( function(){
if ( ($('.g1-2').is(':checked')) && ($('.g2-1').is(':checked')) && ($('.text').val()=="ok" ))
{
// event
}
});
});
Sounds like a candidate for http://knockoutjs.com/ - You associate DOM elements with a client-side view model. When the data model's state changes, the UI updates automatically.
If your jQuery selector matches more than one element, when you bind a callback function to an event, that function will be bound to all the elements the selector matches.
Example:
$('input[type="radio"]').change(function() {
$('body').append('changed');
});
See a working fiddle here