show hide text box based on selection of radio button - javascript

I'd like to show/hide text box based on selection of radio buttons.
If I select patient radio button, it will display only patient name text box.
If I select visitor radio button, it will display patient name text box and visitor text box.
How could I show/hide using html/javascript/jquery ? Thanks

I got the solution. I just need to create 2 div. 1 div has 1 text box and another div is 2 text box. And just make show/hide control for these 2 div.Thanks

this should get you started. Fool around with the code and let me know what you don't understand.
function show(){
var pvs = document.getElementsByName('pv');
var pv0 = document.getElementById("patient");
var pv1 = document.getElementById("visitor");
if (pvs[0].checked){
pv0.style.display='inline-block';
pv1.style.display='none';
}else{
pv0.style.display='inline-block';
pv1.style.display='inline-block';
}
}
#patient,#visitor{
display:none;
}
select patient <input type='radio' name ='pv' onClick="show()"> or visitor
<input type='radio' name ='pv' onClick="show()"><br>
<div id='patient'> patient: <input type='text' ></div><br>
<div id='visitor'>visitor: <input type ='text' ></div><br>

Related

I would like to know how to create a button that shows one final result based on the radio buttons chosen

I would like to know how to create a button that shows one final result based on the radio buttons chosen.
For example if 'Male is selected and if 'bmi is under 18.5' then answer is "light training needed". Can anybody help pls?
<form>
Gender:<br/>
<input type="radio" name="Gender" value="Male"/>Male
<input type="radio" name="Gender" value="Female"/>Female
<br/>
<span id="genderresult"></span>
<br/>
Body Mass Index:<br/>
<select id="bmi" onchange="showChange()">
<option value="under 18.5"><18.5</option>
<option value="18.5 to 24.9">18.5-24.9</option>
<option value="25 to 29">25-29</option>
<option value="over 30">30+</option>
</select>
<br/>
<span id="bmiresult"></span>
</form>
<script>
var radioButtons = document.querySelectorAll('input[type=radio]');
var genderresult = document.getElementById("genderresult");
var bmiresult = document.getElementById("bmiresult");
radioButtons.forEach(r=>{
r.onclick = function(e){
genderresult.innerHTML = "You are "+r.value;
}
});
function showChange(){
var bmi = document.getElementById("bmi").value;
bmiresult.innerHTML = "Your body mass index is "+bmi;
if(bmi=="over 30"){
bmiresult.innerHTML += "<br/>Consider losing weight";
}
}
</script>
Okay, maybe i can provide one solution. You wanna do first of all a selection from wherever and after that you wanna choose a choice from radio buttons section. Okay, you can use a listener that only wait when you choose one of the radio button that you selected. I mean, if write something and after that you select the radio button you know that the variable in which you wrote, have something and you can select a choice.
Let me be more clear. I mean that you have a text field and after that you have a radio button.
If you don't write something and you select one of the raddio button choices you display an errot but if you wrote before and it was saved in a variable that already is not undefined then you can select raddio button and manipulatr the output.

Checked radio button

I need to know if a radio button has been selected to hide / show other options.
<input #r4 type="radio" name="x">
<span>Group</span>
<div class="subOption" *ngIf="r4.checked"></div>
div.subOption must be displayed when it has been selected.
it's correct?¿
I would just create a new boolean variable in the component, that you set as true when radio button has been checked. With that boolean you then display the div. So for example:
isChecked: boolean = false; // our new variable
<input type="radio" name="x" (click)="isChecked = true">
<div *ngIf="isChecked">
<!-- Your code here -->
</div>
EDIT: As to multiple radiobuttons... as mentioned in a comment, radio buttons seems at this point be kind of buggy with Angular. I have found the easiest way to deal with radio buttons seems to be using a form. So wrap your radio buttons in a form, like so:
<form #radioForm="ngForm">
<div *ngFor="let val of values">
<input (change)="changeValue(radioForm.value)" type="radio" [value]="val.id" name="name" ngModel />{{val.name}}
</div>
</form>
whereas on radio button would look like the following in this example:
{
id: 1,
name: 'value1'
}
In the form there is a change event, from which we pick up the chosen radio button value.
(change)="changeValue(radioForm.value)"
Then I would just play with boolean and the value chosen:
changeValue(val) {
this.valueChosen = true; // shows div
this.chosenVal = val.name; // here we have the value chosen
}
A plunker to play with: here

Selection of radio button in one div based on another radio button in separate div

I have two div and having radio button groups with same names & values in both div.
On selection of radio button in first div i want to select radio button with same name and value in another div automatically.
i cant pass name or id manually for each radio group because there are more than 100 groups on page.
How can i do it dynamically?
I have tried in jsfiddle but not working.
https://jsfiddle.net/vp43g7Lh/4/
can anybody help?
You cannot add multiple radio groups containing radio inputs having the same name and value. If they are in the same form it makes no sense to add them. You must change the name of the inputs in each group as follows
<div>
<input type='radio' name='o37_field1' value='aaa' />aaa
<input type='radio' name='o37_field2' value='bbb' />bbb
</div>
<div>
<input type='radio' name='o38_field1' value='aaa' />aaa
<input type='radio' name='o38_field2' value='bbb' />bbb
</div>
<div>
<input type='radio' name='o39_field1' value='aaa' />aaa
<input type='radio' name='o39_field2' value='bbb' />bbb
</div>
Here is the demo on how you can update the inputs when clicking one of them: https://jsfiddle.net/vp43g7Lh/9/
$("input[type='radio']").change(function(e){
e.stopPropagation();
$('input[type="radio"][name*="' + $(this).attr('name').split('_')[1] + '"][value="' + $(this).val() + '"]').prop('checked', $(this).prop('checked'));
});

Dynamic text field can't take the value jquery php

I'm trying to add/remove items dynamically but I can't take the values of all the elements of the array.
Basically I have this form
<form action="" method="post">
<div class="input_fields_wrap">
<div>
<label> <span>Team name </span>
<input type="text" class="input-field" name="teams[]"> </label>
</div>
</div>
<span id="num_teams"></span> <label><span> </span>
<input type="submit" value="Add Team" class="add_field_button" name="add_field_button">
<input type="submit" name="next" value="Next" />
</label>
</form>
It just shows an input box where I'd have to insert the team name and two buttons ; one to go to the next page, and the other one to add a new text field using jquery.
Here it is the jquery script
<script type="text/javascript">
$(document).ready(function() {
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
var max_fields = $('#n_teams').val(); //maximum input boxes allowed
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><label><span>Team Name </span><input type="text" class="input-field" name="teams[]"> Delete</label></div>'); // add input box
$("#num_teams").html('Number of Teams: '+x);
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('label').remove(); x--;
$("#num_teams").html('Number of Teams: '+x);
})
});
</script>
The script above works perfectly: it adds and removes textfields.
The problem that I have now is that I can't take the values of the array 'teams[]' .
in a
if(isset($_POST['next']))
even if I try to take the values manually like
echo $_POST["teams"][0]; and
echo $_POST["teams"][1]; ect...
It just takes the first value (i.e. the one I don't add using jquery). It doesn't 'see' the jquery text fields added.
Of course my final aim is to insert 'teams[]' in a mysql table, but for now I noticed that I can't either take the values.
Where am I wrong ?
EDIT - SOLVED
It was a very stupid error I made in the html code. Actually there was a <div> before of the <form> that caused all the troubles. After a very accurate analysis , trying every single piece of code alone, I finally got that I just had to move the <form> above two <div> to make the code work.
I do apologize to everyone, silly me!
Instead of using name="teams[]" use name="teams" and on server side use:
$_POST['teams']
which should give you the comma separated list.
var wrapper = $(".input_fields_wrap").first();

How can I auto-select a radio button with Greasemonkey? [duplicate]

This question already has an answer here:
Greasemonkey to change value of Radio buttons in a form?
(1 answer)
Closed 4 years ago.
I want select auto radio button with Greasemonkey. But I want select radio with label name.
When I see that four radio button, Greasemonkey need select my option.
Example: I want auto select label Instagram.
<label for="ContentPlaceHolder1_answer3">Instagram</label>
How can I select this radio button with Greasemonkey?
<div class="row">
<input type="radio" tabindex="3" value="answer1" name="ctl00$ContentPlaceHolder1$1" id="ContentPlaceHolder1_answer1"><label for="ContentPlaceHolder1_answer1">Twitpic</label></div>
<div class="row">
<input type="radio" tabindex="4" value="answer2" name="ctl00$ContentPlaceHolder1$1" id="ContentPlaceHolder1_answer2"><label for="ContentPlaceHolder1_answer2">Yfrog</label></div>
<div class="row">
<input type="radio" tabindex="5" value="answer3" name="ctl00$ContentPlaceHolder1$1" id="ContentPlaceHolder1_answer3"><label for="ContentPlaceHolder1_answer3">Instagram</label></div>
<div class="row">
<input type="radio" tabindex="6" value="answer4" name="ctl00$ContentPlaceHolder1$1" id="ContentPlaceHolder1_answer4"><label for="ContentPlaceHolder1_answer4">Flickr</label></div>
</div>
Try this:
var label="whatever"; //The label you want to look for, you may already have some such variable
var allLabels=document.getElementsByTagName("label"); //Get all labels
for (var i=0;i<allLabels.length;i++) { //Loop through labels
if (allLabels[i].innerHTML.toLowerCase()==label) { //If a match is found...
allLabels[i].parentNode.getElementsByTagName("input")[0].checked=true; //Check the parent element for inputs (radio buttons, for instance), and check the first one
}
}
I can't tell for sure if that will work without knowing how the HTML is put together. You gave the HTML in your question, but I don't know if it retains that constant format.
I've not used xpath in a while, so it might not do anything :)
But in theory, this will search for all labels where the text constains "Instagram", and then it loops through all the results, taking the for attribute to get the radio button and sets it's checked to true. (although i think its "selected" for radio buttons?)
function xpathSnapshot(expression,context) {
var r=document.evaluate(expression,context,null,6,null),i=r.snapshotLength-1;
this.iterate=function() {return r.snapshotItem(i--)}
}
var labels = xpathSnapshot("//label[contains(text(),\"Instagram\")]",document);
while (label = labels.iterate()) {
document.getElementById(label.getAttribute("for")).checked = true;
}
var labels = document.getElementsByTagName('label'); //get the labels
for (var i = 0; i < labels.length; ++i) { //loop through the labels
if (labels[i].textContent == "Instagram") { //check label text
labels[i].click(); //if correct text, click the label
}
}

Categories