Basically if male is selected, make the input named pronoun have a value of his. Else, make the input named pronoun have a value of her.
<select name="sex">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<input type="text" name="pronoun" value="" placeholder="pronoun" />
Try
$("select").change(function() {
if($(this).val() == 'male'){
$('input[name=pronoun]').val('his')
}
else{
$('input[name=pronoun]').val('her')
}
});
or
$("select").change(function() {
$('input[name=pronoun]').val(($(this).val() == 'male') ? 'his' : 'her');
}).change();
Fiddle
use change() event
$("select[name=sex]").change(function () {
$('input[name=pronoun]').val((this.value == 'male') ? "His" : "Her")
});
DEMO
Html Code :
<select name="sex" class="test">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<input type="text" name="pronoun" class="pronoun" value="" placeholder="pronoun"/>
Jquery Code :
<script>
$('.test').on('change', function() {
var value =this.value;
if(value == 'male')
{
$('.pronoun').val('his');
}
else
{
$('.pronoun').val('her');
}
});
</script>
please check it
You should assign an id value and use jQuery's selector and event handler to do what you want.
<select id="sex" name="sex">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<input id="pronoun" type="text" name="pronoun" value="" placeholder="pronoun" />
<script>
$('#sex').change(function() {
$('#pronoun').val($(this).val() == 'female' ? 'her' : 'his');
});
$('#sex').change();
</script>
Use jQuery -
var value = $('select[name="sex"]').val() == 'male' ? 'his' : 'her';
$('input[name="pronoun"]').val(value); // Set the value by default
$('select[name="sex"]').on('change', function() {
if($(this).val() == 'male') {
$('input[name="pronoun"]').val('his');
} else {
$('input[name="pronoun"]').val('her');
}
})
Check it here
Related
I want to change the input field back-ground color based on gender selection.
So far I have:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#male").click(function(){
$("#gender").css("backgroundColor:#0000FF");
});
</script>
<script>
$(document).ready(function(){
$("#female").click(function(){
$("#gender").css("backgroundColor:#FFC0CB");
});
</script>
<form>
<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="male" selected>Male</option>
<option value="female">Female</option>
</select><br>
</form>
This has not been working
you can have this is a JavaScript function and call it with onchange= like this
function changeColor(el) {
if (el.value == "male")
{
document.body.style.backgroundColor = "#0000FF";
}
if (el.value == "female")
{
document.body.style.backgroundColor = "#FFC0CB";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form>
<label for="gender">Gender:</label>
<select id="gender" name="gender" onchange="changeColor(this)">
<option disabled selected value> -- select an option -- </option>
<option value="male">Male</option>
<option value="female">Female</option>
</select><br>
</form>
Events are not supported on <option> element cross browser
You want to use change event of the select then conditionally set color based on new value.
Also note your syntax for css() is not quite right
$("#gender").change(function() {
const color = this.value === 'female' ? '#FFC0CB' : '#0000FF';
$(this).css('backgroundColor', color)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form>
<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="male" selected>Male</option>
<option value="female">Female</option>
</select><br>
</form>
Get the current option:selected value using $(#gender option:selected).val() then set it using the elements tag selector. In your change function you can access the element using $(this). Use a conditinal to see if it is set to $(this).val() === "male" ==> $(this).css("background-color", "lightblue") if not set to female $(this).css("background-color", "pink") by default as that is your only other option.
$(document).ready(function() {
$('#gender option:selected').val() === "male" ? $('#gender').css("background-color", "lightblue") : $('#gender').css("background-color", "pink")
$("#gender").change(function(e) {
$(this).val() === "male" ? $(this).css("background-color", "lightblue") : $(this).css("background-color", "pink")
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<label for="gender">Gender:</label>
<select id="gender" name="gender">
<option value="male" selected>Male</option>
<option value="female">Female</option>
</select><br>
</form>
When Y is selected, both of the input field should display "completed",and when user select "N", both of the input field should be blank but for some reason the code fail, any idea. Many Thanks
if($('.finished1').val(''))
{
$('.finished').val('');
}
else if($('.finished1').val('Y'))
{
$('.finished').val('completed');
}
else{
$('.finished').val('');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<select class="finished1">
<option value="" ></option>
<option value="Y" > Y</option>
<option value="N" > N</option>
</select>
<table>
<td><input type="text" class="finished"></td>
<td><input type="text" class="finished"></td>
</table>
Try this code JSFiddle
$('.finished1').on('change',function(){
if($(this).val() == 'N' || $(this).val() == ''){
$('.finished').val('');
}else{
$('.finished').val('completed');
}
});
You should use jquery's Change API to capture any change in the select input then you can check the selected value and respond accordingly
$('.finished1').on('change', function(){
if($(this).val() == 'Y')
$('.finished').val('completed');
else
$('.finished').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<select class="finished1">
<option value="" ></option>
<option value="Y" > Y</option>
<option value="N" > N</option>
</select>
<table>
<td><input type="text" class="finished"></td>
<td><input type="text" class="finished"></td>
</table>
You'll first need to evaluate the value of the select box through a change event handler and from there you can use switch statement to determine what to do from there.
$(function() {
$('.finished1').on('change', function() {
switch (this.value) {
case 'Y':
$('.finished').val('completed');
break;
case 'N':
case: '':
$('.finished').val('');
break;
default:
//
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<select class="finished1">
<option value="" ></option>
<option value="Y" > Y</option>
<option value="N" > N</option>
</select>
<table>
<td><input type="text" class="finished"></td>
<td><input type="text" class="finished"></td>
</table>
You should use a function that will detect the change in dropdown selected item.
If its detected it will check the values again and if need chang it to what is selected.
$(function () {
$('.finished1').change(function () {
if($('.finished1').val(''))
{
$('.finished').val('');
}
else if($('.finished1').val('Y'))
{
$('.finished').val('completed');
}
else{
$('.finished').val('');
}
});
});
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 5 years ago.
How do I pass $(this) into a function. In my example below I want to populate the address textbox with the value of the selected drop-down option label but only if the value selected is not empty.
The following doesn't work?
$("#AddressId").change(function () {
$("#Address").val(function(index, val) {
val = $(this).val();
return val === "" ? "" : $('option:selected', this).text();
}, this).trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="AddressId">
<option value="">-- Please select --</option>
<option value="1">xyz street</option>
...
</select>
<input id="Address" name="Address" value="" type="text">
To achieve this store the this reference of #AddressId in a variable the change event handler. You can then use that variable in the inner val() function, like this:
$("#AddressId").change(function() {
var $addressId = $(this);
$("#Address").val(function(index, val) {
val = $addressId.val();
return val === "" ? "" : $('option:selected', $addressId).text();
}, this).trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="AddressId">
<option value="">-- Please select --</option>
<option value="1">xyz street</option>
</select>
<input id="Address" name="Address" value="" type="text">
Although note that the function you provide to val() is not required, and is the cause of your problem. You can simplify the code to just this:
$("#AddressId").change(function() {
var address = $(this).val() ? $(this).find('option:selected').text() : '';
$("#Address").val(address).trigger("change");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="AddressId">
<option value="">-- Please select --</option>
<option value="1">xyz street</option>
</select>
<input id="Address" name="Address" value="" type="text">
You could simply add a condition selected_value != "" then assign the selected value if isn't empty :
$("#AddressId").change(function () {
var selected_value = $(this).val();
if( selected_value != ""){
$("#Address").val( selected_value );
}
});
Hope this helps.
$("#AddressId").change(function () {
var selected_value = $(this).val();
if( selected_value != ""){
$("#Address").val( selected_value );
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="AddressId">
<option value="">-- Please select --</option>
<option value="1">xyz street</option>
<option value="2">abc street</option>
<option value="3">def street</option>
</select>
<input id="Address" name="Address" value="" type="text">
I bet you have just overcomplicated it.
$("#AddressId").change(function() {
if ($(this).val()) {
$('#Address').val($(this).find('option:selected').text());
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="AddressId">
<option value="">-- Please select --</option>
<option value="1">xyz street</option>
...
</select>
<input id="Address" name="Address" value="" type="text">
I have a list of countries in a drop-down menu
<select name="country_list" id="countries"><option value="">Please select</option>
<option value="1">USA</option>
<option value="2" selected="">Canada</option>
<option value="3">Rest of the World</option>
<p><input type="text" name="state_field" value="" id="state"></p>
My goal is: If value 3 is selected, the input field "state" disappears. If option 1 or 2 are selected, it should show the field "state".
In case the user has already entered a value in the input field "state" (because option 1 or 2 were previously selected) and he changes it to option 3, the code should first erase the value entered in the state field and then make that field disappear.
How would the Javascript code look like?
I appreciate your help!
UPDATE:
Apparently there is a function already running "onchange", so that the HTML looks this way:
<select name="<select name="country_List" onchange="checkCountry();" id="countries">
<option value="">––> Select</option>
<option value="1">USA</option>
<option value="2">Canada</option>
<option value="3">Mexico</option>"
<option value="4">Argentina</option>"
<option value="5">Australia</option>"
</select>
This seems to be interfering with the codes suggested for this case. Is it there any way to run the code to hide the "state" after the "onchange" function "checkCountry()" has been run?
First you need to validate your html; you're missing a closing </select> tag. Second, the textbox has to be disabled when not required so that it is not included in the form data when the form is submitted. The following should meet your requirements:
$('#countries').on('change', function() {
if( $.trim( this.value ) === '3' ) {
$('#state').val('').prop('disabled', true).closest('p').hide();
} else {
$('#state').prop('disabled', false).closest('p').show();
}
});
$('#countries').on('change', function() {
if( $.trim( this.value ) === '3' ) {
$('#state').val('').prop('disabled', true).closest('p').hide();
} else {
$('#state').prop('disabled', false).closest('p').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="country_list" id="countries"><option value="">Please select</option>
<option value="1">USA</option>
<option value="2" selected="">Canada</option>
<option value="3">Rest of the World</option>
</select>
<p><input type="text" name="state_field" value="" id="state"></p>
UPDATE
And this should meet your updated requirements; you would just update the logic so you end up with the least number of clauses or boolean expressions in the if condition:
$('#countries').on('change', function() {
if( $.trim( this.value ) === '2' || $.trim( this.value ) === '1') {
$('#state').prop('disabled', false).closest('p').show();
} else {
$('#state').val('').prop('disabled', true).closest('p').hide();
}
})
.change();
$('#countries').on('change', function() {
if( ['1','2'].indexOf( this.value ) > -1 ) {
$('#state').prop('disabled', false).closest('p').show();
} else {
$('#state').val('').prop('disabled', true).closest('p').hide();
}
})
.change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="country_list" id="countries"><option value="">Please select</option>
<option value="1">USA</option>
<option value="2" selected="">Canada</option>
<option value="3">Rest of the World</option>
</select>
<p><input type="text" name="state_field" value="" id="state"></p>
Please note that .change() triggers the change event when the page loads so that if the value is not 1 or 2, the textbox will be hidden.
in javascript:
<script>
function show(mode)
{
document.getElementById('state').style.visibility = (mode) ? 'visible' : 'hidden';
}
<script>
<select name="country_list" id="countries"><option value="">Please select</option>
<option value="1" onclick="show(true)">USA</option>
<option value="2" onclick="show(true)">Canada</option>
<option value="3" onclick="show(false)">Rest of the World</option>
<p><input type="text" name="state_field" value="" id="state"></p>
JSFIDDEL
$( "select#countries" )
.change(function () {
if($("select#countries option:selected").attr("value")=="3"){
$("select#countries").hide();
$("#state").show();
$("#state").val($("select#countries option:selected").text());
}else{
$("#state").hide();
$("select#countries").show();
$("#state").val("");
}
});
$( "#state" )
.change(function () {
if($("#state").val()==""){
$("#state").hide();
$("select#countries").show();
}else{
}
});
JSFIDDEL
please help me on this issues
I got 2 text fields, 2 select boxes and button
<input type='text' name='firstName' id='firstName/>
<select id='selectBox1'>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type='text' name='lastName' id='lastName/>
<select id='selectBox2'>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<button type='submit' id='submit'>Submit</button>
the requirements are: (none field required)
if firstName has value, if selectBox1 has no value, button must be disable
if firstName has value, if selectBox1 has value, enable button
Same rules as lastName field and selectBox2.
Please help, thanks.
This code I tried so far.
$(document).ready(function(){
$('#firstName').change(function(){
if($('#firstName').val() != '' && $('#selectBox1).val() == ''{
$('#button').attr('disabled', true);
}else {
$('#button').removeAttr('disabled')
}
});
$('#lastName').change(function(){
if($('#lastName').val() != '' && $('#selectBox2).val() == ''{
$('#button').attr('disabled', true);
}else {
$('#button').removeAttr('disabled')
}
});
$('#selectBox1').change(function(){
if($('#firstName').val() == '' && $('#selectBox1).val() == ''{
$('#button').attr('disabled', true);
}else {
$('#button').removeAttr('disabled')
}
});
$('#selectBox2').change(function(){
if($('#lastName').val() == '' && $('#selectBox2).val() == ''{
$('#button').attr('disabled', true);
}else {
$('#button').removeAttr('disabled')
}
});
});
However, this way is suck. It can't catch all conditions and too long, I am looking for a new way suck as count firstName and selectBox1, if it is even then enable button else disable, but that's my idea, I don't know how to code it.
You have tagged jQuery in your question, but you may find the Knockout library is more helpful here to bind the values of elements to model variables and represent the logic for enabling/disabling the button.
To see this mocked up, have a look at this fiddle.
Here is the HTML:
<input type='text' name='firstName' id='firstName' data-bind='value: firstName'/>
<select id='selectBox1' data-bind='value: select1'>
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type='text' name='lastName' id='lastName' data-bind='value: lastName'/>
<select id='selectBox2' data-bind='value: select2'>
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<button type='submit' id='submit' data-bind='enable: okToSubmit'>Submit</button>
<br/>
OK to submit: <span data-bind='text: okToSubmit'></span>
And the JavaScript:
function Model () {
var self = this;
self.firstName = ko.observable();
self.lastName = ko.observable();
self.select1 = ko.observable();
self.select2 = ko.observable();
self.okToSubmit = ko.computed(function() {
return (
(self.firstName() && self.select1())
|| (!self.firstName() && !self.select1())
) && (
(self.lastName() && self.select2())
|| (!self.lastName() && !self.select2())
);
})
};
ko.applyBindings(new Model());
You can make some improvements, this is a fast response.
But you have to add an option value into select tag.
<html>
<head>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
</head>
<body>
<input type="text" name="firstName" id="firstName"/>
<select id="selectBox1">
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" name="lastName" id="lastName"/>
<select id="selectBox2">
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button type='submit' id='submit'>Submit</button>
<script type="text/javascript">
$(document).ready(function(){
$('#firstName,#selectBox1,#lastName,#selectBox2').change(function(){
checkName();
})
});
$('#submit').attr("disabled","disabled");
function checkName() {
if (($('#firstName').val()!='' && $('#selectBox1').val()!='0')||($('#lastName').val()!='' && $('#selectBox2').val()!='0')) {
$('#submit').removeAttr("disabled");
}else{
alert("DIS");
$('#submit').attr("disabled","disabled");
}
}
</script>
</body>
</html>