I have some radio buttons like to
<input type="radio" checked="checked" value="0" id="paramsmenu_images0" name="params[menu_images]">
I would like to reach this in javascript somehow like this:
console.log(document.adminForm.params[menu_images]);
Of course it doesn't work, so how can I reach it?
Is this OK?
document.getElementsByName('params[menu_images]')
You can also iterate over document.adminForm.elements to find your form element...
document.getElementById('paramsmenu_images0') will give you the dom element if that's what you want.
Related
Say you have something like this:
<input id="state" type="radio" name=${this.group} .checked=${this.checked} />
(Code from LitElement Dot with HTML elements attribute/property as I was researching what the dot meant)
Is it possible to print out what ${this.checked} is? If so, how?
Clarification: Is it possible to print it from, for example, another file?
Like if you wanted the id, it would be something like this.input.getAttribute('id'), but for the .checked
Did you try using ${this.checked} where you want to display it ?
<input id="state" type="radio" name=${this.group} .checked=${this.checked} />
(checked: ${this.checked})
I've always used class names to select sets of related elements. e.g.
<input type="checkbox" value="1" class="checkbox_set_1">
<input type="checkbox" value="2" class="checkbox_set_1">
<input type="checkbox" value="3" class="checkbox_set_1">
$('.checkbox_set_1').filter(':checked') ...
I do this because I know jQuery can delegate to document.getElementsByClassName which should be pretty fast. However, adding classes to all the elements I want to select but not style seems kind of dirty. Isn't there some overhead when the browser has to check checkbox_set_1 against its stylesheet to determine if my checkboxes need styling? Plus, there's some risk of accidental styling if I haven't named my classes nicely.
Is there a better way to select elements that doesn't rely on an attribute meant for styling, without giving up the performance benefits? Or more specifically, is there an attribute other than class (used for styling) and id (limited to a single element) that the browser will optimize queries for?
There are many other attributes to pick from, including data-* attributes, but I don't think the browser optimizes lookups on anything other than id and class, does it?
Isn't there some overhead when the browser has to check checkbox_set_1
against its stylesheet to determine if my checkboxes need styling?
Styling isn't determined that way. The browser doesn't take each attributes of an element and look for rules that apply, instead it looks through the rules once and determine which ones applies to the element.
If you are concerned with adding classes to a lot of elements, you can use selectors that make better use of the document structure, for example setting a class on the element containing the checkboxes and use something like $('.CheckboxContainer :checked').
That might not be quite as efficient as setting classes on every element that you want to target, but in most cases the difference is far from noticable. You shouldn't bother too much about efficient selectors until it's an actual problem. After all, you are using jQuery because it's convenient, not to get the best performance.
Yes, it behaves analouge to the "Marker-Interface in java" and you will find the anti-pattern-description of Tom Butler.
If you have a form around, you could use elements (but you must filter other elements) this is faster than calling a method like "getElementsByClassName".
Example
var lst = jQuery(document.foo.elements);
document.write(lst.length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="foo">
<input type="checkbox" value="1" />
<input type="checkbox" value="2" />
<input type="checkbox" value="3" />
<input type="checkbox" value="4" form="bar" />
</form>
I have a dynamic web page where the content may contain between 1 and 10 links, provided in text boxes, similar to the following:
<input size="50" id="link" value="http://Something.Something" type="text">
<input size="50" id="link" value="http://SomethingElse.Something" type="text">
I need javascript to be able to read all of the links, and be able to manipulate the data (store in array, output to screen, etc)
I know that I can read a single id using the following
var link = document.getElementById('link');
Which will return the first match - but, how can I do a loop or obtain all the values for all the links, bearing in mind that the number of links cannot be determined beforehand?
P.S. I have tried using getElementsByTagName('input') but there are more inputs on the page, which means it's getting more results than I'd like it to get.
You can make them all have names and search by name.
<input name="vrow" value="0" type="text"/>
<input name="vrow" value="0" type="text"/>
<input name="vrow" value="0" type="text"/>
<input name="vrow" value="0" type="text"/>
Then you can get it with:
var vrows = document.getElementsByName("vrow");
alert(vrows.length);
Give them all a common class and access using document.getElementsByClassName('class').
IDs should be unique for each element. You could use document.getElementsByClassName or document.querySelectorAll(".class"); and then use the class name (assuming relatively modern browser). Or use document.getElementsByTagName() and then iterate through the elements comparing with the class.
Attach a jQuery lib and you will be able to do something like:
$('input[type=text]').each(function(i, val){
alert($(this).val());
});
I've a list of checkboxes that get rendered out using javascript.
<input type="checkbox" name="sportType" id="sportType11" value="11" />Golf
<input type="checkbox" name="sportType" id="sportType12" value="12" />Tennis
<input type="checkbox" name="sportType" id="sportType13" value="13" />Football
<input type="checkbox" name="sportType" id="sportType14" value="14" />Cricket
On submitting the form I can pickup the selected values in ASP.NET by using:
Request.Form["sportType"]
In firefox this works and returns something like 11,12,13,14 (Assuming all are checked)
In IE however it returns on,on,on,on
Has anyone encountered this before and hopefully solved it?
Thanks
Having dug a little deeper I've discoved that in IE Jquery render the input box like so:
<input propdescname="sportType" id="sportType11" type="checkbox" jQuery1288622120804="10" value="on"/>
Which give explains the on,on,on value thats been retured? Can anyone shed any light on how to correct this, I assume jquery does this so it can consistantly keep track of selected checkboxes.
Thanks
Kevin
Solved, kind of
Value of jQuery generated checkbox in IE8 is stored as "on" rather than actual value?
Try changing the name to name="sportType[]" and see what happens, what I would do in PHP at least.
I have a series of checkboxes and input type="text" areas, wherein I need to have the state of the checkbox set to true when the value in the text area changes. Simple enough. I've done this successfully:
<input name="fixed" type="checkbox">
<input name="stuff" type="text" onchange="this.form.fixed.checked=true">
Which works fine. You have to edit the field then click out of it, but that is fine for my needs:
...but when I switch to this:
<input name="fixed[0]" type="checkbox">
<input name="stuff" type="text" onchange="this.form.fixed[0].checked=true">
<input name="fixed[1]" type="checkbox">
<input name="stuff" type="text" onchange="this.form.fixed[1].checked=true">
I get no change to my checkboxes when I edit:
My only javascript know-how comes from googling this sort of thing, I'm afraid. Anyone have any better info on this than the Oracle of Google on The Mountain has in store?
thanks...
Switch from dot notation to bracket notation!
this.form['fixed[0]'].checked
It might be that you're mixing some shady practices in HTML, and when you do it in javascript, they're breaking.
So this.form.fixed[1] in javascript really says "The second item in the array this.form.fixed. So I think that's the problem. try naming your elements fixed0 and fixed1 and see if that works.
Edit: You could also use bracket notation, as illustrated by Peter, which should solve the problem without editing the names of the inputs.
Make life easier on yourself.
Create unique ID's for the elements you are trying to reference and refer to them from the elements to which you bind your events:
<input name="fixed[0]" type="checkbox" id="fixed_0">
<input name="stuff" type="text" onchange="document.getElementById('fixed_0').checked=true">
<input name="fixed[1]" type="checkbox" id="fixed_1">
<input name="stuff" type="text" onchange="document.getElementById('fixed_1').checked=true">