August 22, 20169 yr Hi I have created a form which collects a user name and simply just displays a user name when you click ok using css and JavaScript but nothing is working. Any idea on how to make it work? Thank you Frank <!DOCTYPE HTML> <HTML> <HEAD> <TITLE>First Step </TITLE> <STYLE> Html, Body { margin:10; padding:0; } #Label1 { position: absolute; cursor: default; Left: 142px; top: 38px; z-index:-1; } #Label2 { position: absolute; cursor: default; Left: 142px; top: 223px; z-index:-1; } #Textbox1 { position: absolute; Left: 142px; top: 68px; z-index:-1; } #Textbox2 { position: absolute; Left: 142px; top: 110px; z-index:-1; } #CommandButton1 { position: absolute; Left: 142px; top: 154px; height: 30px; width: 435px; z-index:-1; } </STYLE> <script LANGUAGE="JavaScript"><!-- Function okClick() { var b= document.getElementsByName("Textbox1") alert (" Your Name Is "+ } // --> </script> <BODY> </BODY> <FORM ID= "TakingFirstStep" NAME="TakingFirstStep" METHOD=POST ACTION="javascript:void(0)"> <DIV ID="Label1"> <Label for="Label1">Enter your email address and click the button below to get started.</label> </DIV> <DIV ID="Label2"> <Label for="Label2">I hate SPAM and promise to keep your email address safe.</label> </DIV> <DIV ID="Textbox1"> <INPUT TYPE="TEXT" NAME="Textbox1" VALUE="name" SIZE= "23" </DIV> <DIV ID="Textbox2"> <INPUT TYPE="TEXT" NAME="Textbox2" VALUE="email" SIZE= "23" </DIV> <DIV ID="CommandButton1"> <INPUT TYPE="button" Onclick= "OkClick() " value = "Ok" > </DIV> </FORM> </HEAD> </HTML>
August 22, 20169 yr There are so many issues with that code I'm not sure where to start, mixed case, unclosed input elements, incorrect syntax, closing body and head tags in the wrong order. The main issue with the javascript is that document.getElementsByName doesn't exist, it is either getElementById, getElementsByTagName or getElementsByClassName. I have no idea what all the z-index:-1; is about either. Try this: <!DOCTYPE html> <html> <head> <title>First Step</title> <style> body{ margin:0; padding:0; font-family:arial,sans-serif; } form{ padding:20px; } label, input{ display:block; margin:0 0 5px; } input[type="text"]{ margin:0 0 10px; } </style> </head> <body> <form action=""> <label for="username">Enter a Username.</label> <input type="text" id="username" name="username" placeholder="Username"> <label for="email">I hate SPAM and promise to keep your email address safe.</label> <input type="text" id="email" name="email" placeholder="Email"> <input type="button" onclick="okClick();" value ="Ok"> </form> <script> function okClick() { var b= document.getElementById("username").value; alert (" Your Name Is " + } </script> </body> </html>
August 22, 20169 yr Author Thanks mr nfc the z-index:-1 is used so elements don't overlap. The idea is to edit the Top and Left CSs style to position the elements anywhere on the screen as well as as to get data inputs such as Name on textbox1. The elements should be movable manually by changing Top and Left css. Can you do that thanks a lot. Sent from my iPhone using Tapatalk
August 22, 20169 yr Don't do it like that. Positioning anything using pixels is doomed to failure as it won't work properly on all devices. Keep it simple and put everything top left where people expect it to be.
August 25, 20169 yr Author Thank you fisicx and thank you nfc212. My objective was to create a program in my native application which gives me object drawings such as buttons textboxes etc positioned by design within my application and translate the same design layout in a web browser. So far all works but the output is somehow and always off. However the layout can be corrected by adjusting the Top and Left pixels. Thanks again. Sent from my iPhone using Tapatalk
August 26, 20169 yr Author Check out my application it pushes css to the limits but all works great including the JavaScript I was doubting. Top left is the control and you can position any element anywhere you want and just continue to coding. You get element inputs by document.getelementsbyName("element").[0].value check it out at Http://Redvoltex.blogspot.ca and we all learn't something. Sent from my iPhone using Tapatalk
Create an account or sign in to comment