I am wondering if someone could help me understand how I can achieve this. I want to show two input boxes only when a certain value in a select box is chosen using javascript (inc jquery).
My select box has this value:
<select name="menu-168" class="wpcf7-validates-as-required">
<option value="Residential">Residential</option>
<option value="Commercial">Commercial</option>
</select>
My input box has this value:
<input type="text" name="text-708" value="" class="wpcf7-validates-as-required" size="40">
In Pseudo code I am after something like this:
<if select name="menu-168" value = "Commerical">
<add css property ".hidden" to input name="text-708">
</if>
My javascript knowledge is so poor, would anyone mind showing me how this is done? This is a JSfiddle with the relevant HTML:
http://jsfiddle.net/K9zGP/
This is using jQuery:
if ($("select[name='menu-168']").val() == "Commercial") {
$("input[name='text-708']").addClass("hidden");
}
On a side note, i would advise you to use class instead of names for referencing HTML elements. Class selection is much faster than attributes.
You can use .on() to attach a listener on the select, to listen for a change event. With the change-event listener you can act whenever someone changes the selected option. Then you can use .toggle() to show/hide the input, depending on what the user has chosen in the select-list.
Something like this:
$(function(){
$("select[name='menu-168']").on("change", function (){
$("input[name='text-708']").toggle($(this).val() !== "Commercial");
});
});
Working example
In this example I use attribute selectors to select your elements, because there is nothing more exact to go on, but you could get slightly better performance by adding ID's to the relevant elements and use those for the selectors instead.
$('#menu-168').on('change', function(){
($this).val() = "Commericial" ?
$('input[name='text-708']').show() : $('input[name='text-708']').hide();
}
})
Related
I have this html part code :
<p><label>Taxe </label>
<select id="id_taxe" name="id_taxe" style="width: 100px;" onchange="taxselection(this);"></select>
<input id="taxe" name="taxe" class="fiche" width="150px" readonly="readonly" />%
</p>
Javascript method :
function taxselection(cat)
{
var tax = cat.value;
alert(tax);
$("#taxe").val(tax);
}
I'd like to set the value of taxe input to the selected value from the dropdownlist.It works fine only where the dropdownlist contains more than one element.
I try onselect instead of onchange but I get the same problem.
So How can I fix this issue when the list contains only one element?
This works:
$('#id_taxe').change(function(){
var thisVal = $(this).val();
var curVal = $('#taxe').val();
if(thisVal != curVal)
$('#taxe').val(thisVal);
$('#select option:selected').removeAttr('selected');
$(this).attr('selected','selected');
});
Use the change method which is very efficient for select boxes. Simply check the item selected isn't currently selected then if not, set the value of the input to the selected value. Lastly you want to remove any option's attr's that are "selected=selected" and set the current one to selected.
Just include this inside a $(document).ready() wrapper at the end of your HTML and the change event will be anchored to the select field.
Hope this helps.
http://jsbin.com/populo
Either always give an empty option, or in your code that outputs the select, check the amount of options, and set the input value straight away if there's only 1 option.
A select with just 1 option has no events, since the option will be selected by default, so there's no changes, and no events.
As DrunkWolf mentioned add an empty option always or you can try onblur or onclick event instead, depending on what you are actually trying to do.
Ok, just to stay close to your code, do it like this: http://jsfiddle.net/z2uao1un/1/
function taxselection(cat) {
var tax = cat.value;
alert(tax);
$("#taxe").val(tax);
}
taxselection(document.getElementById('id_taxe'));
This will call the function onload and get value of the element. You can additionally add an onchange eventhandler to the element. I highly recommend not doing that in the HTML! Good luck.
I've got a multiple select like this configured to auto-populate:
<select id="multiple-select-box" class="selectivity-input" data-placeholder="Type to search condos" multiple>
<option id="Alabama Grove Terrace" value="Alabama Grove" >Alabama Grove Terrace</option>
<option id="Alden Pines" value="Alden Pines" >Alden</option>
</select>
Upon select I realized the script is submitting the visible Text for each option instead of the value="" for each option chosen.
I tried to change var t=$(this).text(); to var t=$(this).value(); thinking that would grab the value instead of the option text but had the same results. What am I missing?
<script>
$(document).ready(function() {
$("#bySub").submit(function(){
$(".selectivity-multiple-selected-item").each(function(){
var t=$(this).text();
//if()
$(".ml").append("<option selected='selected'>"+t+"</option>");
});
})
$('#multiple-select-box').selectivity();
});
</script>
Ok, so I went to check this selectivity plugin you're using and it converts your select into a series of divs as
<div class="selectivity-results-container">
<div class="selectivity-result-item highlight" data-item-id="Alabama Grove">Alabama Grove Terrace</div>
<div class="selectivity-result-item" data-item-id="Alden Pines">Alden</div>
</div>
you have to change your submit function to get the data-item-id property which corresponds to your original select value like
$("#bySub").submit(function(){
$(".selectivity-multiple-selected-item").each(function(){
var t=$(this).data("item-id");
$(".ml").append("<option selected='selected'>"+t+"</option>");
});
edit
fiddle example
In this line, you are appending options to the select, but you have set no value attribute:
$(".ml").append("<option selected='selected'>"+t+"</option>");
As stated in the comments, the "fetch value" method of a form element in jQuery is:
$(this).val()
You might be confusing it with the JavaScript property:
this.value
...which also works. Both return an array of strings if something is selected and set to "multiple"
To follow up on your comment, I don't see your markup for the selected element with class="ml" thus it's almost impossible to debug why your form isn't submitting the values without seeing the bigger picture (i.e. it may be outside the form element). You could try adding the value property to the select element however jQuery should be able to pick up selected options missing the value property by using the text value instead.
I want to alert an option when the mouse-cursor is over it. I use this code:
$("select > option").hover(function ()
{
alert($(this).attr("id"));
});
Unfortunately, this is neither working in IE nor in FF.
Can someone give me a hint please?
You can try this.
$("select").hover(function (e)
{
var $target = $(e.target);
if($target.is('option')){
alert($target.attr("id"));//Will alert id if it has id attribute
alert($target.text());//Will alert the text of the option
alert($target.val());//Will alert the value of the option
}
});
If you make a "listbox" type select box by adding a "size=x" attribute like this:
<select size="3">
<option>...</option>
<option>...</option>
</select>
The hover event will work on the option elements:
$('option').hover(function(){
//code here
});
Here's a workaround (quite decent I guess)-
Use mouseover event to set the size of the select box equal to the no. of its children
Use mouseenter event to get the options. mouseenter works on options perfectly when size attribute is there (we all know that now)
Use mouseout event to set the size of the select box back to 1, to get our normal select box back :)
JSFiddle
I'm using tablesorter and the filter widget. I found this jsfiddle example that allows filtering entries with a select box (Filter by age). I want to add that select box to my example, but it doesn't work when simply adding
$(".selectAge").bind('change', function (e) {
var cols=[]
cols[3] = $(this).val()
$('table').trigger('search', [cols]);
});
to my example code. Would you please tell me how to get the select box to work?
My example code is a copy from the official example.
It was working, it just didn't look like it. The one problem with the select is that the "reset" option needed an empty string as a value:
<select class="selectAge tablesorter-filter" data-column="3">
<option class="reset" value="">Filter by age</option>
<option>>=25</option>
<option><=25</option>
</select>
Here is an updated demo (all I changed was the select and added the blue theme css).
Update: Just so you know, in the next update, you can just give that select a "search" class name like the other input, and be sure to include a data-column="#" attribute, and have it work automatically when you use bindSearch, so there would not be a need to add extra code:
$.tablesorter.filter.bindSearch( $('#mytable'), $('.search') );
I have the following javascript to display a hidden textbox onchange when a certain option is selected. It works fine when multiple options are present. But when the only option is the one that makes the text-box appear, it won't work. I tried onload too for no results.
function showOther(fieldObj, otherFieldID)
{
var fieldValue = fieldObj.options[fieldObj.selectedIndex].value;
var otherFieldObj = document.getElementById(otherFieldID);
otherFieldObj.style.visibility = (fieldValue=='other') ? '' : 'hidden';
return;
}`
Here's the working fiddle http://jsfiddle.net/8bm9R/2/ Look at the first select field
If it has only one option in the list then onchange event doesn't fire . Use onclick instead:
<select name="task" onclick="showOther(this, 'new');">
(JSFiddle please: http://jsfiddle.net/8bm9R/7/).
To prevent this behaviour and be able to use onchange may be it will be good to add some default option to the list , something like "Choose a Job"..
The onchange Event trigges only, if something changed. You could do something like this:
Please choose...
or maybe:
<select name="jobs" onmouseup="showOther(this,'new');">