Really a simple question. I tried to use jquery to insert html table rows. One of my rows has value with a subscript. So my question is what is the correct way to do this? Below is my broken code:
$('<td><input type="text" size="5" name="a" value="<sub>b</sub>" id="id_a"/></td>').appendTo('.leslie tr:last')
Thanks!
<input> values do not support HTML tags.
This is completely impossible.
You could use contentEditable instead.
try this:
$('.leslie tr:last').html($('.leslie tr:last').html()+'<td><input type="text" size="5" name="a" id="id_a"/><sub>b</sub></td>')
Related
So i have 2 on blur events that check for different things, but the browser only recognizes the first one and disregard the second, how can i fix that?
<input type="text" name="first" onblur="validator()"; onblur="alpha(this)"; />
Thats what i have tried so far. I have also tried without the semicolons but no luck.
You can use like this,
onblur="validator(); alpha(this);"
It is very simple. Just like this.
<input type="text" name="first" onblur="validator() ; alpha(this)"; />
I have many elements that are structured to get them in array like mapping on server side.
<input type="CHECKBOX" id="478" value="1" name="data[GroupInfo][student][478]" onclick="return updateValues('478')">
<input type="CHECKBOX" id="490" value="1" name="data[GroupInfo][student][490]" onclick="return updateValues('490')">
<input type="CHECKBOX" id="478" value="1" name="data[ClassInfo][student][478]" onclick="return updateValues('478')">
<input type="CHECKBOX" id="490" value="1" name="data[ClassInfo][student][490]" onclick="return updateValues('490')">
so on...
Now, I want to select them using their name attribute like
$("[name^=data[ClassInfo][student]]");
but this won't work
I tried to escape barckets to.
$("[name^=data\[ClassInfo\]\[student\]]");
but no luck;
I want to select them using name attribute.
Just wrap the attribute value in ""
$('input[name^="data[ClassInfo][student]"]')
Demo: Fiddle
Try this:
$("[name^='data[ClassInfo][student]']");//Wrap in the single quotes
Try:
// For exact element
$('input[name=data[GroupInfo][student][478]]');
Or
// For list of elements
$('input[name^=data[GroupInfo][student]]');
You can see more here
$('input[name*="data[ClassInfo][student]"]') // matches those that contain 'data[ClassInfo][student]'
I have a hidden field in my page like so:
<hidden id="tsDaySchedule01" value="7.50"></hidden>
When I try to access it with the following code, the alert returns blank:
alert($("#tsDaySchedule01").val());
Now when I use attr("value") like below, it works without issue:
alert($("#tsDaySchedule01").attr("value"));
Lastly, I would like to point out we have other non-hidden text fields within the page that work without issue using val().
I would like to have a better understanding as for what is going on here. Does anybody have an explanation?
<hidden/> isn't a valid HTML element. If you're wanting a hidden input you'd use:
<input type="hidden" />
jQuery's .val() method only works on input, select and textarea elements. To get this to work for you, change your <hidden/> element to:
<input type="hidden" id="tsDaySchedule01" value="7.50" />
.val() method only works with text-box type of element input and textarea elements.
you should use
<input type='hidden' id="tsDaySchedule01" value="7.50">
Maybe you need to use :
<input type='hidden' id="tsDaySchedule01" value="7.50">
I am trying to create a label and placed outer the input check box, like
what I was trying this, My html is
<input type="checkbox">
My jquery is
$('input[type="checkbox"]').after('<label class="label-select"><span></span></label>');
Now the output is
<input type="checkbox">
<label class="label-select">
<span></span>
</label>
But I want like this
<label class="label-select">
<input type="checkbox">
<span></span>
</label>
So how may I write jquery for this. I dont like to change HTML.
Thanks for your answer.
Use wrap() not after():
$('input[type="checkbox"]').wrap('<label class="label-select"></label>').after('<span></span>');
Example fiddle
You're looking for .wrap() jQuery function.
If you use jQuery.wrap() you should be able to achieve what you're looking for.
$('input[type="checkbox"]').after('<span></span>').wrap('<label class="label-select"></label>');
EDIT
Got the two back to front sorry, should be
$('input[type="checkbox"]').wrap('<label class="label-select"></label>').after('<span></span>');
All you have to do is wrap the element (checkbox) inside the label.
$('input[type="checkbox"]').wrap('<label class="label-select"><span></span></label>');
Try this:
$('input[type="checkbox"]').wrap('<label class="label-select"></label>').wrap('<span></span>');
Or you can use jquery append() method to append html inside a block. Try this one,
$('.label-select').append('<input type="checkbox"><span></span>');
I found a thread, Change an element's class with JavaScript, that is along the lines of what I'm going for, but I don't know how to implement it.
I have a page with 4 input buttons and two CSS styles: "Selected" and "notSelected". One button will be hard coded initially as "Selected". When the user clicks another button, I'd like to programatically iterate through all the buttons (the number of buttons on each page will be between 2 and 10), set the clicked button's class to "Selected", and make sure all the other buttons are set to "notSelected".
I've got the logic down, but I've never done anything with JavaScript before, so I haven't the slightest idea about how to do this. If someone knows of a tutorial/piece of code already out there that does this, please point me in the right direction.
Thanks a ton!
You can go the easy way and use a framework like jQuery that does the hard work for you
As you are new to JavaScript, this might be a bit much, but have you considered using jquery? Take a look at toggleClass(): http://api.jquery.com/toggleClass/
Hi just made a quick script, Hope that helps you. Let me know if you find any problem with the script.
I am using focus event and input box, you may change it as needed.
function doSelect( obj ){ var
mylist=document.getElementById("formDiv")
var inputItems=
mylist.getElementsByTagName("input");
for (i=0; i < inputItems.length;
i++){
document.getElementById(inputItems[i].id).className
= "Notselected"; } document.getElementById(obj.id).className
= "selected"; }
Have a form tag within the div tag id="formDIV"
Have few input tags of type text and onfocus="doSelect(this)"
<body> <div
id="formDiv"> <form
name="testform">
<input type="text"
name="tx1"
id="text1"
onfocus="doSelect(this)"/>
<input type="text"
name="tx2"
id="text2"
onfocus="doSelect(this)"/>
<input type="text"
name="tx3"
id="text3"
onfocus="doSelect(this)"/>
<input type="text"
name="tx4"
id="text4"
onfocus="doSelect(this)"/>
<input type="text"
name="tx5"
id="text5"
onfocus="doSelect(this)"/>
</form> </div>
</body>
this should
help.