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('');
}
});
});
Related
I did this in javascript code, but it does not work perfectly, the second "select" perfectly "disabled" by default, but I want when I selected an option from the first "select": the second will be "enabled" but it does not work,
and this is the code :
// JavaScript Document
var update_select = function () {
if ($("#edit-field-villes-tid").is(":selected")) {
$('#edit-field-villages-tid-option-limit').prop('disabled', false);
}else {
$('#edit-field-villages-tid-option-limit').prop('disabled', 'disabled');
}
};
$(update_select);
$("#edit-field-villes-tid").change(update_select);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form >
<div class="views-exposed-widgets clearfix">
<label for="edit-field-villes-tid">Villes </label>
<select id="edit-field-villes-tid" name="field_villes_tid" class="form-select">
<option value="All" selected="selected">- Any -</option>
<option value="21">Sousse</option>
<option value="22">Tunis</option></select>
<label for="edit-field-villages-tid-option-limit">Villages </label>
<select id="edit-field-villages-tid-option-limit" name="field_villages_tid_option_limit" class="form-select">
<option value="All" selected="selected">- Any -</option>
<option value="24">El Zahra</option>
<option value="23">Sahlool</option>
</select>
<input class="ctools-use-ajax ctools-auto-submit-click js-hide form-submit" type="submit" id="edit-submit-tunisia" name="" value="Apply">
</div></form>
someone can help me ?
This worked for me;
<script language='javascript' type='text/javascript'>
var update_select = function () {
if ($("#edit-field-villes-tid")[0].selectedIndex > 0) {
console.log("is selected");
$('#edit-field-villages-tid-option-limit').prop('disabled', false);
} else {
console.log("is NOT selected");
$('#edit-field-villages-tid-option-limit').prop('disabled', true);
};
};
$(update_select);
$("#edit-field-villes-tid").on("change", update_select);
</script>
Changing the IF check to [0].selectedIndex > 0 was the key.
function validatForm(){
$("#add_form input[type=text]").each(function() {
if(this.value == null || this.value == '') {
$(this).addClass("alert_focus");
alert('Required Field Cannot Be Emmpty')
$("html, body").animate({ scrollTop: $(this).offset().top }, 500);
}
});
<form id="add_form">
<table>
<tr>
<th>Select*</th>
<th>Field A*</th>
<th>Field B*</th>
<th>Field C*</th>
<tr>
</tr>
<td><select class="select" name="select1">
<option value="" selected>Please Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</td>
<td><input type="text" name="a_field1" /></td>
<td><input type="text" name="b_field1" /></td>
<td><input type="text" name="c_field1" /></td>
</tr>
<tr>
<td><select class="select" name="select2">
<option>Please Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</td>
<td><input type="text" name="a_field2" /></td>
<td><input type="text" name="b_field2" /></td>
<td><input type="text" name="c_field2" /></td>
</tr>
<tr>
<td><select class="select" name="select3">
<option>Please Select</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</td>
<td><input type="text" name="a_field3" /></td>
<td><input type="text" name="b_field3" /></td>
<td><input type="text" name="c_field3" /></td>
</tr>
............ and so on.
</table>
Submit
<input type="hidden" value="submit" value="submit" />
</form>
The above works well so far for input[type="text"].
Is there anyway I can check if any of the select is empty/not_selected and identify that element?
I have tried:
$(".select").each(function() {
if (!$(".select option:selected").length) {
alert('Required Field Cannot Be Emmpty')
$("html, body").animate({ scrollTop: $(this).offset().top }, 500);
}
});
return false;
But it doesn't seems to work.
Your help is appreciated :)
Many Thanks
With the help from RobG, here is the script that works:
<script>
function validatForm(){
$("#add_cat input[type=text]").each(function() {
if(!this.value) {
$(this).addClass("alert_focus");
alert('Required Field Cannot Be Emmpty');
$("html, body").animate({ scrollTop: $(this).offset().top }, 500);
}
});
$('#add_cat select').each(function(i, select){
if (select.selectedIndex <= 0) {
alert('Please select an option');
}
return false;
});
};
</script>
If you want to iterate over the select elements, the selector is: 'select'.
jQuery's each is different to the built–in Array forEach method, the parameters are index, element rather than element, index which might be expected.
You can compare the select's value to '' (empty string), however since nearly all browsers will select the first option by default, a better strategy is to set the first option to the default selected and check that, e.g.
<select name="...">
<option value="" selected>Select one
<option value="one">one
</select>
then:
$('select').each(function(i, select){
if (select.selectedIndex <= 0) {
alert('Please select an option');
}
});
The selected index will be -1 if no option is selected, that shouldn't happen often but needs to be accommodated.
You need to use element selector(select) not class selector(.select), then you can see whether it have a value instead of checking whether there is a selected option
$("select").each(function () {
if (!$(this).val().length) {
alert('Required Field Cannot Be Emmpty')
$("html, body").animate({
scrollTop: $(this).offset().top
}, 500);
}
});
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
I want to change option values as per the input value. For example if i put value02 in input then the select should show options having title="value02" other options will hide.
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
Please help
I think this is the ANSWER you looking for
WORKING:DEMO
HTML
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">01 1</option>
<option value="2" title="value01">01 2</option>
<option value="1" title="value02">02 1</option>
<option value="2" title="value02">02 2</option>
<option value="1" title="value03">03 1</option>
<option value="2" title="value03">03 2</option>
</select>
JS/JQuery
$(document).mouseup(function (e)
{
var container = $("select");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$("#program option[title='value01']").show();
$("#program option[title='value02']").show();
$("#program option[title='value03']").show();
}
});
$("select").click(function()
{
var getVal = $("input[type=text]").val();
if(getVal == "value01")
{
$("#program option[title='value02']").hide();
$("#program option[title='value03']").hide();
}
else if(getVal == "value02")
{
$("#program option[title='value01']").hide();
$("#program option[title='value03']").hide();
}
else if(getVal == "value03")
{
$("#program option[title='value01']").hide();
$("#program option[title='value02']").hide();
}
else
{
}
});
Assuming your question means that you want to hide <option> tags that don't match the title that the user typed (so only the matching options are available in the <select>), you can do it like this:
You can monitor changes to the fname field and upon each change see if the current value of the fname field matches any of the titles and, if so, hide the options that don't match, leaving only the matching options. If none match, then show all the options.
$("#fname").on("input", function() {
var option;
if (this.value) {
var sel = $("#program");
option = sel.find('option[title="' + this.value + '"]');
}
if (option && option.length) {
// show only the matching options
sel.find("option").hide();
option.show();
} else {
// show all options
sel.find("option").show();
}
});
Try this. It disables all the options. And add new option that is entered from input field. You need to press enter after entering value in input field.
$(document).ready(function() {
$('#fname').bind('keypress', function(e) {
var code = e.keyCode || e.which;
if (code == 13) { //Enter keycode
$("#program").append($('<option/>', {
value: $("#fname").val(),
title: $("#fname").val(),
text: $("#fname").val()
}));
$("#program option[value!=" + $("#fname").val() + "]").attr('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
Use jquery. Get the value of the input and search the option for that value and set the value. Try with -
$('#program').val($('#program option[title=' + $('#fname').val() + ']').val())
Try this...
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
$('#fname').on('blur', function(){
var value=$("#fname").val();
$('#program').val($('#program option[title=' + value + ']').val());
});
demo:https://jsfiddle.net/qrecL29u/2/
And without jQuery
var field = document.getElementById('fname'),
select = document.getElementById('program');
field.addEventListener('keyup', function(evt) {
for (var i = 0; i < select.children.length; i++) {
if (select.children[i].title !== field.value) select.children[i].style.display = 'none';
else select.children[i].style.display = 'block';
}
});
<input type="text" name="fname" value="" id="fname">
<select name="program" id="program">
<option>Select Program Type</option>
<option value="1" title="value01">1</option>
<option value="2" title="value01">2</option>
<option value="1" title="value02">1</option>
<option value="2" title="value02">2</option>
<option value="1" title="value03">1</option>
<option value="2" title="value03">2</option>
</select>
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