[jQuery] Re: Getting Parent Element using "this"
jQuery is even easier than that. You can remove the need to put your
onchange inline like so:
var formAction = null;
$("select[name=some_name]").change(function() {
formAction = $(this).parent().attr("action");
});
This binds the anonymous function to set the variable formAction, to the
change event of the select.
-- Josh
- Original Message -
From: "briandichiara" <[EMAIL PROTECTED]>
To: "jQuery (English)"
Sent: Thursday, May 08, 2008 12:18 PM
Subject: [jQuery] Getting Parent Element using "this"
I have a page where I need to get a parent forms action after firing
the onchange event on a select, like so:
I can't figure out how to use "this" + a selector with jQuery,
I've tried
function changeAction(elm){
var formAction = elm.$(":parent form").attr("action");
}
I really have no clue how to do effectively use "this" + a selector.
[jQuery] Re: Getting Parent Element using "this"
what if the parent element is not a form. like:
On May 8, 2:30 pm, "Josh Nathanson" <[EMAIL PROTECTED]> wrote:
> jQuery is even easier than that. You can remove the need to put your
> onchange inline like so:
>
> var formAction = null;
>
> $("select[name=some_name]").change(function() {
> formAction = $(this).parent().attr("action");
>
> });
>
> This binds the anonymous function to set the variable formAction, to the
> change event of the select.
>
> -- Josh
>
> - Original Message -
> From: "briandichiara" <[EMAIL PROTECTED]>
> To: "jQuery (English)"
> Sent: Thursday, May 08, 2008 12:18 PM
> Subject: [jQuery] Getting Parent Element using "this"
>
> > I have a page where I need to get a parent forms action after firing
> > the onchange event on a select, like so:
>
> >
> >
> >
> >
> >
>
> > I can't figure out how to use "this" + a selector with jQuery,
>
> > I've tried
>
> > function changeAction(elm){
> >var formAction = elm.$(":parent form").attr("action");
> > }
>
> > I really have no clue how to do effectively use "this" + a selector.
[jQuery] Re: Getting Parent Element using "this"
Also, i'd rather not "commit" anything i.e. using "name=blah" in case
the name gets changed. without me knowing.
On May 8, 2:30 pm, "Josh Nathanson" <[EMAIL PROTECTED]> wrote:
> jQuery is even easier than that. You can remove the need to put your
> onchange inline like so:
>
> var formAction = null;
>
> $("select[name=some_name]").change(function() {
> formAction = $(this).parent().attr("action");
>
> });
>
> This binds the anonymous function to set the variable formAction, to the
> change event of the select.
>
> -- Josh
>
> - Original Message -
> From: "briandichiara" <[EMAIL PROTECTED]>
> To: "jQuery (English)"
> Sent: Thursday, May 08, 2008 12:18 PM
> Subject: [jQuery] Getting Parent Element using "this"
>
> > I have a page where I need to get a parent forms action after firing
> > the onchange event on a select, like so:
>
> >
> >
> >
> >
> >
>
> > I can't figure out how to use "this" + a selector with jQuery,
>
> > I've tried
>
> > function changeAction(elm){
> >var formAction = elm.$(":parent form").attr("action");
> > }
>
> > I really have no clue how to do effectively use "this" + a selector.
[jQuery] Re: Getting Parent Element using "this"
I don't know why my reply's aren't showing up, but:
What if the first parent is not a form (like it could be a label or
div)? and also, I would like to avoid using the "name=something" just
because the name could change without me knowing it.
Thanks for the help.
On May 8, 2:30 pm, "Josh Nathanson" <[EMAIL PROTECTED]> wrote:
> jQuery is even easier than that. You can remove the need to put your
> onchange inline like so:
>
> var formAction = null;
>
> $("select[name=some_name]").change(function() {
> formAction = $(this).parent().attr("action");
>
> });
>
> This binds the anonymous function to set the variable formAction, to the
> change event of the select.
>
> -- Josh
>
> - Original Message -
> From: "briandichiara" <[EMAIL PROTECTED]>
> To: "jQuery (English)"
> Sent: Thursday, May 08, 2008 12:18 PM
> Subject: [jQuery] Getting Parent Element using "this"
>
> > I have a page where I need to get a parent forms action after firing
> > the onchange event on a select, like so:
>
> >
> >
> >
> >
> >
>
> > I can't figure out how to use "this" + a selector with jQuery,
>
> > I've tried
>
> > function changeAction(elm){
> >var formAction = elm.$(":parent form").attr("action");
> > }
>
> > I really have no clue how to do effectively use "this" + a selector.
[jQuery] Re: Getting Parent Element using "this"
> I don't know why my reply's aren't showing up, but:
>
> What if the first parent is not a form (like it could be a
> label or div)? and also, I would like to avoid using the
> "name=something" just because the name could change without
> me knowing it.
Assuming you have a DOM element in 'this', you can get its parent form with:
$(this).parents('form:first')
Since forms can't be nested, you don't actually need the :first part, but
it's a good habit to get into if you use this technique for other element
types that can be nested.
BTW, nesting a select element inside a label element only works in some
browsers (IIRC, it doesn't work in IE). Use the for="id" attribute in your
label for cross-browser compatibility.
-Mike
[jQuery] Re: Getting Parent Element using "this"
Ok, I tried this:
$(elm).parents().map(function () {
alert(this.tagName);
});
but the FORM never shows up. Reason is because the source looks like
this:
opt 1
opt 2
I won't be able to alter the source, for it is nothing i have much
control over. So, how would i get the ACTION from the FORM above on
the SELECT menu's ONCHANGE event using jQuery?
On May 8, 2:30 pm, "Josh Nathanson" <[EMAIL PROTECTED]> wrote:
> jQuery is even easier than that. You can remove the need to put your
> onchange inline like so:
>
> var formAction = null;
>
> $("select[name=some_name]").change(function() {
> formAction = $(this).parent().attr("action");
>
> });
>
> This binds the anonymous function to set the variable formAction, to the
> change event of the select.
>
> -- Josh
>
> - Original Message -
> From: "briandichiara" <[EMAIL PROTECTED]>
> To: "jQuery (English)"
> Sent: Thursday, May 08, 2008 12:18 PM
> Subject: [jQuery] Getting Parent Element using "this"
>
> > I have a page where I need to get a parent forms action after firing
> > the onchange event on a select, like so:
>
> >
> >
> >
> >
> >
>
> > I can't figure out how to use "this" + a selector with jQuery,
>
> > I've tried
>
> > function changeAction(elm){
> >var formAction = elm.$(":parent form").attr("action");
> > }
>
> > I really have no clue how to do effectively use "this" + a selector.
[jQuery] Re: Getting Parent Element using "this"
ok, i'm not sure if this is the easiest way, however, this is how I
got the form action in the following HTML:
opt 1
opt 2
I used:
var formAction = $
(elm).parents('table:first').children("form:first").attr("action");
For some reason, it misses the form object on the way back using
"parents" so i move forward after hitting the FORM's parent to get the
form. Not sure if this is browser specific, but definitely a
headache. (and the terrible HTML syntax doesn't help either)
Thanks
On May 8, 4:20 pm, "Michael Geary" <[EMAIL PROTECTED]> wrote:
> > I don't know why my reply's aren't showing up, but:
>
> > What if the first parent is not a form (like it could be a
> > label or div)? and also, I would like to avoid using the
> > "name=something" just because the name could change without
> > me knowing it.
>
> Assuming you have a DOM element in 'this', you can get its parent form with:
>
> $(this).parents('form:first')
>
> Since forms can't be nested, you don't actually need the :first part, but
> it's a good habit to get into if you use this technique for other element
> types that can be nested.
>
> BTW, nesting a select element inside a label element only works in some
> browsers (IIRC, it doesn't work in IE). Use the for="id" attribute in your
> label for cross-browser compatibility.
>
> -Mike
[jQuery] Re: Getting Parent Element using "this"
Could you possibly just give your form an id attribute? Then onchange you
could just return $("#myformid").attr("action") and not have to mess with
any traversing.
-- Josh
- Original Message -
From: "briandichiara" <[EMAIL PROTECTED]>
To: "jQuery (English)"
Sent: Thursday, May 08, 2008 1:58 PM
Subject: [jQuery] Re: Getting Parent Element using "this"
Ok, I tried this:
$(elm).parents().map(function () {
alert(this.tagName);
});
but the FORM never shows up. Reason is because the source looks like
this:
opt 1
opt 2
I won't be able to alter the source, for it is nothing i have much
control over. So, how would i get the ACTION from the FORM above on
the SELECT menu's ONCHANGE event using jQuery?
On May 8, 2:30 pm, "Josh Nathanson" <[EMAIL PROTECTED]> wrote:
jQuery is even easier than that. You can remove the need to put your
onchange inline like so:
var formAction = null;
$("select[name=some_name]").change(function() {
formAction = $(this).parent().attr("action");
});
This binds the anonymous function to set the variable formAction, to the
change event of the select.
-- Josh
- Original Message -
From: "briandichiara" <[EMAIL PROTECTED]>
To: "jQuery (English)"
Sent: Thursday, May 08, 2008 12:18 PM
Subject: [jQuery] Getting Parent Element using "this"
> I have a page where I need to get a parent forms action after firing
> the onchange event on a select, like so:
>
>
>
>
>
> I can't figure out how to use "this" + a selector with jQuery,
> I've tried
> function changeAction(elm){
>var formAction = elm.$(":parent form").attr("action");
> }
> I really have no clue how to do effectively use "this" + a selector.
[jQuery] Re: Getting Parent Element using "this"
With markup as invalid as that, it's no surprise that elements are not where
you expect them in to be in the DOM. A FORM element can't be sandwiched in
between a TABLE and TR like that. So the browser tries to turn this into
something it can work with. It may shuffle things around, or just put up
with the "incorrect" structure, or whatever. And yeah, it may be different
from one browser to another.
But I think you mentioned that you're stuck with working with the HTML as it
is, so lucky you, you get to deal with the aftermath. :-(
-Mike
> ok, i'm not sure if this is the easiest way, however, this is
> how I got the form action in the following HTML:
>
>
>
>
>cellpadding="0" cellspacing="0">
>
>
>border="0" cellspacing="1" cellpadding="3" width="100%">
>Method="Post" Action="phoenix.zhtml?c=69181&p=IROL-
> irhome&t=SwitchQuote" >
>
>
>
>
>
>
>
>ONCHANGE="updateQuote(this);">
>
>SELECTED="">opt 1
>
> opt 2
>
>
>
>
>
>
>
>
>
> I used:
>
> var formAction = $
> (elm).parents('table:first').children("form:first").attr("action");
>
> For some reason, it misses the form object on the way back
> using "parents" so i move forward after hitting the FORM's
> parent to get the form. Not sure if this is browser
> specific, but definitely a headache. (and the terrible HTML
> syntax doesn't help either)
[jQuery] Re: Getting Parent Element using "this"
If there is as little control over the markup as is implied then a
more generic solution might be applicable (untested!)?
function updateQuote(el){
//$('form') could be cached, and may not need to store parentForm...
var parentForm = $('form').filter(function(){
var i = this.elements.length;
while((i--) && this.elements[i] !== el){}
return (i >= 0);
});
parentForm.attr('action', ''); //whatever...
}
Since there seems to be concern over HTML changing (without due care
and attention?) then it's possible that the structure could be changed
to place the select within one (or more) tables within the form, or
even just to make the markup valid!, which would nullify one or other
function call in parents('table:first').children('form:first').
One can only go so far, to protect other people from themselves.
On May 9, 1:54 am, "Michael Geary" <[EMAIL PROTECTED]> wrote:
> With markup as invalid as that, it's no surprise that elements are not where
> you expect them in to be in the DOM. A FORM element can't be sandwiched in
> between a TABLE and TR like that. So the browser tries to turn this into
> something it can work with. It may shuffle things around, or just put up
> with the "incorrect" structure, or whatever. And yeah, it may be different
> from one browser to another.
>
> But I think you mentioned that you're stuck with working with the HTML as it
> is, so lucky you, you get to deal with the aftermath. :-(
>
> -Mike
>
> > ok, i'm not sure if this is the easiest way, however, this is
> > how I got the form action in the following HTML:
>
> >
> >
> >
> > > cellpadding="0" cellspacing="0">
> >
> >
> > > border="0" cellspacing="1" cellpadding="3" width="100%">
> > > Method="Post" Action="phoenix.zhtml?c=69181&p=IROL-
> > irhome&t=SwitchQuote" >
>
> >
>
> >
>
> >
>
> > > ONCHANGE="updateQuote(this);">
>
> > > SELECTED="">opt 1
>
> >opt 2
>
> >
>
> >
>
> >
> >
> >
>
> > I used:
>
> > var formAction = $
> > (elm).parents('table:first').children("form:first").attr("action");
>
> > For some reason, it misses the form object on the way back
> > using "parents" so i move forward after hitting the FORM's
> > parent to get the form. Not sure if this is browser
> > specific, but definitely a headache. (and the terrible HTML
> > syntax doesn't help either)
[jQuery] Re: Getting Parent Element using "this"
> Could you possibly just give your form an id attribute? Then onchange you
> could just return $("#myformid").attr("action") and not have to mess with
> any traversing.
>
> -- Josh
>
> - Original Message -
> From: "briandichiara" <[EMAIL PROTECTED]>
> To: "jQuery (English)"
> Sent: Thursday, May 08, 2008 1:58 PM
> Subject: [jQuery] Re: Getting Parent Element using "this"
>
> > Ok, I tried this:
>
> > $(elm).parents().map(function () {
> > alert(this.tagName);
> > });
>
> > but the FORM never shows up. Reason is because the source looks like
> > this:
There's no need for any of this; elements of a form (input, select,
textarea) has a "form" property, so:
function changeAction(elm){
var formAction = elm.form.action;
...
}
And, as others have suggested, it's a better practice to do this all
in JavaScript, so that becomes:
jQuery(document).ready(function() {
jQuery('select#some_select').change(function() {
var formAction = this.form.action;
...
});
});
--
hj
[jQuery] Re: Getting Parent Element using "this"
Thanks for the tip hj. Is that a cross-browser solution? I tested it
in FF and got the absolute URL, but in IE it returns the relative
URL.
I used
var formAction = $(elm.form).attr("action");
and that will return the same in both browsers, however I'd still like
to know how reliable that is. Thanks.
Brian.
On May 9, 10:37 am, hj <[EMAIL PROTECTED]> wrote:
> > Could you possibly just give your form an id attribute? Then onchange you
> > could just return $("#myformid").attr("action") and not have to mess with
> > any traversing.
>
> > -- Josh
>
> > - Original Message -
> > From: "briandichiara" <[EMAIL PROTECTED]>
> > To: "jQuery (English)"
> > Sent: Thursday, May 08, 2008 1:58 PM
> > Subject: [jQuery] Re: Getting Parent Element using "this"
>
> > > Ok, I tried this:
>
> > > $(elm).parents().map(function () {
> > > alert(this.tagName);
> > > });
>
> > > but the FORM never shows up. Reason is because the source looks like
> > > this:
>
> There's no need for any of this; elements of a form (input, select,
> textarea) has a "form" property, so:
>
>
>
>
>
>
>
> function changeAction(elm){
> var formAction = elm.form.action;
> ...
> }
>
> And, as others have suggested, it's a better practice to do this all
> in JavaScript, so that becomes:
>
>
>
>
>
>
>
> jQuery(document).ready(function() {
> jQuery('select#some_select').change(function() {
> var formAction = this.form.action;
> ...
> });
> });
>
> --
>
> hj
