I am trying to find and replace an option in select box,
I am using this piece of code but this isn't working Help me out please!
$(".select" option).each(function() {
if $(this).val() == "Unknown" {
$(this).val().replaceWith( "---------" );
}
});
You need to put option inside the selector and use setter version of val():
$(".select option").each(function() {
if $(this).val() == "Unknown" {
$(this).val("---------");
}
});
something like this would also work:
$('#mySelect option:contains("Unknown")').text("---------");
http://jsfiddle.net/tKP68/
try out this...
$(".select option").each(function() {
if $(this).val() == "Unknown" {
$(this).val().replaceWith( "---------" );
}
});
Depending on what you want achieve:
$('select option').each(function () {
if (this.value === 'Unknown') { // You should always use === instead of ==
this.value = '---------'; // Change value
this.innerText = '---------'; // Change the option's text
}
});
Related
I am making a form with 4 input fields , 2 date picker and 3 select fields. I want to add onkeyup event on every field present in form. When user fill more than 2 field, result start showing in div named result with the help of ajax. I mean when ever i change any field data will populate live in div with ajax.
$('#form input,select').keyup(function() {
if ($('#from').val() !== '' && $('#to').val() !== '' && $('#depa').val() !== '' && $('#arr').val() !== '') {
$.get('ajaxSearch.php', $("#form").serialize(), function(data) { $('#result').html(data); });
} else {
}
});
I tried but some field post with ajax but not all of them and if i change again it doesn't work again
Try this
Change
$('#form input,select').keyup(function() {
to
$('form').change(function() {
Make sure that you are using jquery 1.4 or higher
Just Copy paste below code...
It might solve your problem.
$('#form input,select').keyup(function() {
var count=0;
$("input").each(function(){
if($(this).val()!="") {
count++;
}
if(count>1) {
$.get('ajaxSearch.php', $("#form").serialize(), function(data) { $('#result').html(data); });
}
else{
$("#result").hide();
}
});
});
You can use 'on' with 'change'.
$("#form").on("change", ":input", function(){alert('changed some element');});
Fiddle - http://jsfiddle.net/XH5zm/
JSBin - http://jsbin.com/UKIweJE/1/edit
I'm trying to enable/disable an input textbox by toggling if a checkbox is checked or not.
$(document).ready(function() {
if ($('.enable-padding').attr('checked') === true) {
$('.grab-padding').attr('enabled','enabled');
$('.grab-padding').val("13px");
} else {
$('.grab-padding').attr('disabled','disabled');
$('.grab-padding').val(" ");
}
});
What exactly am I'm doing wrong?
Any help is greatly appreciated.
You don't listen to the change event.
There is no enabled property.
.attr() doesn't return a boolean value and it doesn't change the properties.
$('.enable-padding').on('change', function() {
$('.grab-padding').prop('disabled', !this.checked)
.val(this.checked ? "13px" : "");
});
You have to add an event for change the state of checkbox:
$(document).ready(function() {
$('.enable-padding').on('change',function(){
if ($('.enable-padding').is(':checked')) {
$('.grab-padding').removeAttr('disabled');
$('.grab-padding').val("13px");
} else {
$('.grab-padding').attr('disabled','disabled');
$('.grab-padding').val(" ");
}
});
});
and modifiy the input for this:
<input class="grab-padding" type="text" value="13px"></td>
$('#chbox').click(function () {
if ( $('#txt_data').attr('disabled') =='disabled' ){
$('#txt_data').removeAttr('disabled');
}else{
$('#txt_data').attr('disabled','disabled');
}
});
http://jsfiddle.net/uz79M/ Here's my pretty simple code, can anyone tell me why the hell it wont start working xD I'm missing something silly ain't I? Why does the damn value remain on ="test"?
Thanks for reading!
(P.S.: Did I get my tags right or should I delete/replace some of them?)
use .val() to change the value of an input element
jQuery('input[name="prop_sc_AttachmentType"]').val(selectvalue);
Ex: (I've done some more clean up in the code)
jQuery(function ($) {
$("#AttachmentTypeSelect").change(function () {
var selectvalue = $(this).val();
if (selectvalue !== "select") {
$('input[name="prop_sc_AttachmentType"]').val(selectvalue);
}
});
});
Demo: Fiddle
Also the use of .attr() was wrong, it should be
$(element).attr(attribute, value)
ex
$(element).attr('tab-index', 1)
Your code is not correct, it should be
.attr('value', selectValue );
or better
.val( selectValue );
The attr an prop functions of jquery selector are for the attributes which don't have function for that selector. if you want to check or change the value of an input you should call val() function of selector. change your code to this :
jQuery('input[name="prop_sc_AttachmentType"]').val(selectvalue);
change:
jQuery('input[name="prop_sc_AttachmentType"]').attr('value="' + selectvalue + '"');
to
jQuery('input[name="prop_sc_AttachmentType"]').val(selectvalue);
Firstly your attr() syntax is incorrect, it should be attr('prop', 'value');, secondly to set a value, you should use val() anyway. Try this:
jQuery('input[name="prop_sc_AttachmentType"]').val(selectvalue);
Example fiddle
attr() change to val()
jQuery('input[name="prop_sc_AttachmentType"]').val(selectvalue);
http://jsfiddle.net/uz79M/3/
it is
.attr( attributeName, value )
so it will be
jQuery('input[name="prop_sc_AttachmentType"]').attr('value',selectvalue);
You should use val() to change it's value:
jQuery('input[name="prop_sc_AttachmentType"]').val(selectValue);
The attribute property is better used for other attributes like title, name etc.
Instead of
if (selectvalue !== "select") {
jQuery('input[name="prop_sc_AttachmentType"]').attr('value="' + selectvalue + '"');
}
Use
if (selectvalue !== "select") {
jQuery('input[name="prop_sc_AttachmentType"]').val( selectvalue);
}
Fair trade !:)
You have to use .val() function,
jQuery('input[name="prop_sc_AttachmentType"]').val(selectvalue); //standard
Or you can correct your code :
jQuery('input[name="prop_sc_AttachmentType"]').attr('value', selectvalue);
FIDDLE DEMO
Here is working code
and here is fiddle
jQuery(document).ready(function () {
var selectvalue = jQuery("select#AttachmentTypeSelect").val();
jQuery("select#AttachmentTypeSelect").change(function () {
alert("d")
selectvalue = jQuery("select#AttachmentTypeSelect").val();
alert(selectvalue);
if (selectvalue !== "select") {
$('input[name="prop_sc_AttachmentType"]').attr('value', selectvalue);
}
});
});
Use following :
jQuery(document).ready(function () {
var selectvalue = jQuery("select#AttachmentTypeSelect").val();
jQuery("select#AttachmentTypeSelect").change(function () {
selectvalue = jQuery("select#AttachmentTypeSelect").val();
if (selectvalue !== "select") {
jQuery('input[name="prop_sc_AttachmentType"]').val(selectvalue);
}
});
});
You can set the value directly with the .val methode.
Replace this:
jQuery('input[name="prop_sc_AttachmentType"]').attr('value="' + selectvalue + '"');
with
jQuery('input[name="prop_sc_AttachmentType"]').val(selectvalue);
try this:
jQuery(document).ready(function () {
var selectvalue = jQuery("select#AttachmentTypeSelect").val();
jQuery("select#AttachmentTypeSelect").change(function () {
alert("d")
selectvalue = jQuery("select#AttachmentTypeSelect").val();
alert(selectvalue);
if (selectvalue !== "select") {
$('input[name="prop_sc_AttachmentType"]').attr('value', selectvalue);
}
});
});
Perhaps you are not using attr function correctly:
this should be like this
$('selector').attr({value:desiredValue});
or
$('selector').attr('value',desiredValue);
But for setting values jQuery provides
$('selector').val(desiredValue);
I'm trying to make all textareas remove default text on focus, except those of class "pre-fill".
But the problem is the textareas of class "pre-fill" are still being selected and included.
Suggestions on how to fix this?
Thanks.
jQuery(document).ready(function inputHide(){
$('textarea, input:text, input:password').not($('.pre-fill')).focus(function() {
if ($(this).val() === $(this).attr('defaultValue')) {
$(this).val('');
}
}).blur(function() {
if ($(this).val()==='') {
$(this).val($(this).attr('defaultValue'))
}
});
});
You should not have the jQuery variable ($) within the .not method call. Try this:
.not('.pre-fill')
In the context of your code:
$('textarea, input:text, input:password').not('.pre-fill').focus(function() {
if ($(this).val() === $(this).attr('defaultValue')) {
$(this).val('');
}
}).blur(function() {
if ($(this).val()==='') {
$(this).val($(this).attr('defaultValue'))
}
});
You can also use the :not() selector.
Note that this.value is much more efficient than $(this).val(), since it's a direct access of a property of a DOM element instead of accessing the exact same property by first building a jQuery object and then calling a jQuery method.
$('textarea, input:text:not(.pre-fill), input:password:not(.pre-fill)')
.focus(function() {
if (this.value === $(this).attr('defaultValue')) {
this.value = "";
}
}).blur(function() {
if (this.value === '') {
this.value = $(this).attr('defaultValue');
}
});
I write something similar to the following code a lot. It basically toggles an element based on some condition.
In the following made-up example, the condition is "If the agree checkbox is checked and the name field isn't empty".
$("button").click(function() {
if ($("#agree").is(":checked") && $("#name").val() != "" ) {
$("#mydiv").show();
} else {
$("#mydiv").hide();
}
});
I wish there was some sort of jQuery function that would work like this.
$("button").click(function() {
var condition = $("#agree").is(":checked") && $("#name").val() != "" );
$("#mydiv").toggle(condition);
});
Is there something like this out there? Or are there other ways besides the first example to do this in a less if-else-ish way?
Ok, so I am an idiot and need to RTM before I ask questions.
jQuery.toggle() allows you to do this out of the box.
$("button").click(function() {
var condition = $("#agree").is(":checked") && $("#name").val() != "" );
$("#mydiv").toggle(condition);
});
First, lets see if I understand what you want to do correctly...
You want to look at the state of a checkbox(checked or not) and hide or show a second div based on the status of that value.
Define this style:
.noDisplay {
display:none;
}
Use this JavaScript:
$("button").click(function() {
$("#mydiv").toggleClass("noDisplay", $("#name").val() == "");
});
The documentation from jQuery on it can be found here:
http://api.jquery.com/toggleClass/
You could write the function yourself.
function toggleIf(element, condition) {
if (condition) { element.show(); }
else { element.hide(); }
}
Then use it like this:
toggleIf($("button"), $("#agree").is(":checked") && $("#name").val() != "");
Syntax 4
$(selector).toggle(display)
display
true - to show the element.
false - to hide the element.
If toggle() is not good for you (e.g. because it animates), you can write a small jQuery plugin, like this:
$.fn.toggleIf = function(showOrHide) {
return this.each(function() {
if (showOrHide) {
return $(this).show();
} else {
return $(this).hide();
}
});
};
and then use it like this:
$(element).toggleIf(condition);