i often use this notation when i name my controls in order to get an array in POST or GET.
<input name="color[1]" type="text" />
<input name="color[2]" type="text" />
<input name="color[3]" type="text" />
so in my scripts i can do
<?php $data=$_GET["color"];
for each ($color as $key=>$value) {
doSomething();
} ?>
Often happens that i need to get those id back in javascript , but i cannot get them , so i often add an ID to each element in html like that
<input name="color[3]" id="color_3" type="text" />
so that i can use document.getElementsById('color_3')
Instead i would like to find way to use document.getElementsByName(color[3])...
but i cannot really get it to work.
Any help?
If you want all of the color inputs, you can use querySelectorAll instead to query for the name attribute:
document.querySelectorAll("input[name^='color[']")
This looks through the document for all input tags whose name attribute starts with color[. Here is a fiddle for this.
If you only want color[3], you can use:
var color3 = document.getElementsByName("color[3]");
console.log(color3[0]);
<input name="color[3]" id="color_3" type="text" />
var element = document.getElementsByName("color[3]");
alert(element[0].id);
It works fine .. The thing you should have in your mind is Return type is an array of elements not a single element
Related
I need a way to change the value of an input box by referring to it by form and class name. Given a form that looks like this:
<form name="foo">
<input type="text" class="bar" value="someval" />
</form>
Is there a one-line solution to this? I've tried some things such as:
document.foo.getElementsByClassName('bar')[0].setAttribute("value", "newvalue");
And
document.forms['foo'].getElementsByClassName('bar')[0].setAttribute("value", "newvalue");
To no avail. There must be something obvious I'm missing, but what?
This is precisely what .querySelector() was designed to help with. You can pass any valid CSS selector to it and it will return the first element that matches the query or undefined if no match is found.
And, don't use .getElementsByClassName() or document.forms (ever) as they are both ancient techniques that either introduce major performance issues or non-modern approaches that are inferior to the APIs we have today.
// Find the input element with a class of "bar" that is a direct child of a form with a name attribute of "foo"
document.querySelector("form[name='foo'] > input.bar").value = "blah"
<form name="foo">
<input type="text" class="bar" value="someval" />
</form>
Try this:
<form>
<input type="text" class="bar" value="someval" />
</form>
<script>
document.getElementsByClassName("bar")[0].value = "newvalue";
</script>
You can use something like this
document.forms[0].querySelector(".bar").value
And if you have multiple forms, just loop through document.forms and get values by class name, use querySelector or select by id whatever suits you.
Hope this helps.
I have to insert a set of attributes to my a component I want to re use...
now different attributes will come as string to me...
say for example I want to insert an element in my component
<input type="text" maxlength="10" placeholder="enter your name"/>
then i will get all the attributes as a single string
attr = 'type="text" maxlength="10" placeholder="enter your name"'
in the controller for my component...
and i have to insert that to my conponent in the html...
i have tried
<input {{attr}}/>
and
<input {{jQuery.parseHtml(attr)}}
etc..
but it is not working... also, could not find any solutions...
please share any solutions or some links/references helpful for me...
You can use #Input properties to pass data to a nested reusable component. However, AFAIK there isn't an easy way to pass a string of html attributes and apply them automatically. You'd either need to pass them on individual input properties or write code to process the string yourself and map them into attributes for binding.
Use binding for each attribute you want to change dynamically
Component:
typeTxt: string = "text";
maxLengthNum: number = 10;
placeholderString: string ="enter your name";
Html:
<input [type]="typeTxt" [maxlength]="maxLengthNum" [placeholder]="placeholderString"/>
See the documentation to better understand data binding and deal with the different attribute types (Properties, events, two-way, etc.)
Use the parent tag to dynamically change your template
Component:
htmlString: string = '<input type="text" maxlength="10" placeholder="enter your name"/>';
Html:
<div [innerHTML]="htmlString"></div>
Result:
<div>
<input type="text" maxlength="10" placeholder="enter your name"/>
</div>
I have a page which displays some data from my database, how would i go about accessing this data with jQuery? By this, I mean grouping it by the row id from the database?
I was thinking about something like:
<input type="text" id="482983" name="reg" />
<input type="text" id="482983" name="somefield" />
<input type="text" id="482984" name="reg" />
<input type="text" id="482984" name="somefield" />
How could I pull that data into JSON like this:
{
"482983":{"reg":"regvalue","somefield":"somefieldvalue"},
"482984":{"reg":"regvalue","somefield":"somefieldvalue"}
}
Any ideas?
As mentioned, IDs should be unique. Instead, let them share a class, or a name, or let them be children of the same container with a unique ID. After you've done that, you can use jQuerys .each() to form it into a json or array object.
I'm using angular to post to a webform. Using ng-model I need to build an array with values that have dots in them.
I would like something like
<input type="text" ng-model="quiz.entry.958924423" name="entry.958924423" required />
would correspond to an object like this:
$scope.quiz= {'entry.958924423': '1F9trPeu9DA4W0CjADN4a1fl3Jh682ZPF8remWB21RhI'};
now it makes
$scope.quiz.entry = 1F9trPeu9DA4W0CjADN4a1fl3Jh682ZPF8remWB21RhI
Try this method, if I understand you correctly:
<input type="text" ng-model="quiz['entry.958924423']" required />
I have a dynamic form that adds users to the site, made so you can duplicate the fields to add several users on one go.
So, my looks like
<input name="user[1][name]" value="" />
<input name="user[1][username]" value="" />
<input name="user[1][password]" value="" />
And then the number is changed on the duplicated fields, eg:
<input name="user[2][name]" value="" />
<input name="user[2][username]" value="" />
<input name="user[2][password]" value="" />
and so on.
On PHP I can handle each user since it has it's own array.
But I would like to validate, for example, the username on each user via jQuery.
The closest I got to is
$(this).find('input[name="user[][username]"]').each(function() {
But for it to work I need to explicitly write the number on the first [], eg:
$(this).find('input[name="user[1][username]"]').each(function() {
Is there a way to select ALL of them? I tried putting * and * between the [] but it didn't work.
Thanks for your help!
You can use the ends with selector
You could use a for loop and not have to write the numbers yourself really easily:
var number_of_forms = 3
for(var i=1;i<=number_of_forms;i++){
$(this).find('input[name="user[' + i + '][username]"]').each(function() {
}