I want to display an input textbox after choosing one of the radio button selection but I'm having difficulty to do it. For example, I have 3 radio buttons: name, age and phone number. If I choose the name, then the input textbox will display for me to input a name and so on if I choose others. I want to know how to do it using HTML and javascript. Mind to help me, anyone? Thank you.
you can write all things like this.
function show(gender){
console.log(gender);
}
<label for="gender">
<input type="radio" name="gender" onclick="show('male')" value="male"/> male <br />
<input type="radio" name="gender" onclick="show('female')" vlaue="female"/> Female
</label>
thanks!
<label for="name">
<input type="radio" name="gender" onclick="createElements()"/> Male <br />
<input type="radio" name="gender" onclick="createElements()"/> Female
<div id="input"></div>
</label>
<script>
function createElements(){
var input = document.createElement("INPUT");
input.setAttribute("type", "text");
document.getElementById("input").appendChild(input);
}
</script>
Related
I'm trying to build a form that saves all of your selections of radio buttons and outputs as a summary upon submission. I am fairly new to JavaScript so please bear with me.
You are supposed to select between, let's say, three options per section. Depending on what was previously selected after you press Submit, it will open a lightbox and give you a summary of your choices before you submit the choices to be sent via email.
For what I have right now, there is only one section and three options to choose from.
HTML:
<div id="options">
<form method="get">
<label class ="rad">
<input type="radio" name ="O1" value="small"/>
<img src="img.jpg">
</label>
<label class ="rad">
<input type="radio" name ="O2" value="small"/>
<img src="img.jpg">
</label>
<label class ="rad">
<input type="radio" name ="O3" value="small"/>
<img src="img.jpg">
</label>
<input type="submit" value="SUBMIT"/>
</form>
</div>
JavaScript:
$(document).ready(function() {
$("#radio_submit").click(function (e) {
var checked_O1_radio = $('input:radio[name=O1]:checked').val();
var checked_O2_radio = $('input:radio[name=O2]:checked').val();
var checked_O3_radio = $('input:radio[name=O3]:checked').val();
if(checked_O1_radio===undefined || checked_O2_radio===undefined || checked_O3_radio===undefined)
{
alert('Please select a leather option then continue.');
}else{
alert('You Chose "' +checked_O1_radio);
}else{
alert('You Chose "' +checked_O2_radio);
}else{
alert('You Chose "' +checked_O3_radio);
}
});
});
Try this if i under stand your question correctly:
you can use same name then automatically only one will be selected and find the selected leather with a single check.
<label class ="rad">
<input type="radio" name ="O1" value="small"/>
</label>
<label class ="rad">
<input type="radio" name ="O1" value="medium"/>
</label>
<label class ="rad">
<input type="radio" name ="O1" value="large"/>
</label>
<input type="submit" value="SUBMIT" id = "Submitbutton"/>
$(document).ready(function() {
$("#Submitbutton").click(function (){
console.log($('input:radio[name=O1]:checked').val());
})
});
Please mark it as to answer if it helps you.
General issue: I cannot set a default radio button in my radio groups unless I remove the value attribute from the inputs.
Specifics: Each input has a value that is needed as it is being used by angular in other places in the app. So, I need to know how to set an input to default checked while retaining the values on the inputs. It has the same behavior if I try to add checked with jQuery instead of in HTML.
I have looked at several related questions including here. The specific issue is I need to have values and be able to set one input to checked as a default. The first input is set to checked, but it does not actually work unless I remove the value from that input.
Here is the HTML:
<div class="radio">
<label>
<input type="radio" ng-model="optionsRadios" id="new" value="new" checked>
New
</label>
<label>
<input type="radio" ng-model="optionsRadios" id="used" value="used">
Used
</label>
<label >
<input type="radio" ng-model="optionsRadios" id="broken" value="broken">
Broken
</label>
</div>
You have to use ng-checked="true" instead of checked
<input type="radio" ng-model="optionsRadios" id="new" value="new" ng-checked="true">
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>My cars:</p>
<input type="radio" ng-model="all" value="Volvo" ng-checked="true">Volvo<br>
<input type="radio" ng-model="all" value="Ford">Ford<br>
<input type="radio" ng-model="all" value="Mercedes">Mercedes
</body>
</html>
If you have a group of radio button and you want to set radio button checked based on model, then radio button which has same
value and ng-model is checked automatically.
<input type="radio"
ng-model="optionsRadio" value="1" >
<input type="radio"
ng-model="optionsRadio" value="2" >
<input type="radio"
ng-model="optionsRadio" value="3" >
If the value of optionsRadio is "2" then second radio button will be selected automatically.
In Your Case:
When u r initiating the controller all u have to do is to assign a value to your model to keep atleast one radio button selected.
Controller part:
$scope.optionsRadio = "new";
Form part:
<input type="radio" ng-model="optionsRadio" value="new" >
<input type="radio" ng-model="optionsRadio" value="used" >
<input type="radio" ng-model="optionsRadio" value="broken" >
First radio button will be selected automatically.
Note:
If value doesn't work u can use ng-value.
So I have dynamic form that I create and there could be multiple sets of radio inputs they all do have the same name Release[] but I do not know how to group the properly now if you will add 4 sets of those radio inputs you will be only able to select 1 from all of them
$('a#AddChampion').on('click', function () {
$('div#ChampionInput').append(
'<input type="radio" name="Release[]" value="New">New\
<input type="radio" name="Release[]" value="Rework">Rework\
<input type="radio" name="Release[]" value="None" checked>None\
');
});
Yes if you intend to use the same name only one output can be obtained. If you want to collect them separately you will have to use separate names.
E.g.
For two groups of ReleaseGrp1 and ReleaseGrp2
<input type="radio" name="ReleaseGrp1" value="New">New
<input type="radio" name="ReleaseGrp1" value="Rework">Rework
<input type="radio" name="ReleaseGrp1" value="None" checked>None
<input type="radio" name="ReleaseGrp2" value="New">New
<input type="radio" name="ReleaseGrp2" value="Rework">Rework
<input type="radio" name="ReleaseGrp2" value="None" checked>None
<input type="radio" name="red" value ="red" onclick="myFunction(this.value);"id="chkbx" /> Red<br>
<input type="radio" name="green" value ="green" onclick="myFunction(this.value);"id="chkbx" > green<br>
<input type="radio" name="yellow" value ="yellow " checked onclick="myFunction(this.value);"id="chkbx" > yellow<br>
<input type="radio" name="orange" value ="orange" onclick="myFunction(this.value);"id="chkbx" > orange<br>
<input type="radio" name="blue" value ="blue" onclick="myFunction(this.value);"id="chkbx" > blue<br>
<p id="demo"></p>
button onclick="myfunction(this.value)">My Choice</button>
<br><br>
<p id="demo"></p>
<script>
function myFunction(chkbx)
{
if(chkbx.checked)
{
chkbx.checked = false;
}
else
{
chkbx.checked = true;
}
The Thing is " I want to get the colour from radio button apply to a text in output screen(at a time one radio button would be select).What can i do. Please give some idea. i am new to javascript. I want in javascript only.
.Value will return you the value:
function myFunction(chkbx)
{
if(chkbx.checked)
{
alert(chkbx.value);
}
}
Give all the radio buttons in the group the same name.
Radio buttons allow the user to select only ONE of a predefined set of options. You define groups with the name property (radio buttons with the same name belong to the same group).
So to solve your issue, you can do as belows.
<p><input type="radio" name="color" value ="red"><i>Red</i></p>
<p><input type="radio" name="color" value ="green"><i>Green</i></p>
<p><input type="radio" name="color" value ="yellow" checked><i>Yellow</i></p>
<p><input type="radio" name="color" value ="orange"><i>Orange</i></p>
<p><input type="radio" name="color" value ="blue"><i>Blue</i></p>
I created the following form:
http://jsfiddle.net/baumdexterous/GYNSu/1/
I implemented a validation script that works for many of the form elements but for some reason it's not working for the radio buttons so currently a user can submit the form without selecting one of the required radio buttons.
How can I enable validation for the radio buttons using this existing script? Thanks so much.
<ul>
<li class="required">
<label>What is the U.S. Capital? Please select your answer below:</label>
<div class="questionsone">
<input name="questionone" type="radio" value="a">a) New York<br>
<input name="questionone" type="radio" value="b">b) Washington DC<br>
<input name="questionone" type="radio" value="c">c) Seattle<br>
<input name="questionone" type="radio" value="d">d) Portland<br>
</div>
</li>
</ul>
Update: I have this JavaScript part that works with the existing validation. Trying to figure out how to add a way that will detect radio buttons:
<script>
$(function() {
var root = $("#wizard").scrollable();
// some variables that we need
var api = root.scrollable(),
drawer = $("#drawer");
// validation logic is done inside the onBeforeSeek callback
api.onBeforeSeek(function(event, i) {
// we are going 1 step backwards so no need for validation
if (api.getIndex() < i) {
// 1. get current page
var page = root.find(".page").eq(api.getIndex()),
// 2. .. and all required fields inside the page
inputs = page.find(".required :input").removeClass("error"),
// 3. .. which are empty
empty = inputs.filter(function() {
return $(this).val().replace(/\s*/g, '') == '';
});
// if there are empty fields, then
if (empty.length) {
// slide down the drawer
drawer.slideDown(function() {
// colored flash effect
drawer.css("backgroundColor", "#229");
setTimeout(function() {
drawer.css("backgroundColor", "#fff");
}, 1000);
});
// add a CSS class name "error" for empty & required fields
empty.addClass("error");
// cancel seeking of the scrollable by returning false
return false;
// everything is good
} else {
// hide the drawer
drawer.slideUp();
}
}
// update status bar
$("#status li").removeClass("active").eq(i).addClass("active");
});
// if tab is pressed on the next button seek to next page
root.find("button.next").keydown(function(e) {
if (e.keyCode == 9) {
// seeks to next tab by executing our validation routine
api.next();
e.preventDefault();
}
});
});
</script>
Have the radio button names all be the same. That groups them together. Then all you have to do is make the first one have checked="true"
<input name="question" type="radio" value="a" checked="true">a) New York<br>
<input name="question" type="radio" value="b">b) Washington DC<br>
<input name="question" type="radio" value="c">c) Seattle<br>
<input name="question" type="radio" value="d">d) Portland<br>
This makes them send at least one thing. Otherwise you have to check the selected value of the input.
Also all the text inputs could just have required attribute and that would make sure something is there. HTML5 has that as validation.
http://www.w3schools.com/tags/att_input_required.asp
EDIT
Here's a fiddle I just made using jQuery. This is the true validation you want.
http://jsfiddle.net/slyfox13/H9Dw2/
Your radios should all have the same name. In the code about, you literally have 4 different inputs each as their own form data param, not 4 radio inputs affecting one form data param.
The input names not all need to be the same, i.e. and then check that the value of questionone is not null to validate
You have to give same name for all radio input tag.
like this
<div class="questionsone">
<input name="qstn1" type="radio" value="a">a) New York<br>
<input name="qstn1" type="radio" value="b">b) Washington DC<br>
<input name="qstn1" type="radio" value="c">c) Seattle<br>
<input name="qstn1" type="radio" value="d">d) Portland<br>
</div>
Set same name to all radio buttons since Radio buttons are there for a single choice.
<input name="questionone" type="radio" value="a">a) New York<br>
<input name="questionone" type="radio" value="b">b) Washington DC<br>
<input name="questionone" type="radio" value="c">c) Seattle<br>
<input name="questionone" type="radio" value="d">d) Portland<br>
Validation using jQuery:
if($("input[type=radio,name=questionone]:checked").length >0)
{
/* do something */
}
First you need to change your radio buttons names to all be the same thing. ex
<ul>
<li class="required">
<label>What is the U.S. Capital? Please select your answer below:</label>
<div class="questionsone">
<input name="question" type="radio" value="a">a) New York<br>
<input name="question" type="radio" value="b">b) Washington DC<br>
<input name="question" type="radio" value="c">c) Seattle<br>
<input name="question" type="radio" value="d">d) Portland<br>
</div>
</li>
</ul>
So that you will only be able to select one. Next you need to create a document.ready() function. Add this code to your document.ready()
$( document ).ready(function() {
function RadioTest(){
inputs = document.getElementsByName('question');
for (index = 0; index < inputs.length; ++index) {
if(inputs[index].checked!=true){
alert("radio not selected");
return false;
}
}
}
});