Get form name via JavaScript

Question

I have simple question but I can't fined good solution on the web.

I have this HTML code:

 <form name="Register" action="Register.aspx" method="post" runat="server" style="margin-top: 15px;" onsubmit="return validateProfile(this);" >

And this JavaScript code

function validateProfile(F) {
var G = F.name; 
}

I want somehow to get the form name, but this code just does not working.

wish for help, thanks!

@alex23—by what magic did the reference passed to the function morph from a DOM form element into an event object? ;-) — RobG, May 24 '13 at 09:44
What you have works fine [here](http://jsbin.com/umaxav/1/). — Ja͢ck, May 24 '13 at 09:45
Open your console and check if the function is undefined... Maybe your function is not loaded? Anyway, what you have should work for getting the name, don't forget to return `G` in the function.. — Ron van der Heijden, May 24 '13 at 09:46

score 5 · Accepted Answer · edited Jun 20 '20 at 09:12

5

There you go

function validateProfile(F) {
    alert(F.name); 
    return false;
}

F is already the form, no need to use .Form .

Since a form is an element, you can access its name using .name.

This is defined in the DOM specification here :

name of type DOMString

Names the form.

Demo

Notice how my JSFiddle contains window.validateProfile = validateProfile because I run it after the DOM is ready, if your function is not directly in a script block, chances are you need to do this too.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 24 '13 at 09:42

Benjamin Gruenbaum

270,886
87
504
504

2

`F` is the only reliable reference to the form element, `this` doesn't work with the code OP provided. – Ja͢ck May 24 '13 at 09:44
@Jack Thanks. That's a good comment, I've edited it into the answer. – Benjamin Gruenbaum May 24 '13 at 09:46
I had a look at your fiddle, it alerted "Result". changing this "this" to "F" alerts the desired "Register". Oh and I didnt downvote. – 最白目 May 24 '13 at 09:47
Well, did you realize that `this` in your code actually refers to `window`? :) – Ja͢ck May 24 '13 at 09:49
@dan Thanks! I've corrected the fiddle. I did not notice that. I usually do un-obtrusive validation where this is not an issue. – Benjamin Gruenbaum May 24 '13 at 09:49
1

After your latest edit, it now looks exactly like OP's code :) – Ja͢ck May 24 '13 at 09:50
@Jack OP edited his code, his original code was `F.Form.name` – Benjamin Gruenbaum May 24 '13 at 09:50
Hi, thank you all for your answers! I don't know why, but in my site **F.name** get some empty value like "" why? – Nave Tseva May 24 '13 at 09:52
1

@NaveTseva Would you mind creating a fiddle illustrating your issue? My code works (for your original issue), I can't understand this one you're having, likely people won't be able to either unless you provide more information – Benjamin Gruenbaum May 24 '13 at 09:53
@NaveTseva Notice how my answer says you _have_ to do `window.validateProfile = validateProfile` otherwise, your function is in the closure scope of the onLoad method. (Notice the difference between my fiddle and yours, and try adding that line to yours). http://jsfiddle.net/Hdvst/ – Benjamin Gruenbaum May 24 '13 at 09:57
Thank you, in the fiddle it works great, but I can't figure why in my site the same code does not working?! I get empty alert – Nave Tseva May 24 '13 at 10:03
@NaveTseva Then instead of accepting the answer, expand your question in a way where this answer still doesn't work; that way we may be able to help you better. – Ja͢ck May 24 '13 at 10:05
@NaveTseva I can play the guessing game but I seriously doubt that would help you. Try to isolate the issue, remove parts until you get the smallest code that isn't working. This might be related to the `runat=server` part but I'm not an asp web forms expert (I only know MVC well) – Benjamin Gruenbaum May 24 '13 at 10:06
you absolutly write, sorry, I found the problem the problem is in the runat="server" than I get this code after Debug '
' and the name tag gone, do you know ehy?
– Nave Tseva May 24 '13 at 10:13
1

@NaveTseva See if this solves your issue http://stackoverflow.com/a/5792306/1348195 . Like I said, I don't use webforms. Honestly, if you're making anything new, I'd seriously consider switching form web forms to MVC, it took me a few weeks to understand, but once I did I became a lot more productive and it was totally worth it. In ASP.NET MVC there are no such surprises – Benjamin Gruenbaum May 24 '13 at 10:14
2

note that the forms .name attribute can be "polluted" by an input with a name of "name". E.g. `
` then the JavaScript will alert with an object (the input) instead of "ActualFormName". At least as far back as IE8, if you use the forms attribute collection, and index the "name" attribute, then it will actually return the correct name. e.g. `F.attributes["name"].value;`
– James Newton Mar 08 '17 at 20:14

score 3 · Answer 2 · answered May 24 '13 at 09:48

3

You likely have a control in the form with a name of name. Form controls are made available as properties of the form, using their name or ID as the property name. So in:

<form name="foo" ...>
  <input name="name" ...>

then:

document.forms['foo'].name

returns a reference to the input element, not the value of the form's name property (which reflects the value of the HTML name attribute).

The solution is to not use attribute values for form controls that are the same as standard form element attribute or DOM property names (e.g. do not name form controls "submit" or "reset" as they will overwrite the form's submit and reset methods).

answered May 24 '13 at 09:48

RobG

142,382
31
172
209

Sadly, this can be unavoidable. e.g. the guy who designed the database used "name" as a field name, and the action script for posting the data back is not accessable (back end code and you are writing user interface) so you pretty much need to have a text input named "name". In modern browsers, form.getAttribute("name") appears to return the actual forms name, but it doesn't in older browsers. – James Newton Mar 08 '17 at 19:46
Just found out that form.attributes["name"].value works (returning the forms name, not the input object) as far back as IE 8, and I believe IE7. – James Newton Mar 08 '17 at 20:12

score -1 · Answer 3 · answered May 24 '13 at 09:43

-1

  var  theForms = document.getElementsByTagName("form");  
    for(i=0;i<theForms.length;i++)  
    alert(theForms[i].name);

or if you have only one form then use theForms [0].name directly

answered May 24 '13 at 09:43

PSR

39,804
41
111
151

score -4 · Answer 4 · answered May 24 '13 at 09:42

-4

If you use Jquery. You can get the attr by this :

$("form").attr("name"); // Register

answered May 24 '13 at 09:42

Jeff Lee

783
9
17

Get form name via JavaScript

4 Answers4

Demo

Linked