I have this code and it works fine but not perfect. I don't know how to show up both buttons when I select options "two" and "three".
My code also seems too difficult, is a chance to write my code effectively or not? Thanks a lot.
function display() {
var selectBoxValues = $("#selectbox").val() || [];
if (selectBoxValues == '2') {
$('.select2').removeAttr('hidden', 'hidden');
}
if (selectBoxValues != '2') {
$(".select2").attr('hidden', 'hidden');
}
if (selectBoxValues == '3') {
$('.select3').removeAttr('hidden', 'hidden');
}
if (selectBoxValues != '3') {
$(".select3").attr('hidden', 'hidden');
}
}
$("#selectbox").change(display);
display();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectbox" multiple="multiple">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<input hidden="hidden" type="button" class="button select2" value='Button 2' id="button">
<input hidden="hidden" type="button" class="button select3" value='Button 3' id="button">
jsfiddle
You should use the array in multiple selection and simply code as follows
function display() {
var selectBoxValues = $( "#selectbox" ).val() || [];
$(".button").attr('hidden','hidden'); //add hidden to all element
selectBoxValues.forEach(function(e){
$('.select'+e).removeAttr('hidden','hidden'); //remove hidden for selected elements
})
}
http://jsfiddle.net/hoa849p8/1/
Try this
function display() {
var selectBoxValues = $( "#selectbox" ).val() || [];
if (selectBoxValues.indexOf('2')>-1) {
$('.select2').removeAttr('hidden','hidden');
}
if (selectBoxValues.indexOf('2') == -1) {
$(".select2").attr('hidden','hidden');
}
if (selectBoxValues.indexOf('3')>-1) {
$('.select3').removeAttr('hidden','hidden');
}
if (selectBoxValues.indexOf('3')==-1) {
$(".select3").attr('hidden','hidden');
}
}
Working Fiddle
The issue you have is that the val() returned from the multiple select is an array, so by comparing an array to a string you will encounter issues when multiple options are selected.
To fix this you can use the indexOf() method to find the specific value in the array and show the relevant button using toggle(). Also note I've never seen hidden used as an attribute on an input element, and frankly I'm more amazed it works. I'd suggest you use CSS to hide/show the element instead. Finally, you should make the id attributes unique too, as sharing them between the buttons is invalid. Try this:
function display() {
var selectBoxValues = $("#selectbox").val() || [];
$('.select2').toggle(selectBoxValues.indexOf('2') != -1);
$('.select3').toggle(selectBoxValues.indexOf('3') != -1);
}
$("#selectbox").change(display).change();
.button { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectbox" multiple="multiple">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
<input type="button" class="button select2" value="Button 2" id="button1">
<input type="button" class="button select3" value="Button 3" id="button2">
Thre problem with the code is selectBoxValues contains array of selected elements and we are comparing it only with first element. So we have to disable all the buttons first loop through array and remove hidden wherever necessary.
Here is the fiddle for it. http://jsfiddle.net/hoa849p8/4/
JS code is as below :
function display() {
var selectBoxValues = $( "#selectbox" ).val() || [];
console.log(selectBoxValues);
$('.button').attr('hidden','hidden');
$(selectBoxValues).each(function(i,item){
$('.select'+item).removeAttr('hidden');
});
}
$( "#selectbox" ).change( display );
display();
You can use the following as a little refactoring
http://jsfiddle.net/hoa849p8/2/
HTML
stays as yours
SCRIPT
function display() {
var selectBoxValues = $( "#selectbox" ).val() || [];
var buttons = $(".button");
buttons.attr("hidden", "hidden");
if (selectBoxValues == '2') {
$('.select2').removeAttr('hidden','hidden');
}
if (selectBoxValues == '3') {
$('.select3').removeAttr('hidden','hidden');
}
}
$( "#selectbox" ).change( display );
Related
I want to change my button text as below, I have two select option, draft and publish. When I select to the draft option, button text must be change. But I can't change it without refreshing page. How can I do that ?
<body>
<button id="button" value=""></button>
<select name="select" id="draftOrPublish">
<option value="0">Draft</option>
<option value="1">Publish</option>
</select>
</body>
<script>
var draftOrPublish = $('select#draftOrPublish').val();
if (draftOrPublish == 0) {
$('button#button').text('Save as Draft')
} else if (draftOrPublish == 1) {
$('button#button').text('Publish')
}
</script>
You have to put the code inside $(document).ready and $( 'select#draftOrPublish' ).change
$(document).ready - A page can't be manipulated safely until the document is "ready."
$( 'select#draftOrPublish' ).change - Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
$(document).ready(function(){
$( 'select#draftOrPublish' ).change(function(){
var draftOrPublish = $('select#draftOrPublish').val();
if (draftOrPublish == 0) {
$('button#button').text('Save as Draft')
} else if (draftOrPublish == 1) {
$('button#button').text('Publish')
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="button" value=""></button>
<select name="select" id="draftOrPublish">
<option value="0">Draft</option>
<option value="1">Publish</option>
</select>
You need to bring this into a function in order to assess whether or not the value of the select has changed. This is called an event, and you need an event listener attached to your <select> tag so that you can apply your event handler to change the text of the button. jQuery has a .change() function you can use to listen to the <select> tag
var draftOrPublish = $('#draftOrPublish').val();
if (draftOrPublish == 0) {
$('#button').text('Save as Draft')
} else if (draftOrPublish == 1) {
$('#button').text('Publish')
}
$('#draftOrPublish').change(function () {
var draftOrPublish = $('#draftOrPublish').val();
console.log(draftOrPublish)
if (draftOrPublish == 0) {
$('#button').text('Save as Draft')
} else if (draftOrPublish == 1) {
$('#button').text('Publish')
}
})
You can use change() in jQuery to change text and value dynamically without page load.
$('#draftPublish').change(function () {
var draftPublish = $('#draftPublish').val();
if (draftPublish === "0") {
$('#btn').text('Save as Draft');
$('#btn').val('draft');
} else if (draftPublish === "1") {
$('#btn').text('Publish');
$('#btn').val('publish');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn" value="draft">Save as Draft</button>
<select name="select" id="draftPublish">
<option value="0">Draft</option>
<option value="1">Publish</option>
</select>
I have a select tag with two options 'new' and 'edit'
when someone selects the 'new' option all the input tags in that form should be marked required and when someone selects 'edit' only a few should be marked required.
<select name="todo" id="todo" required>
<option value="">---</option>
<option value="new">Add</option>
<option value="edit">Edit</option>
</select>
Now I tried some functions but they don't seem to work
<script>
var todo = $('#todo option:selected').text();
if (todo == "new") {
$('#Name').attr('required',true);
} else if (todo == "edit") {
//code
}
</script>
and
<script>
function req() {
var selectBox = document.getElementById('todo');
var userInput = selectBox.options[selectBox.selectedIndex].value;
if (userInput == 'new') {
$('#Name').attr('required',true);
} else if (todo == "edit") {
//code
}
}
</script>
where
<select name="todo" id="todo" onchange="return req();" required></select>
just to be sure if it works I put a alert() method in the if condition, but that alert is never fired.
PS. one of the input tags is
<input type="text" id="Name" name="Name">
Thank you for your time in advance...
EDIT
As pointed out by #Maximillian Laumeister in second snippet there was a typo error (which I have corrected here). (sorry for that)
This should be ebough to get you going.
onchange detects whenever a different selection is made. Then based on what option is selected you perform the different instructions.
jQuery(document).ready(function(){
jQuery('#todo').on('change', function(event){
alert(this.value);
if(this.value === 'edit'){
}
else if(this.value === 'new'){
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select name="todo" id="todo" required>
<option value="">---</option>
<option value="new">Add</option>
<option value="edit">Edit</option>
</select>
In your script here you have a typo that throws a console error:
function req() {
var selectBox = document.getElementById('todo');
var userInput = selectBox.options[selectbox.selectedIndex].value;
if (userInput == 'new') {
$('#Name').attr('required',true);
} else if (todo == "edit") {
//code
}
}
Where it says
selectBox.options[selectbox.selectedIndex].value
selectBox needs a capitalization like this:
selectBox.options[selectBox.selectedIndex].value
It seems to be working for me with that one change.
Also, since you asked, your first script isn't working because it needs to be bound to run when the select changes, just like with the first one. In addition, you need to use jQuery's val instead of text to get the value of an option tag. Here is a working version of your second script:
$("#todo").change(function () {
var todo = $('#todo option:selected').val();
if (todo == "new") {
$('#Name').attr('required',true);
} else if (todo == "edit") {
//code
}
});
Try this:
$("select").change(function(){
if($(this).val() === "new")
$("#Name").attr("required","required");
});
You used the option text which is "Add" but in your if statement you compared it to the string "new". That's the reason your code didnt work as expected.
I would like to show a message when someone makes a specific selection from an HTML dropdown list. I have this so far:
<select name="configoption[56]" onchange="recalctotals()">
<option value="235"">USA</option>
<option value="206">Europe</option>
</select>
<span class="message">You selected USA!</span>
And the script:
$(document).ready(function() {
$('#configoption[56]').change(function() {
var selectedValue = $('#configoption[56]').find(":selected").text();
if ( selectedValue == '235' ) {
$('.message').show();
} else {
$('.message').hide();
}
});
});
The above does not appear to be working for me, any suggestions? I would also like to be able to show the message on multiple selected values.
Well your .change function is specifically binded to an element with id="configoption[56]" So just add id to your select element as below
<select name="configoption[56]" id="configoption[56]" onchange="recalctotals()">
//Options
</select>
UPDATE
As per #T.J.Crowder's suggestion on invalid selector I would like to modify a slight change on the id. You can use configoption56 as id and write your select.change as follows:
<select name="configoption[56]" id="configoption56" onchange="recalctotals()">
<!--Options-->
</select>
.change
$('#configoption56').change(function() {
//other codes
});
$('#configoption[56]') is looking for an element with the id, not name, configoption[56] (or it would be, but the selector is invalid, you'd have to escape those brackets).
To use the name:
$('select[name="configoption[56]"]')...
Separately, you can just use val, you don't have to use find to get the selected option. You can also use toggle for show/hide:
$(document).ready(function() {
$('select[name="configoption[56]"]').change(function() {
$('.message').toggle($(this).val() == '235');
});
});
Re your comment about toggling based on || and two values:
$(document).ready(function() {
$('select[name="configoption[56]"]').change(function() {
var value = $(this).val();
$('.message').toggle(value == '235' || value == '123');
});
});
I should be doing it like this: http://jsfiddle.net/nmn17cr6/
HTML:
<select name="configoption[56]" id="configoption" onchange="recalctotals()">
<option value="1">Dummy</option>
<option value="235">USA</option>
<option value="206">Europe</option>
</select>
<span class="message">You selected USA!</span>
CSS:
.message {
display:none;
}
jQuery:
$(document).ready(function() {
$('#configoption').change(function() {
var selectedValue = $(this).val();
if ( selectedValue == '235' ) {
$('.message').show();
} else {
$('.message').hide();
}
});
});
Your approach needs a little modification. All you had to do these changes
$(document).ready(function() {
$("select[name=configoption[56]]").change(function() { // change jquery selector for name
var selectedValue = $('#configoption[56]').val(); // and val to get the value
if ( selectedValue == '235' ) {
$('.message').show();
} else {
$('.message').hide();
}
});
});
And with the same jQuery code. below has to be
<select name="configoption[56]" >
// onchange="recalctotals()"> was not required
I'm trying to apply a show/hide jQuery function to a html drop down box. I want to be able to hide one option and show another when an option from the drop down is selected. This jQuery works with a normal button but not the drop down.
<select style="margin-left:30px;">
<option value="" selected="selected">Please select a region</option>
<option id="uk_btn" value="1">UK</option>
<option id="usa_btn" value="2">USA</option>
</select>
<script>
$("#usa_btn").click(function(){
$("#usa_tbl").show();
$("#uk_tbl").hide();
});
</script>
<script>
$("#uk_btn").click(function(){
$("#uk_tbl").show();
$("#usa_tbl").hide();
});
</script>
You need to put the event for the select box like
$('select').change(function(){
var val = $(this + 'option:selected').attr('id');
if(val == 'uk_btn') {
$("#usa_tbl").hide();
$("#uk_tbl").show();
} elseif(val == 'usa_btn') {
$("#uk_tbl").hide();
$("#usa_tbl").show();
}
});
You can also check using value of the check box like
var val = $(this).val();
if(val == '1') {
$("#usa_tbl").hide();
$("#uk_tbl").show();
} elseif (val == '2') {
$("#uk_tbl").hide();
$("#usa_tbl").show();
}
You can do this:
// Cache the elements first
var $usa_tbl = $("#usa_tbl");
var $uk_tbl = $("#uk_tbl");
// Add a change event handler for the select element
$("#select_ID").change(function () {
if (this.value === '2') {
$usa_tbl.show();
$uk_tbl.hide();
} else if (this.value === '1') {
$uk_tbl.show();
$usa_tbl.hide();
} else {
$uk_tbl.hide();
$usa_tbl.hide();
}
});
where, select_ID is the ID of the select element.
Fiddle Demo
if you have no id on select then you can try
$('select').change(function(){
var val = $(this ).val();
if(val == 2) {
$("#usa_tbl").show();
$("#uk_tbl").hide();
} else {
$("#uk_tbl").show();
$("#usa_tbl").hide();
}
});
or you can do by id
<select id="select_id" style="margin-left:30px;">
now
$('#select_id').change(function(){
....same as previous
});
Root cause: There is no id matching for select in your js.
<select style="margin-left:30px;"> //id attribute is missing
instead use change event handler
<select style="margin-left:30px;" id="usa_btn">
JS:
$("#usa_btn").change(function(){
alert($(this).val()); // to get the value of selected option based on it
// add your condition
$("#usa_tbl").show();
$("#uk_tbl").hide();
});
<select id="country" style="margin-left:30px;">
then
$("#country").change(function(){
$('[id$="_tbl"]').hide();
$('#' + this.value.replace('_btn', '_tbl')) .show()
});
I want to hide a table row based on the value selected from a radio button.
Those radio buttons were created based on value selected from a dropdown list box.
Here is my code
HTML code for listbox
<select name="txtLT" id="LT" >
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
Jquery
$(document).ready(function() {
$("#LT").change(function() {
var selVal = $(this).val();
$("#tblerow").html('');
if(selVal == 'c') {
$("#tblerow").append('<td><input type="radio" id="cmpof" name="cmpof" value="1" onclick="show()" />1 <input type="radio" id="cmpof" name="cmpof" value="2" onclick="hide()"/>2</td>');
}
});
});
Now if radio button 2 is selected, then the table row with tr2 should disappear.
Please help me to find the solution.
EDIT
I tried the following JavaScript, but it does not hide the row.
function show() { document.getElementById('sbjrow').style.display = 'block'; }
function hide() { document.getElementById('sbjrow').style.display = 'none'; }
Could you please suggest what is wrong here?
You can just use the hide and show function of jQuery like so:
$(function () {
$('#LT').change(function () {
if ($(this).val() == 'c') {
$('.radios').show();
} else {
$('.radios').hide();
}
});
$('input[name=cmpof]').change(function () {
if ($('#LT').val() == 'c' && $(this).val() == 'bar') {
$('#table tr').eq(1).hide();
} else {
$('#table tr').eq(1).show();
}
});
});
If you don't want the table row to show up by default, just do it with css.
JsFiddle example: http://jsfiddle.net/AX5TJ/1/
Updated version that may be closer to what you want: http://jsfiddle.net/AX5TJ/2/
Also be carefull, you have a syntax error in your script : when you define $("#LT").change(function() {, you have to close with });