the selector in JavaScript - javascript

I want to get the object of this code ,
<input class="radio"
id="conversation_sub_kind_id_208"
name="conversation[sub_kind_id]"
onclick="set_department_name('department_name208')"
type="radio"
value="208" />
I want to use jQuery Framework to get the object, like the document.getElementbyTagName("conv..."); what should i do in here?
Thank you, and best regards!

$('#conversation_sub_kind_id_208');
more here

It should be as simple as $('#conversation_sub_kind_id_208'). That would give you the jQuery object. If you want the underlying DOM element, do it like this: $('#conversation_sub_kind_id_208').get(0).

Or you could not use Jquery and simply do:
document.getElementById("conversation_sub_kind_id_208");

Related

How would I select this input using Javascript selectors?

I am not sure how to select the input below using Javascript selectors. I tried this but that doesn't seem to be correct:
$("input:text[name=[11235]");
<div class="Row-LineDetail A" id="Row1235">
<span class="Col-Label LineIndent1">
</span>
<span class="Col-Dollar">
<input type="text" name="l1235" value="$5,000.00" cols="8" onkeyup="validateNegAmount(this);" onblur="transform(this)" onfocus="removeFormatters(this);this.select();">
</span>
</div>
$('input[name="l1235"]')
That would work if you are using jQuery, as in your example above.
You'll want something like this:
$("input[name='11235']");
Take a look at http://api.jquery.com/category/selectors/attribute-selectors/ for more information about attribute selectors.
Since you appear to be using jQuery the following would work:
$("input[name='l1235']")
with using jquery
$('input[name="l1235"]')
with pure javascript
document.getElementsByName('l1235')
For you
Simply use
$('input[name=l1235]');
Other method
If you want to select the text elements, then you can ues
$('input[type=text]');
Other queries can be executed after this such as:
if($(this).attr('name') == 'l1235') {
And so on! :)

Is it possible to generate the DOM code from the HTML code?

I need to dynamically create element using DOM. I know how to do it using document.createElement, appendChild methods, but this is often a long process.
Suppose that I want to add this in my HTML page :
<div id="my_account" style="visibility:hidden">
<input id="my_account_close" type="submit" value="Close" onclick="closeMyAccount();">
<span id="my_account_username">Blabla</span>
<input id="my_account_username_modify" type="submit" value="Change Name" onclick="modifyUserName();">
<span id="my_account_email">a#asqs.com</span>
</div>
Do I have to create each element one by one and set all attributes, then use the appendChild methods ?
Is there a "magic" function that can take the html code which returns the parent element, so that I only have to add it at the end?
no, you can just take that entire string and add it as innerHTML to a parent div.
It will be part of the dom on the very next line of code...
someParent.innerHTML = myHTMLString;
var d = document.getElementById('my_account');//this will return the first object in your code
You can use the innerHTML function:
document.getElementById(element_id).innerHTML="<p>someHtml</p>";
Please notice JS does NOT support multiline strings.
Yes, there is a "magic" library called jQuery: http://api.jquery.com/append/
$("div").append("<div class='aaa'>Example</div>");

Why can only forms be referenced by dot notation?

It seems like a simple beginners question, but I'm unable to find an answer anywhere.
Let's say I have this HTML:
<form name="myForm">
<input type="text" name="myTxt">
</form>
then I can use the following javascript
document.myForm.myTxt.value = 'foo';
But what if I have a div instead of a form?
<div name="myDiv">
<span name="mySpan"></span>
</div>
Why can't I do the same thing here, like
document.myDiv.mySpan.innerHTML = "bar";
Seems like it should be possible to do, instead of having to use getELementById(), but I can't make it work.
As designed by W3C.
There's really nothing to argue about. You can access the an HTMLCollection of all the forms on the page through document.forms, much like you can images with document.images, applets with document.applets, links with document.links and anchors with document.anchors.
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-1689064
The syntax you've posted is for form, to be specific.. It will work only with forms..
You will need to use following line to make it work for divs...
document.getElementsByName("myDiv")[0].getElementsByTagName("span")[0].innerHTML = "bar";
There are other ways to do this too...

jQuery what instead $(this).parent().children()

Just a quick example:
<p>
<span class="example"></span>
<input type="text" name="e_name" id="e_id />
</p>
<script type="text/javascript">
$('input').click(function(){
$(this).parent().children('span').text('Suprise!');
}
</script>
What can I use instead parent().children()?
I think it's a bit inelegant piece of code.
Is any function i.e : $(this).fun('span').text('just better'); ??
$(this).siblings('span').text('Suprise!');
$(this).siblings('span').text('Surprise!');
Would be the equivalent without traversing up the DOM and then back down (I mean, it still does it, but at least you're not doing it manually).
Slightly more elegant is .prev()
$(this).prev('span').text('Surprise!');
you can read more about it here: Prev
edit: read the markup backwards, prev is better, not next.
try this:
$(this).prev('span').text('Surprise!');
$("span.example",$(this).parent()).text('Suprise!');

Get value of class of a DIV using JavaScript

Question is simple. Not using jQuery... how do I get the value of class value in a DIV using regular JavaScript?
Thanks.
Assuming this HTML
<div id="Target" class="MyClass" />
Like This
var ElementCssClass = document.getElementById("Target").className;
get a reference to the div and use .className
document.getElementById('someDiv').className

Categories