I have a dynamically created page with repeated elements, like so:
<input type="file" name="file1">
<input type="file" name="file2">
<input type="file" name="file3">
I would like to add some data to each of these elements for use in JavaScript. Originally I used "spare" attributes that while valid on an input tag were not valid on a file type input tag, eg, size. I have now added it to the class attribute, but have to use a regex to get it out again. Neither of these methods seem very satisfactory, is there a better way?
Quite often I see data added through attributes that are prefixed with data-, for instance:
<input type="file" name="file1" data-filesize="871">
jQuery even has function to conveniently read that information, for instance like this:
var filesize = $('input[name="file1"]').data('filesize');
And, to write the data, attr can be used:
$('input[name="file1"]').attr("data-filesize", filesize );
See also: HTML 5 data atributes
You can use attributes with a name starting with "data-"
Use the data attribute: <input data-something="somevalue" />
with attribute start with data- you can use your own other name appending to it.
Go through this examples
Related
I have a search input tag that is being added by a jQuery plug-in:
<input type="search" />
Note that this does not have an ID, CLASS, or NAME. I need the search input tag to look like this:
<input type="search" name="myname" />
A simple solution is for me to update the jQuery plug-in. However, I do not want to do this as it will cause challenges when I upgrade this plug-in in the future.
This JavaScript works properly and adds the name attribute:
$(document).ready(function() {
document.getElementsByTagName("input")[0].setAttribute("name", "myname");
});
The problem is that the "[0]" in this function relies on the search input being the first input field in the form. I do not think this solution is sustainable.
There are other inputs in the form. This is the only one with the type attribute equal to "search." Is there a way to identify it by this attribute? Or, is there another solution you propose?
Thank you for your time!
You can use the document.querySelector:
document.querySelector("input[type='search']")
Below is an example (you can inspect the output to see name attribute):
document.querySelector("input[type=search]").setAttribute("name", "myname");
<input type="search" value="foo" />
<input type="bar" value="bar" />
You can target a selection by anything. So, the selector input[type="search"]' will work.
If you want to apply this to all input's of type search, this is good enough, and you get all of them in here:
$('input[type="search"]')
This works without jQuery too:
document.querySelectorAll('input[type="search"]')
A more targeted approach would be
document.querySelectorAll('div.filter input[type="search"]')
Playing around with making a small data binding javascript library but I'm a little newer to javascript. Is there a way to just find the element, and all enclosing elements that have the data-bind attribute defined?
<form data-bind="Customer">
<input type="text" id="name" data-bind="Name" data-bind-type="text" />
<input type="text" id="birthday" data-bind="Birthday" data-bind-type="text" />
<input type="text" id="address" data-bind="Address" data-bind-type="text" />
</form>
I want to define a function where I just pass in the "Customer" value and it will find the tag that has the data-bind = "Customer" (form in this case) and all tags within said containing tag that have the data-bind attribute defined. In this case it would return all 3 input tags so that I could examine them further.
Everything I've seen using jquery to do this is showing that I would need to know the "form" or the tag id to do this, but I'd prefer not to have to specify tag (like form) or id.
You can at all data-bind elements within a particular data-bind element in this way:
$('[data-bind="Customer"] [data-bind]');
If you want to wrap that in a function, for instance if you need to access other wrapper elements with a different data-bind attribute value, you could do:
function getBoundElms(name) {
return $('[data-bind="' + name + '"] [data-bind]');
}
$('[data-bind="Customer"]').children('[data-bind]')
look at this fiddle
http://jsfiddle.net/QBM5/M9eea/
I commonly use id or class to pass some parameters to a javascript function. For example:
<input type="text" id="myInput" onclick="callInput(this.id)">
However, in some cases, elements already have id and class, so I'm gonna need another attribute to store parameters.
Which attributes are appropriate for this purpose?
You can use data attribute
<input type="text" id="myInput" onclick="callInput(this.id)" data-id="someid" >
You can use anything along with data-
Example data-anything="something"
Read more about data attribute from here
To read the data attribute through jquery you can use
$('#myInput').on("click",function(){
alert($(this).attr("data-id"));
});
or
$('#myInput').on("click",function(){
alert($(this).data("id"));
});
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 need to obtain the String for the file that is being uploaded from forms to store in the database.
I am using the usual form input file element
input type="file" name="some_name"
I found a couple JS scripts that allow me to do useless things like display the string in a dialog box, etc.
I need this as an element on the request object or as a hidden field on my page when the form is posted.
You should be able to do something like this:
<form method="POST">
<input type="file" name="some_name"
onchange="document.getElementById('hidden_file').value = this.value;" />
<input type="hidden" id="hidden_file" value="" />
<input type="submit" />
</form>
I believe that will work in all browsers if you simply want to store the filename, and not the full path.
You won't get a very useful value. Some browsers will only give you the final name part of the file path, while IE will give you a path with a bogus directory name.
I think that the "safe" fragment of the file name should already be passed in to you as part of the part header in the multipart post body.