[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
[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"
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"
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: 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"
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"
> 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"
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"
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"
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"
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.