Jump to content

javascript

hisoka

By hisoka
in JavaScript

 Share

Recommended Posts

hisoka Invested Member

hisoka

Posted
Posted

in this tutorial

 

 

http://www.w3schools.com/js/js_validation.asp

 

there is this script :

 

 

function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("Name must be filled out"); return false; }}

 

I do not understand this :

 

 

var x = document.forms["myForm"]["fname"].value;

 

this :

 

document.forms["myForm"]["fname"] is an array

 

so why it is not like this ??

 

var x = ["my form" , "fname"];

 

and why it is between two strings (document.forms and value) : document.forms["myForm"]["fname"].value

 

it confuses me . I cannot understand this

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Its an old method of targetting specific input elementdocument.forms = all forms within page.document.forms["myForm"] = equals target form with name value of 'myForm'document.forms["myForm"]["fname"] = target input with name value of 'fname' within a form with name value of 'myForm'document.forms["myForm"]["fname"].value = get value of input with name value of 'fname' within a form with name value of 'myForm'.

Link to comment
Share on other sites
hisoka Invested Member

hisoka

Posted
  • Author
Posted

------ ---- - --document (object root)-----------------------

| | | | |

| | | | |

--forms images links cookie domain

| | | | | | | | | | www.w3schools.com

input(1,2,3) src(1,2,3) href(1,2,3)

 

document is the object root and has a collection of elements that differ by type like (forms , domain , links , cookie , images , forms). These elements are the properties of the object root . They have values like(input , src , href....) . The elements of the root object are organised and ordered and can be accessed by index- like in arrays , elements are ordered and accessed by their index numbers in arrays- for example forms[0] , forms[1] and so on ....

 

so in order to access the forms[0] we need to do like this document.forms[0].(variable that holds the name of the form)

for example : document.forms[0].id

 

the document.forms[0] is telling javascript that we are dealing with properties of form type the id make our query more specific and tells javascript that we want the value of the first form in the document or object root.

 

However in this link :

 

http://www.w3schools.com/jsref/coll_doc_forms.asp

 

I accessed the source code and find this form

 

<form role="form"><div class="form-group"><label for="err_email">Your Email:</label><input class="form-control" type="email" id="err_email" name="err_email" /></div><div class="form-group"><label for="err_email">Page address:</label><input class="form-control" type="text" id="err_url" name="err_url" disabled="disabled" /></div><div class="form-group"><label for="err_email">Description:</label><textarea rows="10" class="form-control" id="err_desc" name="err_desc"></textarea></div><div class="form-group"> <button type="button" class="btn btn-default" onclick="sendErr()">Submit</button></div></form><form role="form"><div class="form-group"><label for="err_email">Your Email:</label><input class="form-control" type="email" id="err_email" name="err_email" /></div><div class="form-group"><label for="err_email">Page address:</label><input class="form-control" type="text" id="err_url" name="err_url" disabled="disabled" /></div><div class="form-group"><label for="err_email">Description:</label><textarea rows="10" class="form-control" id="err_desc" name="err_desc"></textarea></div><div class="form-group"> <button type="button" class="btn btn-default" onclick="sendErr()">Submit</button></div></form>

 

I tried to access the form like this

 

alert(document.forms[0].role) but i did not succeed : it says undefined .

 

I tried to change the index number to 2 , 3 , 4 ...7 but I did not work although my command is true . Why it did not work although my command is true?

Link to comment
Share on other sites
hisoka Invested Member

hisoka

Posted
  • Author
Posted (edited)

In order to better understand this : document.forms["myForm"]["fname"]

 

I write this little script

<!DOCTYPE html><html><body><form name="console" onsubmit="return show()"><input type="text" name="hisoka" /><p>Enter your name</p><input type="submit" name="mysubmit" value="Click!" /></form><br><form name="log" onsubmit="return show1()"><input type="text" name="admin" /><p>Enter your name</p><input type="submit" name="mysubmit" value="Click!" /></form><b><form name="sys" onsubmit="return show2()"><input type="text" name="gini" /><p>Enter your name</p><input type="submit" name="mysubmit" value="Click!" /></form><br><form name="user" onsubmit="return show3()"><input type="text" name="brock" /><p>Enter your name</p><input type="submit" name="mysubmit" value="Click!" /></form><script>function show(){var a = document.forms["console"];alert(a);}function show1(){var b = document.forms["log"];alert(;}function show2(){var c = document.forms["sys"];alert(c);}function show3(){var d = document.forms["user"];alert(d);}</script></body></html>

but it shows for all : object html form element as an output

 

what am I missing ?

Edited by davej
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

You have assigned just the form object to a variable with a specific name, you now have tell it what to do, access input using specific name value to access its input value, as shown in my 1st post, as the only thing you can alert from the form is its name valuevar d = document.forms["user"].name; alert(d);ORvar d = document.forms["user"]; alert(d.name);

Link to comment
Share on other sites
hisoka Invested Member

hisoka

Posted
  • Author
Posted

thank you

 

what about this :

 

"I tried to access the form like this

 

alert(document.forms[0].role) but i did not succeed : it says undefined .

 

I tried to change the index number to 2 , 3 , 4 ...7 but I did not work although my command is true . Why it did not work although my command is true?"

 

document.forms["user"].name gives user as output

 

document.forms["console"].name gives console as output

 

I tried the same concerning this

 

http://www.w3schools...l_doc_forms.asp

 

<form role="form">

.....

 

alert(document.forms["form"].role) but it did not work why? and how it works ?

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

Why it did not work although my command is true?

If the browser says that it is undefined then it's undefined, it's not "true". The browser isn't going to make a mistake like that, you're the one making the mistake. You can use console.log(document.forms) to look at the entire forms collection and see everything in it if you want to see what's there.

alert(document.forms["form"].role) but it did not work why? and how it works ?

Form elements do not have a "role" attribute, so the form object is not going to have a role property.https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
Link to comment
Share on other sites
hisoka Invested Member

hisoka

Posted
  • Author
Posted

"Form elements do not have a "role" attribute, so the form object is not going to have a role property."

 

 

But here :

 

<form role="form">

 

The attribute of the form is "role" . Is not it ? so Why this :

 

alert(document.forms["form"].role) did not work ?

Link to comment
Share on other sites
hisoka Invested Member

hisoka

Posted
  • Author
Posted

either I am wrong or you misunderstood me here how it is :

 

in <form class="gsc-search-box gsc-search-box-tools" accept-charset="utf-8">

 

class is the attribute of form .

 

in <form id="myform">

 

id is the attribute of form

 

in <form name = "logoutform">

 

name is the attribute of form right?

 

only specific words can be used as form attributes . the word "role" cannot used as an attribute to a form

 

However in this form( which I found in the source code of this page http://www.w3schools..._validation.asp)

 

<form role="form"><div class="form-group"><label for="err_email">Your Email:</label><input class="form-control" type="email" id="err_email" name="err_email" /></div><div class="form-group"><label for="err_email">Page address:</label><input class="form-control" type="text" id="err_url" name="err_url" disabled="disabled" /></div><div class="form-group"><label for="err_email">Description:</label><textarea rows="10" class="form-control" id="err_desc" name="err_desc"></textarea></div><div class="form-group"> <button type="button" class="btn btn-default" onclick="sendErr()">Submit</button></div></form>

 

the attribute of the form is role . So is not this considered wrong as role cannot be an attribute of a form ???

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

only specific words can be used as form attributes . the word "role" cannot used as an attribute to a form

Right, "role" is not a predefined form attribute which is why the form object in Javascript does not have a property called "role".HTML5 is more relaxed than previous versions of HTML, I believe you can use custom attributes and still have the document validate (I know you can use custom data- attributes, I'm not sure about others). The role attribute specifically is part of ARIA, there's a little bit about it here:http://html5forwebdesigners.com/today/https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIAYou can research more about ARIA if you want to.
  • Like 1
Link to comment
Share on other sites
hisoka Invested Member

hisoka

Posted
  • Author
Posted

In this script

 

<!DOCTYPE html><html><body><form name="console" onsubmit="return show()"><input type="text" value="hisoka" /><p>Enter your name</p><input type="submit" name="mysubmit" value="Click!" /></form><script>function show(){var a = document.forms["console"]["hisoka"].value;alert(a);}</script></body></html>

 

the value hisoka is shown in the form and this is normal but I did not succeed in making the alert box show it . Why the value of hisoka could not appear in the alert box ??

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

How are you testing? Checking your developer tools? Or just guessing? You need to debug and troubleshoot. I would revaluate how you are trying to obtain that value. I would advise against your approach, and would advocate you use the DOM API using a method like getElementById

Link to comment
Share on other sites
hisoka Invested Member

hisoka

Posted
  • Author
Posted (edited)

thank you dsonesuk:

 

it becomes like this :

 

<!DOCTYPE html><html><body><form name="console" onsubmit="return show()"><input name ="moderator" type="text" value="" /><p>Enter your name</p><input type="submit" name="mysubmit" value="Click!" /></form><script>function show(){var a = document.console.moderator.value;alert(a);}</script></body></html>

 

and this

 

<!DOCTYPE html><html><body><form name="console"><input name = "moderator" type ="button" type="text" value="7" onclick="return show()"/></form><script>function show(){var a = document.console.moderator.value;alert(a);}</script></body></html>

 

:)

Edited by hisoka
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...