Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am fairly new at jQuery, so I was trying to change the value of a radio box, automatically as I select an option from the from my select dropdown. But it is not going as I planned.
For eg:
If I select Mrs. or Ms. from the select options then the property of the radio with value female should become true.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$('[name="title"]').change(function() {
if ($(this).val() == "Ms." || $(this).val() == "Mrs.") {
$("#female").prop("checked", true);
} else if ($(this).val() == "Mr.") {
$("#male").prop("checked", true);
}
});
</script>
</head>
<body>
<select name="title">
<option value="" disabled selected>Choose your option</option>
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
<label>Title</label>
<p><b>Gender</b>
<br/>
</p>
<input type="radio" name="gender" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female">
<label for="female">Female</label>
</body>
<html>
Your code appears to be correct. Try just using a document.ready, or loading it at the end of the body.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('[name="title"]').change(function() {
if ($(this).val() == "Ms." || $(this).val() == "Mrs.") {
$("#female").prop("checked", true);
} else if ($(this).val() == "Mr.") {
$("#male").prop("checked", true);
}
});
});
</script>
</head>
<body>
<select name="title">
<option value="" disabled selected>Choose your option</option>
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
<label>Title</label>
<p><b>Gender</b>
<br/>
</p>
<input type="radio" name="gender" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" id="female">
<label for="female">Female</label>
</body>
<html>
You're missing a document.ready line.
Using this page as a reference (which is an explanation of how to target radio buttons with jQuery), this is how I used your code to get it to work in my test environment:
$(document).ready(initializePage);
function initializePage(){
$('[name="title"]').change(function() {
if ($(this).val() == "Ms." || $(this).val() == "Mrs.") {
$('input:radio[name=gender]')[1].checked = true;
} else if ($(this).val() == "Mr.") {
$('input:radio[name=gender]')[0].checked = true;
}
});
}
Related
i'm using the code below to display an input field when "other" option is selected.
It works perfectly when "other" is selected.
However, i am unable to post to database when any other option apart from "other" is selected.
The problem is the text input negates the select options.
Any idea how to go about this?
There's a question that attempts to solve the problem but i don't have enough reputation to comment Stackoverflow.com/questions/9634783/how-to-activate-a-textbox-if-i-select-an-other-option-in-drop-down-box
<html>
<head>
<script type="text/javascript">
function CheckColors(val){
var element=document.getElementById('color');
if(val=='pick a color'||val=='others')
element.style.display='block';
else
element.style.display='none';
}
</script>
</head>
<body>
<select name="color" onchange='CheckColors(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<input type="text" name="color" id="color" style='display:none;'/>
</body>
</html>
the problem is, that you have multiple form elements with the same name. This might work in some cases, but generally is a bad practice. Name them differently and let the code that processes the input handle the data.
If you really need an input with the name 'color' that holds the current color, here is a solution that should work:
function checkColors(val) {
var element = document.getElementById('color');
if (val == 'pick a color' || val == 'others') {
element.style.display = 'block';
} else {
element.value = val; //make sure element always has the right value;
element.style.display = 'none';
}
}
<html>
<head>
</head>
<body>
<select name="colorSelect" onchange='checkColors(this.value);'>
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option value="others">others</option>
</select>
<input type="text" name="color" id="color" style='display:none;' />
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am trying to replace entire dropdown - select element, with an input field, if a selected option value is, say, 777.
$(document).ready(function(){
$("#mylist").change(function(){
//var val = $(":selected",this).val();
if(this.val == "777"){
$("#mylist").replaceWith('<input type="text" name="my_name" placeholder="xxx" required="required" />');
}
}) // change-function ends
}) // doc-ready ends
<select id="mylist">
<option value="777">Nothing exists</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
But it's not working. Where I am going wrong?
.val is not a valid property in javascript, it is jquery method.
You should either use clean javascript this.value or jquery $(this).val() instead of this.val here:
$(document).ready(function(){
$("#mylist").change(function(){
if($(this).val() == "777"){
$("#mylist").replaceWith('<input type="text" name="my_name" placeholder="xxx" required="required" />');
}
}) ;// change-function ends
}); // doc-ready ends
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<select id="mylist">
<option value="777">Nothing exists</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
try this
<script type="text/javascript">
$(document).ready(function(){
$("#mylist").change(function(){
var val = $("option:selected",this).val();
if(val == "777"){
$("#mylist").replaceWith('<input type="text" name="my_name" placeholder="xxx" required="required" />');
}
});
});
</script>
You are using val which is not a property or function you need to use .value Try this
if(this.value == "777"){
$("#mylist").replaceWith('<input type="text" name="my_name" placeholder="xxx" required="required" />');
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I was wondering if there is a way to auto check certain boxes based on the value from a dropdown selection. I have been searching forever and I can only seem to find ways to SHOW OR HIDE checkboxes based on dropdown but that is not what I am looking for.
You can do this pretty easily with jQuery. This code listens for a change event from a dropdown with id="dropdown" and checks the checkbox with id="checkbox" if the dropdown text was equal to 'foo'.
$("#dropdown").change(function() {
if($('#dropdown :selected').text() === 'foo') $('#checkbox').prop('checked', true);
});
If you want to uncheck the box when the selection is changed again something like this might be better:
$("#dropdown").change(function() {
var text = $('#dropdown :selected').text();
$('#checkbox').prop('checked', text === 'foo');
});
Fiddle
This should do what you're asking for. Hope it helps!
function setCheckBox(value){
var chk = document.getElementById('check1');
chk.checked = (value != 'null');
}
<table>
<tr>
<td>
<input type="checkbox" name="check1" id="check1"/>Test 1:</td>
<td>
<select id="process1" onchange="setCheckBox(this.value);">
<option value="null">--Select Option--</option>
<option value="OptionA">Option A</option>
<option value="OptionB">Option B</option>
<option value="OptionB">Option C</option>
</select>
</td>
</tr>
</table>
Not sure of your specifics, but this does what you asked and you should be able to take parts from it to complete your task.
document.getElementById('changer').onchange = function(){
var boxes = document.querySelectorAll('input[type="checkbox"]');
for(var i=0;i<boxes.length;i++)
{
boxes[i].checked = boxes[i].id == this.value;
}
};
<select id='changer'>
<option>None</option>
<option value='a'>A</option>
<option value='b'>B</option>
<option value='c'>C</option>
<option value='d'>D</option>
</select>
<br />
<input type='checkbox' id='a' /><label for='a'>A</label><br />
<input type='checkbox' id='b' /><label for='a'>B</label><br />
<input type='checkbox' id='c' /><label for='a'>C</label><br />
<input type='checkbox' id='d' /><label for='a'>D</label>
I am trying to hide/display label and textbox on the dropdown select.
So I No is selected, I dont want to display anything else
If 1 is selected, I want to display 1 label and 1 textbox
If 2 is selected, I want to display 2 label and 2 textbox
What am I doing incorrect?
<!DOCTYPE html>
<html>
<head>
<script>
function checkvalue(val)
{
if(val==="No")
{
document.getElementById('guest_label').style.display='none';
document.getElementById('guest_name1').style.display='none';
document.getElementById('guest_label').style.display='none';
document.getElementById('guest_name2').style.display='none';
}
else if(val==="1")
{
document.getElementById('guest_label').style.display='block';
document.getElementById('guest_name1').style.display='block';
}
else
{
document.getElementById('guest_label').style.display='block';
document.getElementById('guest_name1').style.display='block';
document.getElementById('guest_label').style.display='block';
document.getElementById('guest_name2').style.display='block';
}
}
</script>
</head>
<body>
<label for="guest_number">Any Guest: </label>
<select name="guest" onchange='checkvalue(this.value);'>
<option value="No" selected >No</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label for="guest_label" style='display:none'>Other Guest Name: </label>
<input type="text" name="guest_name" id="guest_name1" style='display:none'/>
<input type="text" name="guest_name" id="guest_name2" style='display:none'/>
</body>
</html>
Thanks
Change the second label tag from
<label for="guest_label" style='display:none'>Other Guest Name: </label>
to
<label id="guest_label" style='display:none'>Other Guest Name: </label>
Your JavaScript code will fail at document.getElementById('guest_label') .style.display='none'; when it it is not able to find element whose id is 'guest_label'.
document.getElementById('guest_label') will return null and we cannot call .style for null value.
Check the corrected one.
Unless the code you posted was incomplete, you have no element with id "guest_label". JS returned an error when it tried to reference a property of element with that id, which is a null.
You need to include IDs for guest_label1 and guest_label2, and then toggle guest_label2 of 1 is selected.
<script>
function checkvalue(val)
{
if(val=="No")
{
document.getElementById('guest_label1').style.display='none';
document.getElementById('guest_name1').style.display='none';
document.getElementById('guest_label2').style.display='none';
document.getElementById('guest_name2').style.display='none';
}
else if(val==="1")
{
document.getElementById('guest_label1').style.display='block';
document.getElementById('guest_name1').style.display='block';
document.getElementById('guest_label2').style.display='none';
document.getElementById('guest_name2').style.display='none';
}
else
{
document.getElementById('guest_label1').style.display='block';
document.getElementById('guest_name1').style.display='block';
document.getElementById('guest_label2').style.display='block';
document.getElementById('guest_name2').style.display='block';
}
}
</script>
</head>
<body>
<label for="guest_number">Any Guest: </label>
<select name="guest" onchange='checkvalue(this.value);'>
<option value="No" selected >No</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label id="guest_label1" for="guest_label" style='display:none'>Other Guest Name: </label>
<input type="text" name="guest_name" id="guest_name1" style='display:none'/>
<label id="guest_label2" for="guest_label" style='display:none'>Other Guest Name: </label>
<input type="text" name="guest_name" id="guest_name2" style='display:none'/>
</body>
</html>
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I want to make a javascript to be shown if somebody chooses option A to show the javascripts for the A1 , A2 , A3 and if they choose B to show javascripts for the B1 , B2 , B3. So the A and B it will firstly asked as options from a select tag
For example:
<select name="AorB" >
<option value="" selected="selected">Select...</option>
<option value="A" >Option A</option>
<option value="B" >Option B</option>
</select>
I'm using this way of javascript (Error Alerts):
<SCRIPT language=JavaScript>
<!--
function check(form) {
if (form.Password.value == "")
{ alert("Please enter your Password."); form.Password.focus(); return;}
if (form.Password.value.length < 8)
{ alert("Please enter a valid Password."); form.Password.focus(); return;}
form.submit()
}
//-->
</SCRIPT>
P.S: I don't want to make complications when they choose A to get B option javascripts or reverse.
added - explain: i mean if We select OPTION A there will be shown some Input-s ....and javascript will ask only for the shown input-s so it means OPTION A input-s ... but not to ask for OPTION B input-s too even that they're not shown cause we didnt select OPTION B ... i hope i explained a little for you.
What I understand of your question is that you want a select box and this will determine what fields show up on the form. Then you want the validation script to only validate those fields that show up. This would best be handled with JQuery. Here is some working code to give an example, and a fiddle.
HTML
<div id="wrapper">
<form id="myForm" name="myForm" method="POST" action="http://www.google.com">
<select id="option" name="option">
<option value="X">Choose One...</option>
<option value="A">Option A</option>
<option value="B">Option B</option>
</select>
<div id="optionset-a">
<p>
Input A1: <input name="a1" id="a1" class="option-a" type="textfield" /><br />
Input A2: <input name="a2" id="a2" class="option-a" type="textfield" /><br />
Input A3: <input name="a3" id="a3" class="option-a" type="textfield" /><br />
</p>
</div>
<div id="optionset-b">
<p>
Input B1: <input name="b1" id="b1" class="option-b" type="textfield" /><br />
Input B2: <input name="b2" id="b2" class="option-b" type="textfield" /><br />
Input B3: <input name="b3" id="b3" class="option-b" type="textfield" /><br />
</p>
</div>
<input type="submit" id="submit-button" name="submit" value="Submit" />
</form>
</div>
JQuery
$('#optionset-a').hide();
$('#optionset-b').hide();
$('#submit-button').hide();
$('#option').change(function() {
if ($('#option').val() == 'A') {
$('#optionset-b').hide();
$('#optionset-a').show();
$('#submit-button').show();
} else if ($('#option').val() == 'B') {
$('#optionset-a').hide();
$('#optionset-b').show();
$('#submit-button').show();
}
});
$('#submit-button').click(function() {
var validation = true;
if ($('#option').val() == 'A') {
$('.option-a').each(function() {
if ($(this).val() == '') {
$(this).css('border','1px solid red');
validation = false;
}
});
}
if ($('#option').val() == 'B') {
$('.option-b').each(function() {
if ($(this).val() == '') {
$(this).css('border','1px solid red');
validation = false;
}
});
}
if (validation) {
document.forms["myForm"].submit();
} else { alert('Please fill in all fields.'); }
});
You can easily check the current value of a select tag with:
alert(document.getElementById('AorB').value);
This will alert the current value of the select tag.
You can then check the value whenever the value changes with the onChange event:
<select id="AorB" onchange="alert(document.getElementById('AorB').value);">
<option value="" selected="selected">Select...</option>
<option value="A" >Option A</option>
<option value="B" >Option B</option>
</select>
Here is a jsFiffle example you can use.
You can then do some JavaScript dependent on what the value is, I will not write you the whole code though.
I hope this helps!