I'm trying to work out how best to handle an input form that is for order processing that basically has a number of identical lines on it for ordering items of clothing.
The controls are all drop down selectors (4 different ones to a line).
At the moment I've just give each one a unique ID and am working through them one by one, but that strikes me as very inefficient.
Is there some way I can use a loop in the html (I don't think this can be done) or some other way to use an array of controls and just iterate over them on the form submit?
Meteor projects usually include jQuery. jQuery is pretty useful for grabbing groups of elements and running them through a function so that you don't have to repeat yourself as much.
In addition to unique ids, you can add the same class to all or a group of the form elements, and then in the onSubmit callback grab them all with a class selector in jQuery and send them all to a function that combines them into a useful object, e.g.
// collect the form inputs in class salesform into an object
var formResult = {};
$(".salesform").each(function(el){ formResult[$(this)[0].id]=$(this).val() });
// form ids and values are now in formResult
There may also be other selectors you can use instead of tagging the elements you want with a class.
Related
i was adding many dom objects (svgg elements) around 3000 to an empty jquery set using .add() jquery method but it takes a lot of time and the ui freezes when the javascript is running.And i found out that add every time sorts the set which is taking a lot of time but why is there a need of sorting.
here is the javascript code.
var list= $jquery();
for(x=0;x<no_of_objects(around 3k+ in my case);x++){
list.add(items[x]);
}
Let's see what jQuery docs say about .add() method:
When all elements are members of the same document, the resulting collection from .add() will be sorted in document order; that is, in order of each element's appearance in the document. If the collection consists of elements from different documents or ones not in any document, the sort order is undefined. To create a jQuery object with elements in a well-defined order and without sorting overhead, use the $(array_of_DOM_elements) signature.
https://api.jquery.com/add/
So if you want to preserve the order, try $(items) as they suggest..?
Because jQuerys add() does not only append a value to a set, it actually creates a new sorted collection and then adds the value to it..
For more info, take a look at the docs: https://api.jquery.com/add/
You can add this elements in loop to element not attached to DOM, and then attach them in one move. Each time you modify DOM, browser must recalculate view.
var list = new Array();
for(x=0;x<no_of_objects(around 3k+ in my case);x++){
list.add(items[x]);
}
$('#list').append(list.join(""));
If I have <element id="blah" class="blah" attr="blah"> (edit: and I have NO other elements in the DOM, just this one)
Then are these jQuery objects absolutely equivalent:
$("#blah")
$(".blah")
$("[attr=blah]")
Is it the case that the query is executed when the object is created and after that it is irrelevant what query was used?
Edit: Does the original query used have any impact later on anything I might do with the resulting jQuery object? Are the 3 resulting objects above identical? Are they any lasting effects from the actual query I had used? (e.g., when I do something with that object later)
Each may get the element, however they do it in different ways because they are different selectors.
The id selector #
$("#blah")
This will return a jQuery object with 1 element in it (the element you list). The benefit of using an id is that it will only return your one element if it exists, and is fastest as a result of ids being expected to be unique.
The class selector .
$('.blah')
This will return a jQuery object with an array of elements in it (including the element you lsit), but also with any other element that has this class. Since there is no combination with this selector, it will be slower than a straight id lookup because it must inspect every element on the page for this class.
The attribute selector []
$("[attr=blah]")
Much like the class selector, this will return an array of elements. It also must inspect every element.
These may look the same if there is only one match when a jQuery function call is used. The reason for that happening is jQuery will look to see if there is an array of elements matched, and then internally use $.each on the set to apply the jQuery function call to them. The benefit is that this makes sets of elements responds very similarly to single elements which are wrapped by the jQuery object.
Here is a whole list of selectors jQuery supports:
http://api.jquery.com/category/selectors/
The element will match all three selectors, but it does not make the three selectors absolutely equivalent because they all have different matching criteria (one looks for an ID, one looks for a class name, and one looks for an arbitrary attribute). In particular, the class and attribute selectors can return more than one element, since unlike an ID selector they do not imply uniqueness of an element.
Even if you can guarantee that this element will be the only one matched by all three selectors, every call to $ always yields a unique jQuery object, even if the resulting jQuery objects encapsulate the same DOM element.
The query returns an array of html elements. In this specific case all queries return the same array. There is no way the original query will have an effect later.
I am using $('form')[0] in following syntax
var formData = new FormData($('form')[0]);
I have following question regarding above syntax
What is the meaning of $('form')[0]?
Main Question: what can be the alternative for $('form')[0]? i have 2 forms in page
The meaning of this is the following:
find all elements on the page with the tag name form and take the first one.
If you want to take the second one just do $('form')[1]
Alternatives could be: .get(0) or .first(), also I do not see a reason for doing this, because in my opinion all of them are kind of straightforward. Although actually .first returns jquery element, not DOM element.
What is the meaning of $('form')[0]?
This gets first form among your forms. If you want to get second from the you could do $('form')[1].
what can be the alternative for $('form')[0]?
There is various methods but what if there are many forms in your document and want to get some of them but you don't need to worry about the order of the form. You can get them by name like this: $('form')['your_form_name]
If you want to use vanilla javascript then you can do any of the followings to get the forms:
document.forms[0] //gets first form
document.forms[1] //gets second form
document.forms['form_name'] //get form which has name == form_name
document.forms.form_name //get form which has name == form_name
document.form_name //get form which has name == form_name
And if you google about this you may know more info.
$('form')[0] gives the reference of the first form element in your
document.
If you want to refer form specifically you can give an ID to it and get reference using $("#formID")
$('form')[0] returns the first for element in the page, $('form') returns a jQuery object which is not accepted by FormData, the jQuery object allows you to access its members using index, so [0] gives you the first element in the jQuery object, it is the same as $('form').get(0)
If you have multiple elements then you need to give an id or class to the form and use it as a selector like <form id="x"></form>, so you can use $('#x')[0]
meaning of $('form')[0] is that if you have n forms in your page this selector will gather data of first form.
and if you want to get rid of this way coding give an Id to your forms and then select each form by its id.
1). $('form') is a jQuery instance which is an array like object with numeric indexes. You can access the first element from a collection with square brackets, by index 0.
2). Alternatively you can give form a name and access it with pure Javascript by name:
document.formName
or there is a froms property of the document that stores references to all HTMLFormElement elements. So your jQuery code is equivalent to
document.forms[0]
<script>
function copy_data(val){
var a = document.getElementById(val.id).value
document.getElementById("copy_to").value=a
}
</script>
i am using this code in head portion for copying data from one text box to another. I need to know what can i do to copy data in number of fields in different rows to copy data from one column to another of the same row?
You can choose among popular javascript libraries and use their css based selectors to query your fields. A couple of examples:
JQuery's $: http://api.jquery.com/category/selectors/
dojo.query: http://dojotoolkit.org/reference-guide/dojo/query.html
As a result of the query you obtain an array like object (depending of the library) which gives you the ability to iterate over, and do your copying.
I have a long array with multiple items per object and I have to start to exclude items depending on what someone selects as a check box, you can see a basic idea working here
http://jsfiddle.net/caseybecking/QwtFY/
My question is how do I start to narrow the list without having to do a check on how man y items they have checked, also this doesn't work if they check multiple items per "Fit" or "Wash"
To elaborate further my objectives. I need to store object(s) that only contain the specific item(s) the user wants to FILTER down to. All this is is a ginat filter of multiple pieces of a long array.
Sounds like you want something like .serialize() or .serializeArray() -- then you can send this data to your server or use the serialized array to filter the json object. You'll need to make sure each input element has a name attribute. In the below fiddle I've removed the hideous boxChecked function as haven't a clue what your trying to achieve in that. Anyway:
Fiddle: http://jsfiddle.net/zZtyy/