We Keep Coding

Change Span Class Dynamically

I want to print error message next to a particular element if its null.
I know to add
<div> tag
after that element and printing it. But I dont have editing access to that code.
So, I thought to change the span class of the label of that element which highlist as missing field.
My Page is like
<td><span class="fl">Country</span></td>
<td class="abcdef" style="...." id="Country">
<select>
<option></option>
</select>
....
Now I want to change the spanc class "f1" to "requiredText".
But the problem is many labels are surrounded by
'<span clas="f1">'
and
'</span>'.
Is there any way I can identify the it with preceding element of ID Country and associate it?

I don't see a jQuery tag here. So If you want to do this withoud jQuery you can do it like this:
document.getElementById('Country') // get the table cell with id="Country"
.previousElementSibling // get its previous sibling so the td with the span
.children[0] // get the span you want
.className = "requiredText"; // overwrite it's class name

$('.f1').addClass('myclass).removeClass('f1')

try this..
$('td .f1').removeClass('f1').addClass('myclass');

try this
$(".f1").each(function(x, span) {
var text = $(span).html();
if(text == '')
$(span).addClass('requiredText').removeClass('f1');
});

How to select element relative to 'this' in javascript

I have the following:
<div class="tab-pane" id="message">
<textarea rows="4" cols="50" id="send_message" placeholder="Enter text ..."> </textarea>
OK
Cancel
I want to bind the click method to the 'div' element , and when one of the child 'a' elements is clicked do separate things. I am trying to distinguish between them using the button text, but the following is not working:
$(function(){
$('#message').click(function(){
if($(this + ">a").is(":contains(OK)")) {
console.log("OK!!");
How can I fix this?

Okay there are two ways of doing this:
.find(selector)
if(this).find("a").is(":contains(OK)")) {
console.log("OK!!");
OR
$(selector,context)
if("a",this).is(":contains(OK)")) {
console.log("OK!!");

In javascript, this is essentially the context of the current function. In jQuery event callbacks, this is set to be the source element of the event - not the selector string, which is what you are treating it as.
Instead, you want to do a test like: if($("a", this).is(":contains(OK)")) {
This works because the second parameter to the jQuery selector is the context to search in, so you are only searching for the a tags under the source element of the click.

Binding the click element to the Div, then checking the text string of the A tags will make both events happen on every click. You want to bind 2 separate click events on each A tag. Add an ID to each A tag, then try this code
$('#okLinkID').click(function(){
console.log("OK!!");
});
$('#cancelLinkID').click(function(){
console.log("Cancel!!");
});

//Attaches only one listener to the #message div and listens for any 'a' element within it to be clicked.
$('a','#message').on('click',function(){
var $this = $(this),
btnText = $this.text();
console.log(btnText);
});
http://jsfiddle.net/YA7Ds/

How to select a textarea by it's type and parent div with jQuery?

I need to select a textarea with jQuery and my selector code isn't working.
This is what I have:
HTML:
<div id="textareaContainer">
<textarea>
this is text
</textarea>
</div>
JS (onload):
jQuery("#textareaContainer > input[type=textarea]").val("");
JSFiddle: http://jsfiddle.net/EVvfT/
When the page is loaded, the textarea's value is not overwritten. Unfortunately I cannot set the id or class of the textarea, which is why I need to select it as the child of the div it's in.
How do I get this to work?

It's simply textarea:
jQuery("#textareaContainer > textarea").val("");
jsFiddle here.
If there's more than one <textarea>, you could use first() to get the first, last() to get the last or eq() to select any others in between.

To only grab the first one:
jQuery("#textareaContainer > textarea:first").val("");

You can select it like:
$('textarea > #parentId').val()
Alternatively:
$('textarea > div[class="something"]').val()

If you got the textarea and want to test to see if the parent is what you want it to be you can do:
var $textarea = $('#textarea'),
$parent = $textarea.parent(),
isGoodParent = $parent.is('#textareaContainer');
// isGoodParent is true if the textarea's parent matches the selector `#textareaContainer`

toggleClass() on Parent not working even though the parent is being found

Hi I have the following HTML repeated in my page (obviously the names, for and id attributes change in each instance):
<div class="funkyCheckBox">
<label for="uniqueName"> Whatever Text </label>
<input type="checkbox" name="uniqueName" id="uniqueName" />
</div>
What this does with some CSS is make the give the appearance of a big button, the input is hidden and I add a class to the div depending on the checked value of the input. I use the following JavaScript /jQuery for this
$(".funkyCheckBox").live("click, tap", function(event){
$(this).toggleClass("funkyCheckBoxActive");
var nextCheckBox = $(this).find("input[type=checkbox]");
nextCheckBox.prop("checked", !nextCheckBox.prop("checked"));
});
Now this was all fine and good but during testing I noticed that if you click on the label text the class was not applied and the value of the input isn't toggled... thus I added the following...
$(".funkyCheckBox label").live("click, tap", function(event){
$(this).parent("div").toggleClass("funkyCheckBoxActive");
var nextCheckBox = $(this).next("input[type=checkbox]");
nextCheckBox.prop("checked", !nextCheckBox.prop("checked"));
});
Now this is great as clicking the label text now changes the value of the input however the parent DIV is not taking / toggling the "funkyCheckBoxActive" class. I am unsure why is as I then used console.log($(this).parent("div")) within the callback function and I am outputting the attributes of th dom object. Does anyone know why my toggleClass is not being applied?

Depending on the version of jQuery, your code will work or not.
Note that the browser is already toggling the checkbox when you click on a label that references it; so you would only need to do this:
$('#uniqueName').change(function() {
$(this).parents("div").toggleClass("funkyCheckBoxActive");
});

please use the "on" method instead of "live" as it is deprecated. also the "for" attribute in LABEL Tag points to an existing Id.
here is the corrected and working code:
<div class="funkyCheckBox">
<label for="uniqueName"> Whatever Text </label>
<input type="checkbox" name="uniqueName" id="uniqueName" />
</div>
and
$(".funkyCheckBox label").click(function(event){
$(this).parent("div").toggleClass("funkyCheckBoxActive");
var nextCheckBox = $(this).next("input[type=checkbox]");
var nextCheckBoxValue = nextCheckBox.val();
nextCheckBox.val(! nextCheckBoxValue);
}); ​
​
EDIT: here is the jsFiddle link
http://jsfiddle.net/RUYWT/
EDIT2: #Mike Sav: I have revised your code and it's working now with all possible cases:
http://jsfiddle.net/RUYWT/11/

How do I change the value of an input element?

is it possible to "override/overwrite" an input element fixed value using javascript and/or jquery?
i.e. if i have an input element like this:
<div id="myDiv">
<input type="text" name="inputs" value="someValue" />
</div>
is it possible to make a jquery object of that element and then change its value to something else then rewrite the jquery object to the dom??
I'm trying but obviously I haven't got good results!
I've been trying something like this:
$('input').val("someOtherDynamicValue");
var x = $('input');
$("#myDiv").html(x);

If you just want to manipulate the value of the input element, use the first line of your code. However it will change the value of every input element on the page, so be more specific using the name or the id of the element.
$('input[name=inputs]').val("someOtherDynamicValue");
Or if the element had an id
$('#someId').val('some Value');
Check out jQuery's selectors (http://api.jquery.com/category/selectors/) to see how to get whatever element you need to manipulate with jQuery.

You can directly access the value via the $.val() method:
$("[name='inputs']").val("Foo"); // sets value to foo
Without needing to re-insert it into the DOM. Note the specificity of my selector [name='inputs'] which is necessary to modify only one input element on the page. If you use your selector input, it will modify all input elements on the page.
Online Demo: http://jsbin.com/imuzo3/edit

//Changes on the load of form
$(document).ready(function(){
$('#yourTxtBoxID').val('newvalue');
});
//Changes on clicking a button
$(document).ready(function(){
$('#somebuttonID').click(function(){
$('#yourTxtBoxID').val('newvalue');
});
});