Jump to content

Why is my form failing to respond? I have html CSS and Javascrip together.t


picatree

Recommended Posts

Why is javascript not working with my form? I can not return any form element with document.getelementsByID or document.getelmentsByname. I wanted to do a simple what is your name put a user's name and display it back. Also I wanted to position the form elements wherever I want. How do I accomplish all that? Any fix or suggestion on how I should have done this? Thank you in advance Frank

 

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>First Step </TITLE>

<STYLE>
Html, Body {
margin:10;
padding:0;
}
#Label1 {
position: absolute;
cursor: default;
Left: 124px;
top: 7px;
z-index:-1;
}
#Label2 {
position: absolute;
cursor: default;
Left: 124px;
top: 69px;
z-index:-1;
}
#Label3 {
position: absolute;
cursor: default;
Left: 129px;
top: 220px;
z-index:-1;
}
#Textbox1 {
position: absolute;
Left: 124px;
top: 100px;
z-index:-1;
}
#Textbox2 {
position: absolute;
Left: 2px;
top: 50px;
z-index:-1;
}
#CommandButton1 {
position: absolute;
Left: 2px;
top: 10px;
height: 23px;
width: 595px;
z-index:-1;
}

</STYLE>

<SCRIPT LANGUAGE="JavaScript"><!--

function OKClick() {
//var x="By Frank" this works fine if i add it to Hello world.
var x = document.getElementByname("Textbox1"); This doesn't work by ID or by Name it will put elements out of line.
alert("Hello "+x )

}

// Do not Add or Remove anything past this line!
//--------------------------------------------------------------------------
// -->

</script>


<BODY>
</BODY>
<FORM ID= "FirstStep" NAME="FirstStep" METHOD=POST ACTION="javascript:void(0)">
<DIV ID="Label1">
<Label for="Label1">Almost there! Please complete this form and click the button below to gain instant access.</label>
</DIV>
<DIV ID="Label2">
<Label for="Label2">Enter your email address and click the button below to get Started.</label>
</DIV>
<DIV ID="Label3">
<Label for="Label3">I hate SPAM and promise to keep your email address safe.</label>
</DIV>
<DIV ID="Textbox1">
<INPUT TYPE="TEXT" NAME="textbox1" VALUE="Name" SIZE=" 39"
</DIV>
<DIV ID="Textbox2">
<INPUT TYPE="TEXT" NAME="Textbox2" VALUE="Email" SIZE=" 39"
</DIV>
<DIV ID="CommandButton1">
<h1><INPUT TYPE="button" Onclick= "OKClick() " value = "I'M WILLING TO TAKE ACTION NOW >>" </h1>
</DIV>
</FORM>
</HEAD>
</HTML>

FirstStep.html

Edited by picatree
Link to comment
Share on other sites

There is no such thing as getElementByname(); so it throws an error, it has to be correct in every way, it looks for a possible multiple elements using the same name attribute, not singular like ID, so its ('getElements'), is also must be CamelCase ('getElementsByName');

 

Then you need to tell it which element/s you wish to retrieve the information from by using index ref, since you have only one the index will be 0

 

var x = document.getElementsByName("Textbox1")[0],

 

This will still fail, because there is no input with name value of 'Textbox1', it is case sensitive so 'textbox1' used for name attribute value of input

 

 

<INPUT TYPE="TEXT" NAME="textbox1" VALUE="Name" SIZE="39">

 

and document.getElementsByName("Textbox1")[0] are treated differently.

 

This also will only show that x is and html input object'

 

 

var x = document.getElementsByName("Textbox1")[0];

 

You want retrieve value, so reference the value

 

 

var x = document.getElementsByName("Textbox1")[0].value;

 

You also have problems with inputs not closed properly with '>' so it will have problems with closing div elements cause its attempting to include </div> as part of its html.

Edited by dsonesuk
Link to comment
Share on other sites

  • 2 weeks later...

As far as I understand, you main top level tags are wrong.

<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>First Step </TITLE>
<STYLE>
</STYLE>
    <BODY>    <----------------
</BODY>
     </FORM>
    </HEAD>   <---------------
</HTML>

</HEAD> must be closed before the <body> can be opened.

Edited by James_Purcell
  • Like 1
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
×
×
  • Create New...