What would the equivalent of
document.forms[0].submit();
...be in jquery format? I know it would look like something similar to:
$("form").submit()
But i'm not sure how to just send a general form without knowing it's id
Since your javascript code is trying to submit first form in the page, in jQuery you've multiple ways to achieve it, one way is to use .first():
Reduce the set of matched elements to the first in the set.
$("form").first().submit()
$("form").eq(0).submit()
Given a jQuery object that represents a set of DOM elements, the .eq()
method constructs a new jQuery object from one element within that
set. The supplied index identifies the position of this element in the
set.
The first submits the first form on the page.
The jQuery equivalent would be:
$("form:eq(0)").submit();
But if it works in plain JavaScript, you shouldn't change it to jQuery! If it isn't broken, don't "fix" it!
Related
I have 3 HiddenFor Razor Strings on the HTML which will pass values to the Model C#.
Then I have a JavaScript with three Dropzones (js lib for drag and drop). At this point there will be three "remove events" which will populate that hiddenforValues.
To do this I tested 3 different syntaxes:
document.getElementById().value
document.querySelector().value
$('#Element').value
but I noticed something strange:
for the first two hiddenfor the querySelector and the jQuery method works fine, however for the third one only document.getElementById will work (otherwise value will be sent as null).
At same time document.getElementByID is not recognized if I use this more than once.
So if I use jQuery for two of them and document.getElementById for the last one this will work fine.
The question is... why?
The only thing different is that third string have "," inside.
jQuery doesn't work with special characters or something like that?
My code works but I'm just curious about that buggy functionality.
You'd better use $('#Element').val() instead.
$(*) returns a jQuery collection that has many methods but no option like value.
document.querySelector and $() both accept a css selector string for identifying a target. In CSS, , separates selectors.
Thus, $('#a,b') will look for an element with id "a" or a b element, whereas document.getElementById('a,b') will yield an element with the id "a,b".
To simulate this behavior in jQuery, you'd need to write $('*[id="a,b"]');
I have common jQuery function and two div tags. Both div tags have different names but both containing elements of identical ids now i want to use this common Jquery function for them both?
I have implemented common function but it's not working for both.
Here's link to my jsfiddle -jsfiddle.net/xS7zF/1/
In my jsfiddle there are two div tags namely example1 and example2 and both tags have elements of identical ids. Function is working fine for first div but not for second.
please help me to sort out this.
Yeah, under the hood, jQuery selection on an ID will use the Document.GetElementById() function implemented by the browser, which is really fast, but (i guess depending on the browser) will stop after it finds the first element, since ID's should be unique and no further searching is needed after the first one is found.
For instance, rename the divs with id="eb" to class="eb" and you can still target specific elements using $("#example1 .eb") and $("#example2 .eb")
UPDATE:
Using your new Fiddle I created this: http://jsfiddle.net/xS7zF/5/
I cleaned up a lot of code and hopefully you can see what I have done. I changed all elements that appear twice from id to class. Now, when you attach an event to an element using $(".classname").click(), it attaches to all the elements. In the handler function where you set HTML and do your show()/hide(), you don't target a specific element using it's ID, but you find it relative to the element that does the event. You can do this using parent(), parentsUntil(), next(), find(), etc. Check jQuery docs for all possibilities. So for instance, the change-handler attaches to all inputs with name=Assets. But instead of doing $("#b1").show(), I go to the parent of the specific input that fires using $(this).parent(). Then I find the element with a class=".b1", which it will only find the one that is next to this specific input and I set the HTML to just that element.
Since there is another input, the same actions happen when THAT input changes, but instead it finds IT's parent, and finds the element with class=".b1" that is next to IT. So both divs with input are contained since they act on elements relative to itself and not across the document.
For extra fun and to show you how flexible this way of programming is, here is a fiddle with the Javascript-code unchanged, but with the exact same question-div copied 8 times. No matter how many times you repeat this, the same code will act on as many divs as you create since everything works relative. http://jsfiddle.net/xS7zF/7/
Hopefully this helps, the rest is up to you!
ID's must be unique, you should not repeat them. You could replace id with class and in the jQuery function do (".ub").each() or manually referencing the object using eq(x). e.g. (".ub").eq(1).
You shouldn't assign same id's to different elements.
You CAN but you SHOULDN'T. Instead of giving the same id, use class
IDs must be unique, try fix this, change to classes.
You can try something like this:
$("div div:first-child")
instead of
$("#eb")
But depends of the rest of your page code. So, change to classes first and use
$(".eb")
when jQuery / javascript find the first ID it would ignore the rest, please read more about it
http://www.w3schools.com/tags/att_global_id.asp
I have a jQuery element but I have to send it to a function that only accepts HTML elements. How can I convert the jQuery element to an HTML element?
Try myJQueryElement.get(0) or myJQueryElement[0]. (get() is most useful when you need negative indices, for example, as described in the documentation for get().)
$("#foo")[0] will get you an HTML element. Using brackets is a tiny bit faster than using .get() but not something you'll likely notice unless you are doing it millions of times.
Why does document.forms[0] return something (the first form on the page), but document.getElementById("thediv").forms[0] does not return anything?
Example JSFiddle
On a more complex page, I would expect the be able to narrow down the scope of the browser's search for form elements by specifying an ID.
forms is a property of document. document.getElementById is a function that returns an HTMLElement object. This does not have a property called forms. Look at jQuery if you'd like more logical javascript.
Because there isn't such a property forms on DOM element objects, only the document object.
Forms are still forms within the same page no matter where they're found in the document tree. If you need to grab a subset of forms on a page based on a certain parent element, you'll probably want to try a library like jQuery.
document.getElementById('thediv').getElementsByTagName('form')[0];
I have a form, which I want to iterate through. I want to show one fieldset at a time, and then show a "next" and "back" button to go to the next section.
I'm assuming that I start with $('fieldset'); but how do I access individual elements thereafter?
$("fieldset")[i] does not seem to work.
How would I accomplish that with jQuery?
I don't necessarily recommend this, but:
$($('.fieldset')[i]).css(...)
Should work.
If you wrap each call to $('.fieldset')[i] in a new JQuery selector, you create a new JQuery object out of that single item. JQuery objects have the method css that you want. Regular dom objects do not. (That's what you get with $('.fieldset')[i])
From the jQuery documentation:
How do I pull a native DOM element from a jQuery object?
A jQuery object is an array-like
wrapper around one or more DOM
elements. To get a reference to the
actual DOM elements (instead of the
jQuery object), you have two options.
The first (and fastest) method is to
use array notation:
$('#foo')[0]; // equivalent to
document.getElementById('foo') The
second method is to use the get
function:
$('#foo').get(0); // identical to
above, only slower You can also call
get without any arguments to retrieve
a true array of DOM elements.
To get a jQuery wrapper back around the DOM element you just extracted, rewrap it like so:
$( $('#foo')[0] ) //now it's ajQuery element again.
$("fieldset").each(function() {
// code, applied for each fieldset
})