Relative form action resolves to absolute URL?

Question

I am trying to get the actual string that is placed in a form action. The problem is when I do this, the action property resolves to an absolute path even though a relative path is in the HTML. How do I get the actual string that is in the action property?

Here is a sample of what I am referring to: http://jsfiddle.net/MSY4s/

Answer 1

If you're already using jquery, I would use the .attr function rather than extracting the DOM element from the jQuery object. Like so:

$("form").attr("action");

That should give you literally what is in the action attribute. In the example you provided, that should look like "/somewhere". The second example in your jFiddle will show a full path since that's what is in the action attribute.

• Ian: Good point. Is there a reason why basic javascript evaluates it?
• Paul Richter: @ianpgall That's a good question, I was wondering the same. My assumption is that this is simply how that function is written so that the browser knows the full URL for submission, however if anybody knows more specifically, I would very much like to know.
• lonesomeday: The value of the attribute is as it appeared in the original HTML. The value of the property is evaluated. If you don't know the difference between properties and attributes, it's worth reading up on it.
• Paul Richter: @ianpgall Nice find, interesting. Lonesomeday, very good info thanks.

Answer 2

Relative URLs are always resolved to absolute ones on the base of the current document’s URL.

• Paul Richter: Wasn't me, but I'm assuming because the answer doesn't directly answer the OP's question. He was asking how to obtain the relative URL. Your answer would make for a great comment on the question, or an existing answer though.
• Ian: It has nothing to do with why it happens in Javascript though, especially when it can clearly be retrieved with jQuery.attr or getAttribute.
• Harsha Venkataramu: @Teeg : I agree,I probably should've elaborated instead of posting a statement. @ianpgall : I was trying to think sans jQuery
• Ian: @harsha True, but in a comment of mine from another answer, you can use getAttribute and that doesn't evaluate to an absolute URL. It might be the difference between attributes and properties, as lonesomeday pointed out.

Answer 3

Try this:

Give both of your forms ids:

<form id="form1" action="/somewhere" method="post">
<input type="text" name="test" />
</form>
<form id="form2" action="https://fiddle.jshell.net/somewhere2" method="post">
<input type="text" name="test" />
</form>​

Then using these ids you can get the action attribute of each form:

$('#form1').attr('action');
$('#form2').attr('action');

You can also set the action attributes using the same tags:

$('#form1').attr('action', '[New Action Value]');
$('#form2').attr('action', '[New Action Value]');

Hope this helps.