I'd like to change some contact form fields with jquery.
That's the normal code:
<label for="avia_3_1">Nome <abbr class="required" title="Richiesto">*</abbr></label>
That's the jquery I'm using. I have a combobox, the name of the label should change based on the user selected item. It works, but the tag <abbr> disappear.
//$.noConflict();
jQuery( document ).ready(function( $ ) {
$("#avia_1_1").change(function(){
switch($("#avia_1_1").val()){
case "Privato":
$("label[for='avia_3_1']").text("Nome");
$("abbr[title='Richiesto']").text("*");
break;
case "Azienda":
$("label[for='avia_3_1']").text("Ragione Sociale");
$("abbr[title='Richiesto']").text("*");
break;
}
});
});
You can use .html() instead of .text(). Check updated script below..
//$.noConflict();
jQuery( document ).ready(function( $ ) {
$("#avia_1_1").change(function(){
switch($("#avia_1_1").val()){
case "Privato":
$("label[for='avia_3_1']").html('Nome<abbr class="required" title="Richiesto">*</abbr>');
break;
case "Azienda":
$("label[for='avia_3_1']").html('Ragione Sociale<abbr class="required" title="Richiesto">*</abbr>');
break;
}
});
});
That's because your <abbr> tag is inside the <label> tag. You will have to create <abbr> on every change event. Below is a sample code that you can use:
jQuery(document).ready(function($) {
$("#avia_1_1").change(function() {
switch ($(this).val()) {
case "Privato":
$("label[for='avia_3_1']").text("Nome");
$("abbr[title='Richiesto']").text("*");
break;
case "Azienda":
$("label[for='avia_3_1']").text("Ragione Sociale");
$("abbr[title='Richiesto']").text("*");
break;
}
$('<abbr />', {
"class": 'required',
'title': 'Richiesto'
}).appendTo($(this));
});
});
That's why abbr is removed... $("label[for='avia_3_1']").text("Nome");
Try this:
$("label[for='avia_3_1']").html("Nome <abbr class='required' title='Richiesto'>*</abbr>");
It is removed because .text("") removes the content of the element.
you can try this.
$("label[for='avia_3_1']").html('Nome'+ '<abbr class="required" title="Richiesto">*</abbr>');
$("#avia_1_1").change(function(){
switch($("#avia_1_1").val()){
case "Privato":
$("label[for='avia_3_1']").html('Nome <abbr class="required" title="Richiesto">*</abbr>');
break;
case "Azienda":
$("label[for='avia_3_1']").html('Ragione Sociale <abbr class="required" title="Richiesto">*</abbr>');
break;
}
});
as you are changing value of label, abbr is inside label so it remove the abbr and update with selected value removing abbr.
<select id="avia_1_1" name="test">
<option value="Privato">Privato</option>
<option vaue="Azienda">Azienda</option>
</select>
<label for="avia_3_1">Nome </label>
<abbr class="required" title="Richiesto">*</abbr>
jQuery( document ).ready(function( $ ) {
$("#avia_1_1").change(function(){
switch($("#avia_1_1").val()){
case "Privato":
$("label[for='avia_3_1']").text("Nome");
$("abbr[title='Richiesto']").text("*");
break;
case "Azienda":
$("label[for='avia_3_1']").text("Ragione Sociale");
$("abbr[title='Richiesto']").text("*");
break;
}
});
});
Working Demo
Related
I am trying to search for a specific substring in text retrieved from options that are populated from mysql, how do i return the text value of the option selected so that i can search for my substring.
$(document).ready(function() {
$("borrowitem").change(function() {
$("#borrowitem option:selected").text();
var optionValue = $(this).text;
if (optionValue == "non-consumable") {
$("#showtime").hide();
} else {
$("#showtime").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control input-lg borrowitem" name="borrowitem[]" required="required" id="borrowitem"><option></option></select>
why are there two two $("#showtime").hide(); & not a show() in the if else..
anyways here is code you had missed the ID selector #
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#borrowitem").change(function(){
var optionValue= $( "#borrowitem option:selected" ).val();
console.log(optionValue);
if(optionValue == "non-consumable") {
$("#showtime").hide();
}
else{
$("#showtime").show();
}
});
});
</script>
</head>
<body>
<select class="form-control input-lg borrowitem" name="borrowitem[]" required="required" id="borrowitem">
<option value="non-consumable">carrot</option>
<option value="non-consumable">potato</option>
<option value="opel">Opel</option>
<option value="non-consumable">apple</option>
</select>
<br/><hr/><br/>
<div id="showtime">SHow TIME</div>
</body>
</html>
Look for selected value as $(this).val() === 'non-consumable' inside the change event. For instance
$('#borrowitem').change(function () {
console.log($(this).val() === 'non-consumable');
});
<select id="borrowitem">
<option>non-consumable</option>
<option>consumable</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
If it's a multiple select, change the condition to
$(this).val().indexOf('non-consumable') !== -1
try this example code
you pass id with # in onchange event and write onchange as .on("change",function()) and get selected using $("#borrowitem option:selected").text() so it will work
$(document).ready(function() {
$("#borrowitem").on("change", function() {
// alert($("#borrowitem option:selected").text());
var optionValue = $("#borrowitem option:selected").text();
//alert(optionValue);
if (optionValue == "non-consumable") {
$("#showtime").hide();
} else {
$("#showtime").show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control input-lg borrowitem" name="borrowitem[]" required="required" id="borrowitem"><option>test</option>
<option>non-consumable</option></select>
<span id="showtime">hello</span>
Here you go.
Something the others missed is that you have to check when the page loads what the state of the initial showtime element should be. For example: we could load it pre-hidden with non-consumable as the selected option, or we could load it shown with the selected option consumable.
One big reason we may need to do that is for a "sticky" form. Which is a form that retains it's value after a submission attempt.
To do that, all we need to do is "functionize" the action we want to take. Basically just create a function to do it, then call it from the event handler and from the onReady event when the page is ready. Instead of placing it directly in the event handler.
So Orange is consumable and then green is non-consumable. I wanted something visible so I added the orange box for the showtime. Then I wrapped that in a green box to hold the place open when it's hidden. Mainly this was to keep the select element from jumping around when the box was hidden, but I also liked the contrast.
Another thing most ( all ) of them missed is this:
so that i can search for my substring
see below for explanation
(function($){
$(document).ready(function(){
/* set state of showtime */
function setShowtimeState ()
{
var text = $('#borrowitem').find('option:selected').text();
var Regx = new RegExp(/\bnon\-consumable\b/, 'i'); //case insensitive
if( Regx.test(text) )
$('#showtime').hide();
else
$('#showtime').show();
}
//call on change of the select element
$('#borrowitem').change(setShowtimeState );
//call on ready to set the initial state
setShowtimeState ();
});
})(jQuery);
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<div id="showtime-wrapper" style="margin-bottom: 5px;width:50px;height:50px;background:green; border: 1px solid black;">
<div id="showtime" style="width:100%;height:100%;background:orange;"> </div>
</div>
<select class="form-control input-lg borrowitem" name="borrowitem[]" required="required" id="borrowitem">
<option>- pick an option - </option>
<option>non-consumable</option>
<option>consumable</option>
<option>this is non-consumable</option>
<option>this is consumable</option>
<option>Case Insensitive NON-Consumable</option>
</select>
REGx
I used a Regular Expression to match the sub-string. This is a bit complex if you never messed with them but it's the best way to match. I will walk you through the pattern I used a bit:
/\bnon\-consumable\b/
So to break this down for you
the / is called the delimiter, its used to mark the start|end of the regx
the \b matches a word boundary. For example if we use a | to mark the word boundaries for this string |foobar| |is| |a| |word|. The purpose of that is if we look for the sub-string foo, we could match that in foobar but if we look for \bfoo\b it would not match because there is no word boundary between foo and bar. This helps prevent false matches on sub-strings.
the "letters" are just letters and match literally letter for letter
then we have the closing delimter / that ends the Regx
The second argument of new RegExp is the flag, an I used the i flag for case-insensitive matching, you can omit it for case sensitive matches.
For more info https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
One thing I feel obligated to mention is you have the name of the select borrowitem[] with the array brackets. Typically this is done for one of 2 reasons:
Pass multiple elements of this name to the server
Set the multiple flag for the select box and make it multi-select
Both of these would require some code changes. But there is a 3rd option, you just did it, because.
I have a select list that I would like to display a different image in the same div each time the user changes the select list. Here's what I have so far:
HTML
<div id="branches">
<h3>British Columbia Old Age Pensioners' Organization — Branches</h3>
<select id="branch-number" class="form-control">
<optgroup label="British Columbia">
<option value="1">Branch 1</option>
<option value="2">Branch 2</option>
<option value="http://placehold.it/350x350">Branch 3</option>
<option value="http://placehold.it/350x450">Branch 4</option>
</optgroup>
<optgroup label="Alberta">
<option value="5">Branch 5</option>
<option value="6">Branch 6</option>
...etc...
</select>
<div id="img-window">
<img id="branch-img" src="http://placehold.it/350x150" class="img-responsive">
</div><!-- end img-window -->
</div><!-- end branches -->
jQuery
$(document).ready(function () {
$('#branch-number').on('change', function () {
alert('something happened');
// var branchVal = $('this').val();
var branchVal = $('option:selected').val();
switch (branchVal) {
case 1:
$('#branch-img').attr('src', 'http://placehold.it/150x150');
break;
case 2:
$('#branch-img').attr('src', 'http://placehold.it/250x250');
break;
case 3:
$('#branch-img').attr('src', 'http://placehold.it/350x350');
break;
default:
$('#branch-img').attr('src', 'http://placehold.it/1450x1450');
}
});
});
Right now, nothing happens when the user changes the select list. I am trying to do this with an <img> tag instead of CSS so that for increased accessibility of the alt="" attribute.
I'm just starting to get the hang of javascript / jQuery ... any help appreciated.
Here's a fiddle:
https://jsfiddle.net/r1fcvs7s/4/
edit: syntax should be all good now.
Your case syntax is wrong. It should be:
switch(branchVal) {
case 1:
$('#branch-img').attr('src', 'http://placehold.it/150x150');
break;
case 2:
$('#branch-img').attr('src', 'http://placehold.it/450x450');
break;
}
The : comes after the value, not before. And you need break between the cases unless you want to fall through into the next case (which you obviously don't in this code).
You should have gotten a syntax error in the Javascript console. How did you miss that?
BTW, to get the value of the <select>, you can use $(this).val(). You don't need to access option:selected.
HTML
<select id="branch-number" class="form-control">
<optgroup label="British Columbia">
<option>1</option>
<option>2</option>
<option>Three</option>
<option>Four</option>
</optgroup>
</select>
jQuery
$(document).ready(function() {
$('#branch-number').on('change', function() {
// var branchVal = $('this').val();
var branchVal = $('#branch-number').find(':selected').text();
switch(branchVal) {
case "1":
$('#branch-img').attr('src', 'http://placehold.it/350x350/9d9999/000000&text=Abbotsford+Branch');
break;
case "2":
$('#branch-img').attr('src', 'http://placehold.it/250x250/9d9999/000000&text=Chilliwack+Branch');
break;
case "Three":
$('#branch-img').attr('src', 'http://placehold.it/150x150/9d9999/000000&text=Mission+Branch');
break;
case "Four":
$('#branch-img').attr('src', 'http://placehold.it/350x350/9d9999/000000&text=Vancouver+Branch');
break;
}
});
});
Had to use the .find(:selected).text(); method instead of the .val(); method. This is because the value attribute is only used for forms and other things but, not boxes.
I am newbie in javascript and html5. I am trying to achieve the following:
I have a drop down with the below values:
Everything:
From:
To:
User will have a text box to enter the search term. When the user enters a text like "blah" and selects "From:" in the drop down and hits enter, the text in the text box should say
"From: blah" and searches all the messages from Blah.
This is a feature in Outlook that i am trying to implement. I have tried to use chosen js but could not proceed much. Could anyone provide any pointers?
Assume this is your html:
<select id="cmbClause">
<option value="1">Everything:</option>
<option value="2">From:</option>
<option value="3">To:</option>
</select>
<input type="text" id="txtSearch" />
<input type="text" id="txtResult" />
Then try jQuery script below:
$(function(){
$('#txtSearch').keypress(function(e) {
// if user press "Enter" on txtSearch and txtSearch not empty
if(e.keyCode==13 && $('#txtSearch').val().trim()!="") {
$('#txtResult').val(setClause($('#cmbClause').val()) + $('#txtSearch').val());
}
});
function setClause(val) {// Get select (dropdown) value and return string
var clause;
switch(val) {
case '1': clause = "Everything "; break;
case '2': clause = "From "; break;
case '3': clause = "To "; break;
}
return clause;
}
});
I have a selectbox with a couple of options in it. When an option is selected, the Javascript code gets the value of the selected option and has to change the font of a text accordingly.
I figured I would use the Switch-Case statement because I have multiple options, but it doesn't seem to work, nothing changes.
Javascript
function font() {
var sf = document.getElementById('box').value;
var generate = document.getElementById('generate');
switch (sf) {
case 'TimesNewRoman':
generate.style.fontFamily('Times New Roman')
break;
case 'Georgia':
generate.style.fontFamily('Georgia')
break;
case 'PalatinoLinotype':
generate.style.fontFamily('Palatino Linotype')
break;
default:
generate.style.fontFamily('Arial')
}
}
HTML
<select id="box" onchange="font();">
<option id="TNR" value="TimesNewRoman">Times New Roman</option>
<option id="GRG" value="Georgia">Georgia</option>
<option id="PLT" value="PalatinoLinotype">Palatino Linotype</option>
</select>
<br />
<div id="generate">This is some text</div>
NOTE
I have more options in the list but I have shorten it for the sake of simplicity.
Am I wrong for using this statement, or am I missing something entirely?
You haven't made an assignment, use generate.style.fontFamily = "Arial";
My JavaScript switch case isn't working for some reason, and I can't figure it out.
I am trying to display a certain input only of a certain option is chosen:
function showHideSchools(obj){
var curSel = obj.options[obj.selectedIndex].value
switch(curSel)
{
case '0-2':
document.getElementById('schools').style.display="none"
break;
case '3-5':
document.getElementById('schools').style.display="block"
break;
case '6-8':
document.getElementById('schools').style.display="block"
break;
case '9-11':
document.getElementById('schools').style.display="block"
break;
case '12-14':
document.getElementById('schools').style.display="block"
break;
case '15-16':
document.getElementById('schools').style.display="block"
break;
case '17-18':
document.getElementById('schools').style.display="block"
break;
case '19 and over':
document.getElementById('schools').style.display="block"
break;
default:
document.getElementById('schools').style.display="none"
}
}
Here is the HTML:
<p>
<label for="childrenAges">Ages of children still living at home: </label>
<select name="childrenAges" id="childrenAges" onchange="showHideSchools(this);">
<option>Select one</option>
<option value="0-2">0-2</option>
<option value="3-5">3-5</option>
<option value="6-8">6-8</option>
<option value="9-11">9-11</option>
<option value="12-14">12-14</option>
<option value="15-16">15-16</option>
<option value="17-18">17-18</option>
<option value="19 and over">19 and over</option>
</select>
</p>
<div id="schools" style="display:none">
<p>
<label for="schoolName">What school/s do they attend: </label>
<input type="text" name="schoolName" />
</p>
</div>
You don't need a switch case:
if(obj.options[obj.selectedIndex].value != "Select one" && obj.options[obj.selectedIndex].value != "0-2"){
document.getElementById('schools').style.display="block";
}else{
document.getElementById('schools').style.display="none";
}
As others said, your case tests didn't match the value of the first three options.
There isn't any reason to repeat that line document.getElementById('schools').style.display="block"; over and over. Just let all the conditions that lead to that outcome fall through to a single line with that instruction.
function showHideSchools (obj) {
var curSel = obj.options[obj.selectedIndex].value;
switch (curSel) {
case '2':
case '3':
case '9-11':
case '12-14':
case '15-16':
case '17-18':
case '19 and over':
document.getElementById('schools').style.display = "block";
break;
case '1':
default:
document.getElementById('schools').style.display = "none";
}
}
The value of the options 0-2, 3-5 and 6-8 are 1, 2 and 3, respectively.
You have them as 0-2, 3-5 and 6-8 in your JavaScript code.
0-2
3-5
6-8
case '0-2':
case '3-5':
Your values and case parameters do not correspond. When you select '0-2', .value is "1".
From your code, it looks like you'd be better off switching the criteria, so that you hide when the value is "" and show the box in all other cases - that looks like what you're trying to do...?
Other than that, I'm not 100% sure what your problem is, but if the problem is that it's not working for the first three items, then the reason is that their values will be 1, 2 and 3, not 0-2 etc, that you're testing for.
The case values are wrong. They have to match the value in the <option> tags, not the displayed text.
So they would be
case '1':
document.getElementById('schools').style.display="block"
break;
case '2':
document.getElementById('schools').style.display="block"
break;
etc.
You are not specifying the option values, rather their representation in switch. For example:
case '0-2':
There is nothing like that in the select's option values.
case '1':
...
case '2':
...
case '3':
...
case '9-11':
...
case '12-14':
...
I.e., you should check the content of option's value attribute, not text inside <option></option> tags.