How to hide a input element of a webpage using onclick() function - javascript

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>

Related

Clear textbox and radio buttons onclick with Javascript

<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="" />

on button click show Radio button value is not working when radio value is changed

I am using following on button click inline javascript to show Radio button value. But it is always showing English even if i change the value
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="English" checked="checked">English
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="Tamil">Tamil
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="Hindi">Hindi</div><br>
<input type="button" class="button5" value="Continue" onclick="alert(document.getElementById('LanguageSelect').value);" />
my requirement is, need to show which radio is selected !
Please change the IDs of the element, and then depending on the value, show an element.
Otherwise, DOM cannot do that on itself.
Solution
Remove the id="LanguageSelect" from the HTML, because even if some other is checked, the current element will still have the id property. Here is the example of your code:
Here is the fiddle where I tested your code: http://jsfiddle.net/afzaal_ahmad_zeeshan/q25ba/
So, once you remove that, you'll get the problem fixed.
When you're selecting the value, it will look up for the first element, it will have the value of English, and will alert!
You can either use jQuery or check for the checkness of the elements:
jQuery
$('input[type=radio]:checked').val(); // check for the checked radio
This is easy and simple! I would recommend you this.
However, if you want to get the value of the radio buttons using JavaScript, try this:
JavaScript
/* this event to get triggered on click */
function checkCheckness () {
var radioButton = document.getElementsByName("LanguageSelect");
/* always remember, name should be similar, ID MUST NEVER be similar
* using similar ID among different elements is illegal in HTML */
if(radioButton[0].checked) {
alert(radioButton[0].value);
}
/* add some else statements */
}
If you have only three options, the following solution would be reasonable:
<input type="radio" name="LanguageSelect" id="LanguageSelect1" value="English" checked="checked">English
<input type="radio" name="LanguageSelect" id="LanguageSelect2" value="Tamil">Tamil
<input type="radio" name="LanguageSelect" id="LanguageSelect3" value="Hindi">Hindi</div><br>
<input type="button" class="button5" value="Continue" onclick="alertValue()" />
and then in a script define the alertValue function.
alertValue = function(){
var language1 = document.getElementById('LanguageSelect1');
var language2 = document.getElementById('LanguageSelect2');
var language3 = document.getElementById('LanguageSelect3');
if(language1.checked)
alert(language1.value);
if(language2.checked)
alert(language2.value);
if(language3.checked)
alert(language3.value);
}
Check this one please Fiddle. I have tested there this solution.
If you don't have problem on selecting the elements with another way, then another approach would be the following:
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="English" checked="checked">English
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="Tamil">Tamil
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="Hindi">Hindi</div><br>
<input type="button" class="button5" value="Continue" onclick="alertValue()" />
and the corresponding js function:
alertValue = function(){
var radios = document.getElementsByTagName("input");
for (var i=0;i<radios.length;i++)
if (radios[i].checked)
alert(radios[i].value);
}
Check this one please FiddleV2. I have tested there this solution.
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="English" checked="checked">English
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="Tamil">Tamil
<input type="radio" name="LanguageSelect" id="LanguageSelect" value="Hindi">Hindi</div><br>
<input type="button" class="button5" value="Continue" onclick="clickable()" />
function clickable(){
var val=document.querySelector('input[name="LanguageSelect"]:checked').value;
alert(val);
}
i did it myself...
onclick='if(document.getElementById(\'LanguageSelect1\').checked==true)
{alert(document.getElementById(\'LanguageSelect1\').value);}
if(document.getElementById(\'LanguageSelect2\').checked==true)
{alert(document.getElementById(\'LanguageSelect2\').value);}
if((document.getElementById(\'LanguageSelect3\').checked==true)
{alert(document.getElementById(\'LanguageSelect3\').value);}'

How to disable input unless a radio button is clicked?

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/

Jquery watch certain fields for certain values

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

jQuery: how to print out the text label of radio buttons?

If the code is
<form>
<input type="radio" name="font"> Arial</input><br>
<input type="radio" name="font"> Times New Roman</input><br>
<input type="radio" name="font"> Monaco</input><br>
</form>
<script>
$('form input').each(function(i, e) {
alert($(this).text())
})
</script>
It shows 3 empty strings. How can it show the 3 names of fonts?
try it at: http://jsfiddle.net/bKhsp/3/
You can't have text inside an <input> tag - it's invalid HTML even though the browser will try to render it, if you want that you should use a <label> wrapper (which keeps the text clickable as well) like this:
<form>
<label><input type="radio" name="font" value="Arial"> Arial</label><br>
<label><input type="radio" name="font" value="Times New Roman"> Times New Roman</label><br>
<label><input type="radio" name="font" value="Monaco"> Monaco</label><br>
</form>
With a loop to match:
$('form input').each(function(i, e) {
alert($(this).parent().text()); //for the label text
alert($(this).val()); //for the input value
});
You can view the updated/working fiddle here. For postback reasons, you probably want a value on the inputs as well, so a value for font gets sent.
Inputs never have end tags, meaning to be correct, you'd have to have the following:
<form>
<input type="radio" name="font" /> Arial<br />
<input type="radio" name="font" /> Times New Roman<br />
<input type="radio" name="font" /> Monaco<br />
</form>
From there, you can take measures to tie the text with its respective radio button:
<form>
<input type="radio" name="font" id="fontArial"/><label for="fontArial">Arial</label><br />
<input type="radio" name="font" id="fontTimes"/><label for="fontTimes">Times New Roman</label><br />
<input type="radio" name="font" id="fontMonaco"/><label for="fontMonaco">Monaco</label><br />
</form>
<script type="text/javascript">
$('form label').each(function(i, e) {
alert($(this).text());
})
</script>
For grabbing the respective radio button from the label, simply take the for attribute for a selector id (for example this takes the value of a label's respective radio button):
$('#' + $(this).attr('for')).val();
The input element doesn't have a closing tag. Use a label around the radio button and text, then the text is clickable as it should be:
<form>
<label><input type="radio" name="font"/><span>Arial</span></label><br>
<label><input type="radio" name="font"/><span>Times New Roman</span></label><br>
<label><input type="radio" name="font"/><span>Monaco</span></label><br>
</form>
Putting the text in a span is a good idea, then you can target it separately so that you can style it with CSS.
Use the next function to reach the text from the input:
$('form input').each(function(i, e) {
alert($(this).next().text())
});
You should use a <label> element and specify the id of the input element in its for attribute, that way when you click on the text it will check the radio input for you. As Nick Craver mentioned, you can't have text nodes inside an input element.
You can use nextSibling to get the text node following an element, then access its nodeValue property for the text:
$('form input').each(function(i, e) {
alert(this.nextSibling.nodeValue);
});
This should also be more efficient than solutions that wrap this with jQuery. You can also use this.value to get the value without wrapping and calling .val().
Updated fiddle at http://jsfiddle.net/AndyE/bKhsp/6/.
The HTML markup is incorrect. Each option needs a value:
<form>
<input type="radio" name="font" value="Arial"> Arial <br>
<input type="radio" name="font" value="Times New Roman"> Times New Roman<br>
<input type="radio" name="font" value="Monaco"> Monaco<br>
</form>
Your jQuery can then look something like this (from memory):
$('form input').each(function(i, e) {
alert($(this).val());
})

Categories