Javascript/HTML Form field naming issue

Question

Consider the following simple form:

<form method="GET" action="handle.php">
  <input type="hidden" name="action" value="search">
</form>

Form submission is performed by Javascript (iui) in an ajax call. All fields are properly gathered from the form. Javascript then wants to send the ajax call to "form.action".

This is where my problem starts. The object form is of type HTMLFormElement. The action property of the form is supposed to be of type string and should contain "handle.php". After some hours of debugging, I noticed that form.action is now of type HTMLInputElement.

My question: Is this proper Javascript behavior? I would have never though that defining a form field with the name of a form attribute, this would happen. In the mean time I solved the issue by naming my field differently.

Thanks in advance for any advice...

Found an easy way of displaying my problem. First the form with the problem:

<form action="test.php">
    <input type="hidden" name="action" value="test">
    <input type="button" onclick="alert(this.form.action);">
</form>

And the form that is proper:

<form action="test.php">
    <input type="hidden" name="NOT_AN_ATTRIBUTE_NAME" value="test">
    <input type="button" onclick="alert(this.form.action);">
</form>

In the first, the popup states "[object HTMLInputElement]", in the second: "http://localhost/test.php".

I dont know is that proper for JS but it seem its in a way you described, is that big issue to change input name from action to another name? — Chris
– Chris, Commented Jan 6, 2011 at 13:59
@Chris: obviously I already solved it by renaming my field. But the problem remains when posting forms using javascript in ajax calls. Form fields cannot have the same name as form attributes. — djBo
– djBo, Commented Jan 6, 2011 at 14:07
Can't you use document.getElementById('formid').getAttribute('action') instead of just form.action? And similarly for other fields? — Matthew Wilson
– Matthew Wilson, Commented Jan 6, 2011 at 14:36

Josh · Accepted Answer · 2011-01-06 15:21:19Z

3

The issue you're seeing is because forms are special in JavaScript. All their fields are accessable as properties, so when you use this.form.action, it's getting the field action, not the HTML attribute action="test.php".

Try changing alert(this.form.action); to alert(this.form.getAttribute('action')) instead.

answered Jan 6, 2011 at 15:21

Josh

11.1k11 gold badges67 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

djBo Over a year ago

/Matthew: getAttribute seems to work. It doesn't give a full URL like this.form.action does, but luckily ajax doesn't care too much.

Chris · Accepted Answer · 2011-01-06 14:35:26Z

0

It seems as bug. Maybe there should be an array for 'action '

<form action="test.php">
    <input type="hidden" name="action" value="test">
    <input type="button" onclick="alert(this.form.action[0]);"> //the form action
    <input type="button" onclick="alert(this.form.action[1]);"> // the text input 
</form>

answered Jan 6, 2011 at 14:35

Chris

3,4454 gold badges32 silver badges34 bronze badges

1 Comment

Chris Over a year ago

@Matt: Yes, its proposition to solution that would had to be included in Javascript itself.

Yoram de Langen · Accepted Answer · 2011-01-06 15:16:25Z

0

your this.form.action is still a object. instead of using alert put it in a console.log(this.form.action) and use firebug and firequery try to discover what events/properties your this.form.action has.

!you need to enable your console in firebug before you can use console.log

answered Jan 6, 2011 at 15:16

Yoram de Langen

5,4993 gold badges26 silver badges32 bronze badges

Collectives™ on Stack Overflow

Javascript/HTML Form field naming issue

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related