This mostly works. It shows the SSN when the first Val radio button is picked. It also shows the PaperAppliction when the second Val radio button is picked. The ONLY problem is that the field PaperApplication shows when the form is loaded before any radio buttons are picked. I need it to hide both SSN and PaperApplicaition until one of the radio buttons is picked, and then show the proper field. What am I missing?
Here is the JS
$(".field.SocialSecurity input[type=radio]").on("change", function() {
if (
$(this).val() ==
"As a U.S. Citizen, permanent resident, or temporary working resident, I have a Social Security Number."
) {
$(".field.SSN").show();
$(".field.SSN input").focus();
$(".field.PaperApplication").hide();
} else if (
$(this).val() ==
"Due to my international student status, my residency status, or my specific visa type, I do not have a Social Security Number."
) {
$(".field.PaperApplication").show();
$(".field.PaperApplication input").focus();
$("field.SSN").hide();
} else {
$("field.PaperApplication").hide();
}
});
Here is the form html
US Citizen International Student Other
<div class="field SSN">
<label>SSN</label>
<input />
</div>
<div class="field PaperApplication">
<label>Paper Application</label>
<input />
</div>
You can just set them hidden initially using HTML markup to add a style attribute to the element. style="display:none" should do it.
e.g. <div class="field SSN" style="display:none;"> and the same for the other one.
Hide them both when the script is called, and also outside of the if statements when the change event is fired. Also, make your radio button values a word or two, camelCased. Put the string describing the button in the label tag:
$(".SSN, .PaperApplication").hide();
$(".field.SocialSecurity input[type=radio]").on("change", function() {
$(".SSN, .PaperApplication").hide();
if ($(this).val() == "first") {
$(".field.SSN").show();
$(".field.SSN input").focus();
} else if ($(this).val() == "second") {
$(".field.PaperApplication").show();
$(".field.PaperApplication input").focus();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field SocialSecurity">
<label>
Radio 1 text here
<input type="radio" name="radio" value="first" />
</label><br>
<label>
Radio 2 text here
<input type="radio" name="radio" value="second" />
</label>
</div>
<div class="field SSN">
<label>SSN</label>
<input />
</div>
<div class="field PaperApplication">
<label>Paper Application</label>
<input />
</div>
hide on load, then on click hide both and show the one that was clicked. run below snippet
$("input[name='socialsecurity']").click(() => {
$('.field').hide();
$(`.${$("input[name='socialsecurity']:checked").val()}`).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="socialsecurity" value="SSN"> SSN<br>
<input type="radio" name="socialsecurity" value="PaperApplication"> Paper Application<br>
<div class="field SSN" style = 'display: none;'>
<label>SSN</label>
<input />
</div>
<div class="field PaperApplication" style = 'display: none;'>
<label>Paper Application</label>
<input />
</div>
Related
this is my html file
<div id="radioHeader">
<div id="radioHeader" onclick="radioClicked()">
<div class="radio form-check form-check-inline component"> Mode of Transaction<span
style="color:red;">*</span>
<div class="radiogq">
<input type="radio" name="mode" value="cheque" onclick="" checked> Cheque
<input type="radio" name="mode" value="bank"> Bank Transaction
</div>
</div>
<div>
<p id="idc"></p><input class="textb" type="text" id="fname" class="col-form-label input" placeholder="Registration Id"
name="fname" size="100">
</div>
</div>
</div>
this is my js file from where I am adding the value in the textbox, and I want them to be in the same line.
this textbox label will chance as per the change in the radio button
function radioClicked() {
let shapeChoice = document.querySelector('input[name="mode"]:checked').value;
switch (shapeChoice) {
case 'cheque':
document.getElementById("idc").innerHTML = "Enter your Cheque Id"
break;
case 'bank':
document.getElementById("idc").innerHTML = "Enter your Transaction Id"
break;
default:
doucment.getElementById("idc").innerHTML = "Default"
}
};
radioClicked();
Use CSS, one of the ways is float:left
function radioClicked() {
let shapeChoice = document.querySelector('input[name="mode"]:checked').value;
switch (shapeChoice) {
case 'cheque':
document.getElementById("idc").innerHTML = "Enter your Cheque Id"
break;
case 'bank':
document.getElementById("idc").innerHTML = "Enter your Transaction Id"
break;
default:
doucment.getElementById("idc").innerHTML = "Default"
}
};
radioClicked();
.cs1 {
float:left;
}
<div id="radioHeader">
<div class="radio form-check form-check-inline component" "> Mode of Transaction<span
style="color:red;">*</span></div>
<div id="radioHeader" onclick="radioClicked()">
<div class="cs1 radiogq">
<input type="radio" name="mode" value="cheque" onclick="" checked> Cheque
<input type="radio" name="mode" value="bank"> Bank Transaction
</div>
</div>
<div class='cs1'> </div>
<div class='cs1' style="position:relative;top:2px;" id=idc></div>
<div class='cs1'> </div>
<div class='cs1'>
<input class="textb" type="text" id="fname" class="col-form-label input" placeholder="Registration Id"
name="fname" style="width:200px;max-width:100%:">
</div>
</div>
I've added a few improvements to your script and made sure your idc element floats left. This makes sure that the next element will appear next to it. To make it look better, I also added some margins to the input box.
Keep in mind that it may look like it doesn't work properly here on Stack Overflow as the window for the example is pretty small. But it'll work fine in your browser.
// Make sure it runs after the page is loaded
document.addEventListener("DOMContentLoaded", function(e){
// Get all radio buttons where name equals "mode"
const radios = document.querySelectorAll('input[type=radio][name="mode"]');
function radioChangeHandler(event){
const idc = document.getElementById("idc");
if(this.value === "cheque"){
idc.innerText = "Enter your Cheque Id";
} else if(this.value === "bank"){
idc.innerText = "Enter your Transaction Id";
} else {
idc.innerText = "Default";
}
}
// Attach event handler to each radio button
Array.prototype.forEach.call(radios, function(radio) {
radio.addEventListener('change', radioChangeHandler);
});
});
#idc {
float: left;
}
#fname {
margin-top: 13px;
margin-left: 5px;
}
<div id="radioHeader">
<div id="radioHeader">
<div class="radio form-check form-check-inline component"> Mode of Transaction<span style="color:red;">*</span>
<div class="radiogq">
<input type="radio" name="mode" value="cheque" onclick="" checked> Cheque
<input type="radio" name="mode" value="bank"> Bank Transaction
</div>
</div>
<div>
<p id="idc"></p><input class="textb" type="text" id="fname" class="col-form-label input" placeholder="Registration Id" name="fname" size="100">
</div>
</div>
</div>
Reference for the radio event handler: How to use radio on change event?
The behavior is because the paragraph i.e. element by default is block element. So, it occupies a block and adds line break before and after it. So, one way of changing it would be to change the behavior of paragraph block i.e. element by changing the display property to inline or inline block. Since it already has any id of idc, it can be done as :-
#idc {
display: inline;
}
Alternatively, the label and input can be placed inside the paragraph and it will display in the same line given there is enough to accommodate the element. This is the better approach since, a label tag is used for displaying the label and is linked to the input with for attribute.
<p>
<label id="idc" for="fname"></label>
<input class="textb" type="text" id="fname" class="col-form-label input" placeholder="Registration Id" name="fname" size="100">
</p>
I need to check the first radio button (value = "option1") by default. But after adding "checked" attributes, the radio button with value "option2" needs two click to get checked. Any idea whats wrong here?
Based on other posts i have included the code in between form tag, i have also tried changing "checked" to 'checked="checked"', tried with different "name" attribute, removing the div around radio button.
This is my code:
HTML
<div class="action">
<div class="...">{label...}</div>
<div class="...">
<input type="radio" tabindex="0" aria-label={...} name="preview" value="option1" onclick={getPreview} checked></input>
<label>{...}</label>
</div>
<div class="...">
<input type="radio" tabindex="0" aria-label={...} name="preview" value="option2" onclick={getPreview} ></input>
<label>{...}</label>
</div>
</div>
JS
getPreview(event) {
if(event.target.value == "option1") {
...
} else {
...
}
}
But nothing seems to be working.
You input have some issues with input closing and also with your JS.
This is how you can close input element />
Also, if you are calling getPrevious on input click you can use getPrevious(this) and get the value of the onclick input like this simplified method.
Just run snippet below to see it action.
function getPreview(event) {
if (event.value == "option1") {
console.log('option 1 checked')
} else {
console.log('option 2 checked')
}
}
<div class="action">
<div class="...">{label...}</div>
<div class="...">
<input type="radio" tabindex="0" aria-label={...} name="preview" value="option1" onclick="getPreview(this)"/>
<label>{...}</label>
</div>
<div class="...">
<input type="radio" tabindex="0" aria-label={...} name="preview" value="option2" onclick="getPreview(this)" />
<label>{...}</label>
</div>
</div>
I have a Twitter Bootstrap form that has 6 vertical check boxes. I need to have an input form field each time they select a checkbox. It could be in the form of a popup or maybe something that appears out to the right of the checkbox. I figure this is some kind of javascript function but I have no idea how to do so. Any suggestions would be greatly appreciated. Each textbox if selected should have a field that pops up asking them for how many years experience they have in this certain field. This will info will be collected via $_POST variables. So each checkbox popup should have its own unique name so i can post it.
<div class="form-group">
<label class="col-md-4 control-label" for="positionsought">Position Sought</label>
<div class="col-md-4">
<div class="checkbox">
<label for="positionsought-0">
<input type="checkbox" name="positionsought" id="positionsought-0" value="Cutting">
Cutting
</label>
</div>
<div class="checkbox">
<label for="positionsought-1">
<input type="checkbox" name="positionsought" id="positionsought-1" value="Sewing">
Sewing
</label>
</div>
<div class="checkbox">
<label for="positionsought-2">
<input type="checkbox" name="positionsought" id="positionsought-2" value="Upholstery">
Upholstery
</label>
</div>
<div class="checkbox">
<label for="positionsought-3">
<input type="checkbox" name="positionsought" id="positionsought-3" value="Frame Department">
Frame Department
</label>
</div>
<div class="checkbox">
<label for="positionsought-4">
<input type="checkbox" name="positionsought" id="positionsought-4" value="Mill Room">
Mill Room
</label>
</div>
<div class="checkbox">
<label for="positionsought-5">
<input type="checkbox" name="positionsought" id="positionsought-5" value="Cushion">
Cushion
</label>
</div>
<div class="checkbox">
<label for="positionsought-6">
<input type="checkbox" name="positionsought" id="positionsought-6" value="Any">
Any
</label>
</div>
</div>
</div>
Although you already have found an answer, I believe that this would work better for your situation since you say you will have 6 checkboxes. This dynamically creates input fields for each checkbox by their names and removes them when the checkbox is unchecked.
First add this function to each checkbox onclick="dynInput(this);"
<input type="checkbox" name="check1" onclick="dynInput(this);" />
and add this to wherever you would like the inputs to display.
<p id="insertinputs"></p>
Then simply add this javascript function to your head.
<script type="text/javascript">
function dynInput(cbox) {
if (cbox.checked) {
var input = document.createElement("input");
input.type = "text";
var div = document.createElement("div");
div.id = cbox.name;
div.innerHTML = "Text to display for " + cbox.name;
div.appendChild(input);
document.getElementById("insertinputs").appendChild(div);
} else {
document.getElementById(cbox.name).remove();
}
}
</script>
JsFiddle here: http://jsfiddle.net/brL6gy7r/
You can use JavaScript here to do the job. When the checkbox is clicked and checked (because you can also check out.) a dialog will pop-up with all input-fields you want. You can change the dialog part to your desires. but this part is your main function:
$(document).ready(function () {
$('#chkBox').click(function () {
if ($(this).is(':checked')) {
// create input field
} else {
// if checkbox is not checked.. dont show input field
}
});
});
For a full demo on how to do this with a dialog, click this link and observe
http://jsfiddle.net/Runman44/5vy1m233/
Notice that you will need jQuery (and jQuery UI if you want to use the dialog like me)
There is a zero-JavaScript version that is dead simple and works in all major browsers. It takes advantage of the :checked pseudo-class and the adjacency selector. It works with an arbitrary number of checkboxes.
HTML:
<input type="checkbox" />
<input type="text" />
CSS:
input[type=text] {
visibility:hidden;
}
input[type=checkbox]:checked + input[type=text] {
visibility:visible;
}
here is the live demo
If you prefer, you can use display:none and display:inline rather than the visibility property.
The example I've provided assumes that the text field immediately follows the checkbox in the markup, but some variant of sibling/child selectors can be used to select it no matter where it is, as long as it is either a sibling or child (direct or indirect) of the checkbox.
I have 5 radio buttons and want to show different div on selection of particular radio
button, but other div as contact form should be displayed on submitting form.
And one more thing I want next div on same location of first div ( first div show and second div hide at same place)
<p>Tell us more about Yourself</p>
<form class="request-demo-form" action="" method="post" onSubmit="e();" name="form1">
<div class="input-block">
<input name="info" class="input-radio" type="radio" value="Restaurant" /> Restaurant Chain with more than 3 Locations. ( Looking for more information )
</div>
<div class="input-block">
<input name="info" class="input-radio" type="radio" value="IndRestaurant"/> Independent Restaurant with 1-3 Locations ( Looking for more information )
</div>
<div class="input-block">
<input name="info" class="input-radio" type="radio" /> Existing Punchh Customers ( Looking For Support)
</div>
<div class="input-block">
<input name="info" class="input-radio" type="radio" /> User of Punchh Developed App ( Looking For Support)
</div>
<div class="input-block">
<input name="info" class="input-radio" type="radio" /> Others ( Marketing , Partership etc.)
</div>
<br/>
<div class="submit-btn-area">
<button type="submit" class="button button-dark">SUBMIT<span class="arrow1"></span></button>
</div>
</form>
I have not much experience in javascript so please check my code
<script type="text/javascript">
$('input:radio[value="Restaurant"]').change(
$('form').submit(function (e) {
if ($(this).is(':checked')) {
$('#main').hide();
$('#Restaurant').show();
e.preventDefault();
}
});
</script>
In the above code the $(this) refers to the form element, and not the radio input field.
I suggest, that on the submit event of the form, that we check the radio input field and hide and show the divs accordingly.
<script type="text/javascript">
$().ready(function() {
$('form').submit(function (e) {
$('input:radio[value="Restaurant"]').is(':checked')) {
$('#main').hide();
$('#Restaurant').show();
e.preventDefault();
}
});
});
</script>
I am writing a form, it has checkboxes, and I wrote a script to show and hide them (specifically hide all other checkboxes when one of them is selected).
I reached this far when I need this to hide the input checkboxes, but what this code below is doing, is: it shows only 1 of checkboxes (the second one). Why, how can I hide both of the checkboxes at the same time ?
$('input:checkbox.individual' && 'input:checkbox.organization').stop(true,true).fadeIn("normal")
this is my html:
<div class="field check check-entity">
<label for="entity_type">For what kind of entity are you requesting sponsorship?<span class="form_required">*</span></label><br><br>
<input type="checkbox" name="entity_type" value="entity_project" class="project"/><label for="entity_project" class="lalbe_project">Project</label>
<input type="checkbox" name="entity_type" value="entity_individual" class="individual"/><label for="entity_individual"class="label_individual">Individual</label>
<input type="checkbox" name="entity_type" value="entity_organization" class="organization"/><label for="entity_organization" class="label_organization">Organisation</label>
</div>
Use a , in the selection string to select multiple groups of elements
$('input.individual:checkbox, input.organization:checkbox')
// ^ see here
Is this the effect you wanted to achieve?
http://jsfiddle.net/z37br/
HTML:
<div class="field check check-entity">
<label for="entity_type">For what kind of entity are you requesting sponsorship?
<span class="form_required">*</span>
</label>
<br><br>
<input type="checkbox" name="entity_type" value="entity_project" data-type="project"/>
<label for="entity_project" class="lalbe_project">Project</label>
<input type="checkbox" name="entity_type" value="entity_individual" data-type="individual"/>
<label for="entity_individual"class="label_individual">Individual</label>
<input type="checkbox" name="entity_type" value="entity_organization" data-type="organization"/>
<label for="entity_organization" class="label_organization">Organisation</label>
</div>
JS:
$('input').change(function() {
if ($(this).prop('checked')) {
var clickedCheckboxType = $(this).attr('data-type');
$('input').each(function() {
if (clickedCheckboxType != $(this).attr('data-type')) {
$(this).fadeOut('fast');
$(this).next().fadeOut('fast');
}
});
}
else {
$('input').fadeIn('fast');
$('input').next().fadeIn('fast');
}
});