I have 2 radio buttons. On selection of one I want to display 3 text boxes and hide it on selection of other.
Here is the code.
These are my 2 radio buttons.
<input type="radio" name="type"> Fresher
<input type="radio" name="type"> Experienced
On click of radio button experienced I want to display these 3 text box.
Company Name: <input type="text" hidden="true"/> <br/>
Designation: <input type="text" hidden="true"/> <br/>
Year_of_Experience: <input type="text" hidden="true"/> <br/>
Please help me out with javascript for this as new to it.
You could do this as follows. First change your HTML to this:
<input type="radio" name="type" value="Fresher"> Fresher
<input type="radio" name="type" value="Experienced"> Experienced
<div id="textboxes" style="display: none">
Company Name: <input type="text" hidden="true"/>
Designation: <input type="text" hidden="true"/>
Year_of_Experience: <input type="text" hidden="true"/>
</div>
What this code adds to your code is to have a value for the radio buttons. This allows us to make a selection based on which radio button was selected. Secondly, the input fields are grouped together in a <div> to allow for easy hiding of the three input fields. After you have modifief your HTML as such, include jQuery on your website and use this code:
$(function() {
$('input[name="type"]').on('click', function() {
if ($(this).val() == 'Experienced') {
$('#textboxes').show();
}
else {
$('#textboxes').hide();
}
});
});
You can see how this works using this JSFiddle: http://jsfiddle.net/pHsyj/
This is the best example.Try something like this.,this is a sort of example
$("input[type='radio']").change(function(){
if($(this).val()=="other")
{
$("#otherAnswer").show();
}
else
{
$("#otherAnswer").hide();
}
});
http://jsfiddle.net/Wc2GS/8/
I guess this would solve your probs
<input type="radio" name="type" id='frsradio'> Fresher
<input type="radio" name="type" id='expradio'> Experienced <br>
<input type="text" class='txbx' hidden="true"/> <br/>
<input type="text" class='txbx' hidden="true"/> <br/>
<input type="text" class='txbx' hidden="true"/> <br/>
$(function() {
$('#expradio').click(function() {
$('.txbx').attr('hidden',false);
});
$('#frsradio').click(function() {
$('.txbx').attr('hidden',true);
});
});
WORKING jsfiddle
See there is no unique identity available for your html elements, i just given this code by thinking in a generic manner.
Try,
$('input[name="type"]:eq(1)').change(function(){
$('input[type="text"]').toggle(this.checked);
});
<input type="radio" name="type" onClick ="radio"> Fresher
<input type="radio" name="type" onClick ="radio"> Experienced
on click of radio button experienced i want to display these 3 text box.
<input type="text" hidden="true" class="text"/> <br/>
<input type="text" hidden="true" class="text"/> <br/>
<input type="text" hidden="true" class="text"/> <br/>
and javascript:-
<script>
function radio()
{
var result = document.getElementsByClassName('text'").style.display="none";
}
</script>
Try this
<input type="radio" name="type" value="fresher"> Fresher
<input type="radio" name="type" value="exp"> Experienced
<br/>
<input class="box" type="text" hidden="true"/> <br/>
<input class="box" type="text" hidden="true"/> <br/>
<input class="box" type="text" hidden="true"/> <br/>
Script
$("input[type='radio']").on('change',function(){
if($(this).val() == "exp")
$('.box').show('slow');
else
$('.box').hide();
});
DEMO
Try this....
<input type="radio" name="type" id="fresh"> Fresher
<input type="radio" name="type" id="exp"> Experienced
<input type="text" class="hid" hidden="true"/> <br/>
<input type="text" class="hid" hidden="true"/> <br/>
<input type="text" class="hid" hidden="true"/> <br/>
$("#fresh").change(function(){
$('.hid').css("style","display:none");
});
$("#exp").change(function(){
$('.hid').css("style","display:block");
});
For default hide the text boxes In OnRender Complete Method you need hide the three textbox for that you put the below code.
$("#textbox 1").hide();
$("#textbox 2").hide();
$("#textbox 3").hide();
You need to write the code in Radio button on change.
Using the Id get the value of radio button
var val=$('#radioId').val;
if(val=='Fresher')
{
$("#textbox 1").show();
$("#textbox 2").show();
$("#textbox 3").show();
}
else if (val=='Experienced'){
$("#textbox 1").hide();
$("#textbox 2").hide();
$("#textbox 3").hide();
}
Related
I face problem with reset value to empty with jquery when click radio button.
<form id="my-form">
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" value="123" />
</div>
<div>
<label for="ID">ID NO</label>
<input type="text" id="ID" name="ID" value="NO21034" />
</div>
<fieldset>
<legend>Option</legend>
<label for="clearID">clearID</label> <input type="radio" id="clearID" name="opt" checked />
<label for="clearName">clearName</label> <input type="radio" id="clearName" name="opt" />
</fieldset>
</form>
<script type="text/javascript">
$(document).ready(function()
{
$('#clearname').on('click', function()
{
$('#my-form').find('input:text').val('');
});
});
</script>
now if my radio button click clearName,it will automatic clear the value of name and id.
is it having another code can replace find('input:text') ?I want to clear either one value(name or id),not both.
Clear each field using corresponding id..
<script type="text/javascript">
$(document).ready(function()
{
$('#clearname').on('click', function()
{
$('#ID').val('');//it clears the value of element having id='ID'
$('#name').val('');//it clears the value of element having id='name'
});
});
</script>
use javascript reset method
$('#clearname').on('click', function()
{
$("#my-form")[0].reset()
// or
$("#my-form").get(0).reset()
});
I'm trying to get the button at the bottom to be unselectable and only selectable when you select an age group radio button. I'm not sure why but I think the function 'EnableButton' is invalid since if I remove it, the bottom button becomes unselectable, so the other function 'DisableButton' must be correct.
Can someone help to explain the problem?
var disablebutton = document.getElementById("to-enable"); // global variable
function DisableButton() { // disables 'to-enable' button
disablebutton.disabled = true;
}
DisableButton(); // runs the disable button function
function EnableButton() { // function that enables button
var ValidateAge = document.forms["registration-form"]["age"].value;
if (ValidateAge != undefined) {
disablebutton.disabled = false;
}
}
EnableButton(); // runs the enable button function
<form id="registration-form">
<input type="text" name="forename"> Forename<br>
<input type="text" name="surname"> Surname<br>
<input type="text" name="email"> Email<br>
<textarea name="address" rows="5" cols="40">Type your full address here...</textarea> Address<br><br>
Which planets have you already seen through a telescope?<br>
<input type="checkbox" name="planets" value="none">None<br>
<input type="checkbox" name="planets" value="mercury">Mercury<br>
<input type="checkbox" name="planets" value="venus">Venus<br>
<input type="checkbox" name="planets" value="mars">Mars<br>
<input type="checkbox" name="planets" value="jupiter">Jupiter<br>
<input type="checkbox" name="planets" value="saturn">Saturn<br>
<input type="checkbox" name="planets" value="usanus">Uranus<br>
<input type="checkbox" name="planets" value="neptune">Neptune<br><br>
What is your age group?<br>
<input type="radio" name="age">Under 18<br>
<input type="radio" name="age">18-30<br>
<input type="radio" name="age">30-50<br>
<input type="radio" name="age">50+<br><br>
What country are you from?
<select name="Country">
<option value="not-selected">Not Selected</option>
<option value="england">England</option>
<option value="wales">Wales</option>
<option value="scotland">Scotland</option>
<option value="northern-ireland">Northern Ireland</option>
</select>
<br><br>
</form>
<button onClick="ResetForm()">Reset</button>
<button onClick="SubmitForm()" id="submit">Submit</button>
<button id="to-enable">Select an age group to activate this button</button>
Add div on-click.
HTML
What is your age group?<br>
<div div onclick="EnableButton()" id="under18">
<input type="radio" name="age">Under 18<br>
</div>
<input type="radio" name="age">18-30<br>
<input type="radio" name="age">30-50<br>
<input type="radio" name="age">50+<br><br>
JS
function EnableButton() { // function that enables button
disablebutton.disabled = false;
}
EDIT
You need a while loop:
JS
i = 2
function EnableButton() { // function that enables button
while (i<10) {
disablebutton.disabled = false;
}}
The problem is both functions are runs immediately. So, the radio is not selected at that time. And hence it won't enable it.
You can use either eventListener on radio or an interval.
eventListener is prefered.
The code to do this is
document.querySelectorAll('input[name=age]').forEach(x => x.addEventListener('change',EnableButton));
I am totally new to web development so please do not leave any negative marks for this question. If you do not like this question please leave it as for another one who wish to answer.
There are 2 check box groups 'main' & 'sub.
if user select 'Main_CheckBox_1' from 'main' need to show 'Sub_Checkbox_1_Main_1' and 'Sub_Checkbox_2_Main_1' from 'sub'
and also if user select 'Main_CheckBox_2' need to show 'Sub_Checkbox_1_Main_2' & 'Sub_Checkbox_2_Main_2'
<div id = "mainDiv" >
<input type="checkbox" name="main" value="main_1"><span>Main_CheckBox_1</span> <br/>
<input type="checkbox" name="main" value="main_1"><span>Main_CheckBox_2</span><br/>
<input type="checkbox" name="main" value="main_1"><span>Main_CheckBox_2</span><br/>
</div>
<div id = "subDiv" >
<input type="checkbox" name="sub" value="Sub_1_of_main_1"><span>Sub_Checkbox_1_Main_1</span> <br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_1"><span>Sub_Checkbox_2_Main_1</span><br/>
<input type="checkbox" name="sub" value="Sub_1_of_main_2"><span>Sub_Checkbox_1_Main_2</span><br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_2"><span>Sub_Checkbox_2_Main_2</span><br/>
<input type="checkbox" name="sub" value="Sub_1_of_main_3"><span>Sub_Checkbox_1_Main_3</span><br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_3"><span>Sub_Checkbox_2_Main_3</span><br/>
</div>
1. how to identify which check box is selected from 'main' ?
2. how to show/hide check boxes in 'sub' depending on 'main' check boxes ?
Thanks you
1) Give all inputs with name main input[name='main'] the trigger to act on change. Then this.value will tell you which one in particular was changed.
2) Make a function that takes this.valueas parameter and then toggle (hide/show) the two corresponding checkboxes and the next element ()
$(document).ready(function() {
$("input[name='main']").change(function() {
showHide(this.value);
});
});
function showHide (chkbx) {
var k = "input[value='Sub_1_of_"+chkbx+"']";
$(k).toggle(0);
$(k).next().toggle(0);
var k = "input[value='Sub_2_of_"+chkbx+"']";
$(k).toggle(0);
$(k).next().toggle(0);
}
It'd be easier if you'd grouped your sub checkboxes like below. Use CSS to hide all groups during load. This would produce a lot more cleaner and readable DOM/code.
$(function() {
var $groups = $("#subDiv .group");
$('#mainDiv :checkbox').on("change", function() {
var index = parseInt($(this).val().slice(-1), 10) - 1;
$groups.eq(index).toggle(this.checked).siblings().hide();
});
});
#subDiv .group {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "mainDiv" >
<input type="checkbox" name="main" value="main_1" /><span>Main_CheckBox_1</span> <br/>
<input type="checkbox" name="main" value="main_2" /><span>Main_CheckBox_2</span><br/>
<input type="checkbox" name="main" value="main_3" /><span>Main_CheckBox_3</span><br/>
</div>
<div id = "subDiv" >
<div class="group">
<input type="checkbox" name="sub" value="Sub_1_of_main_1" /><span>Sub_Checkbox_1_Main_1</span> <br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_1" /><span>Sub_Checkbox_2_Main_1</span><br/>
</div>
<div class="group">
<input type="checkbox" name="sub" value="Sub_1_of_main_2" /><span>Sub_Checkbox_1_Main_2</span><br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_2" /><span>Sub_Checkbox_2_Main_2</span><br/>
</div>
<div class="group">
<input type="checkbox" name="sub" value="Sub_1_of_main_3" /><span>Sub_Checkbox_1_Main_3</span><br/>
<input type="checkbox" name="sub" value="Sub_2_of_main_3" /><span>Sub_Checkbox_2_Main_3</span><br/>
</div>
</div>
I currently have 2 checkbox categories, one dropdown list, and a submit button in a form. The button shall stay 'disabled' until one checkbox of category A is checked and one of category B options is checked and an option of the select list is selected.
It works for the checkboxes (when I tested without list) but there is an issue with the list.
When I fill out the form from top to bottom (func --> plat --> lang) it doesn't work. Somehow it works when I select "lang" first and then check the boxes. It also works from top to bottom when I check another checkbox after the language was selected. That's weird.
So here is the HTML:
<h3>choose func</h3>
<input type="hidden" name="func1" value="" />
<input type="checkbox" name="func1" value="1" id="func1" /> func1 <br/>
<input type="hidden" name="func2" value="" />
<input type="checkbox" name="func2" value="1" id="func2" /> func2<br/>
<input type="hidden" name="func3" value="" />
<input type="checkbox" name="func3" value="1" id="func3"/> func3<br/>
<br/>
<h3>choose plat</h3>
<input type="hidden" name="plat1" value="" />
<input type="checkbox" name="plat1" value="1" id="plat1" /> plat1<br/>
<input type="hidden" name="plat2" value="" />
<input type="checkbox" name="plat2" value="1" id="plat2" /> plat2<br/>
<input type="hidden" name="plat3" value="" />
<input type="checkbox" name="plat3" value="1" id="plat3" /> plat3<br/>
<input type="hidden" name="plat4" value="" />
<input type="checkbox" name="plat4" value="1" id="plat4" /> plat4<br/>
<br/>
<h3>choose lang</h3>
<select name="sprache">
<option disabled selected> -- select an option -- </option>
<option name="deutsch" id="deutsch">Deutsch</option>
<option name="englisch" id="englisch">Englisch</option>
</select>
<br/><br/>
<script>
</script>
<input type="submit" name="abfrage" class="inputButton" id="idAbfragen" value="Abfragen" disabled="">
And the jQuery/js:
$(function () {
$("#func1, #func2, #func3, #plat1, #plat2, #plat3, #plat4, #deutsch, #englisch").change(function () {
if (($("#func1").is(':checked') || $("#func2").is(':checked') || $("#func3").is(':checked'))
&&
($("#plat1").is(':checked') || $("#plat2").is(':checked') || $("#plat3").is(':checked') || $("#plat4").is(':checked'))
&&
($("#deutsch").is(':selected') || $("#englisch").is(':selected')))
{
$('.inputButton').attr('disabled', false);
}
else
{
$('.inputButton').attr('disabled', true);
}
});
});
I have no idea why it doesn't work. You can reproduce this issue in the fiddle i set up: https://jsfiddle.net/3zqf4fxv/
I hope there is a fix.
Thanks and Regards!
Change
$("#func1, #func2, #func3, #plat1, #plat2, #plat3, #plat4, #deutsch, #englisch")
to
$(":input")
jsFiddle example
The issue lies with using #deutsch, #englisch in your selectors. The select element changes, not the options. The :input is just a jQuery shortcut to select what you have already in your example, but note if you have other input elements on your page this would not be ideal. You can just replace #deutsch, #englisch with select[name='sprache'].
Ex:
$("#func1, #func2, #func3, #plat1, #plat2, #plat3, #plat4, select[name='sprache']")
jsFiddle example
I am trying to use the innerHTML method on an input tag and all i get back is a blank string. Here is the code i am useing.
javascript
function setName(ID){
document.getElementById('searchtitle').innerHTML = "Enter " + ID.innerHTML;
}
HTML
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)">Last Name</input><br/>
<input type="radio" name="searchtype" value="phonenumber" onclick="setName(this)">Phone Number</input><br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label><br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;"></input>
What is supposed to happen is depending on which radio button I pick the label for the input box should change. I can make the label.innerHTML=radio.value but the values are named for my php code and not formated nicely(ie. phonenumber vs. Phone Number) this is why I am trying to use the innerHTML of the radio button.
Any help I could get would be greatly appriciated.
you should embed input inside of label tag. input tag should closed by />. It's semantic HTML. When you do this clicking on label activate the input. InnerHTML only works for label then. It will return you label value.
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;" />
</label>
JavaScript:
console.log(document.getElementById('searchtitle').innerHTML); // returns 'Enter Last Name'
If you want the value of an input tag, you want to use .value.
First, add labels around your inputs. Second, use getName(this.parentNode). Finally, call innerText instead of innerHtml.
<html>
<head>
<script>
function setName(el){
document.getElementById('searchtitle').innerHTML = "Enter " + el.innerText;
}
</script>
</head>
<body>
<label><input type="radio" name="searchtype" value="name" onclick="setName(this.parentNode)"/>Last
Name</label><br/>
<label><input type="radio" name="searchtype" value="phonenumber" onclick="setName(this.parentNode)"/>Phone
Number</label><br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label><br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;"></input>
</body>
</html>
Complete edit.
Ok, I figured out what you were looking for. First off, you've got to fix your HTML (don't put text inside of an input... and don't next an input inside of a label).
<label for="test">Last Name</label>
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)" />
<br/>
<label for="test2">Phone Number</label>
<input type="radio" id="test2" name="searchtype" value="phonenumber" onclick="setName(this)" />
<br/>
<label for="inputfield" id="searchtitle" style="font-size:2em;">Enter Last Name</label>
<br/>
<input type="text" name="inputfield" id="inputfield" style="font-size:2em;" />
JavaScript (in Jquery, for brevity):
function setName(elem)
{
$('#searchtitle').html('Enter ' + $('label[for="'+elem.id+'"]').html());
}
You have closed the Input tag improperly with </input>
this should be
<input type="radio" name="searchtype" id="test" value="name" onclick="setName(this)"/>Last Name<br/>
<input type="radio" name="searchtype" value="phonenumber" onclick="setName(this)"/>Phone Number<br/>