• Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

HTML DOM, Javascript Question

ct5098

New Member
Joined
Aug 3, 2009
Messages
13 (0.00/day)
Likes
0
Processor AMD Phenom II 955 BE @ 3.4 GHz
Motherboard MSI K9N2G Neo
Cooling Xigmatek heatsink
Memory 2 x 2GB DDR2 @ 800 MHz
Video Card(s) Sapphire 2GB Radeon HD 6950
Storage 1TB Western Digital Black Edition
Display(s) Auria 25" LCD
Case NZXT tower
Audio Device(s) N/A
Power Supply 550 Watt
Software Windows 7 Home Premium 64-bit
#1
I'm creating a web-based inventory management system for a computer repair store. I want to have the user click a button and create a form underneath the button. If I create the form via Javascript with createElement, appendChild, etc. will I be able to access the ids within the newly created form and provide client-side validation with Javascript? Right now I'm using AJAX to get the form from a PHP script where I just echo the HTML code; then I just use innerHTML to insert the code onto the page. I can't use Javascript to validate the form the way I do it now.
 

temp02

New Member
Joined
Mar 18, 2009
Messages
493 (0.15/day)
Likes
165
#2
How about setting the default size of the Form to 0 (CSS height) and when the button is pressed the form is shown (height property removed or returned to default size, you could even animate the sucker if you want)?
As for the validation it has to occur in the server when the POST of the form is submited, you could validate it with javascript but some smartguy could still submit "wrong" values.

Please note that it has been a while since I've messed with any web stuff :p.
 

ct5098

New Member
Joined
Aug 3, 2009
Messages
13 (0.00/day)
Likes
0
Processor AMD Phenom II 955 BE @ 3.4 GHz
Motherboard MSI K9N2G Neo
Cooling Xigmatek heatsink
Memory 2 x 2GB DDR2 @ 800 MHz
Video Card(s) Sapphire 2GB Radeon HD 6950
Storage 1TB Western Digital Black Edition
Display(s) Auria 25" LCD
Case NZXT tower
Audio Device(s) N/A
Power Supply 550 Watt
Software Windows 7 Home Premium 64-bit
#3
I was thinking of doing something with CSS, except with the visibility property. Wil this work if I just change the visibility of the form to hidden and then visible? I was only just starting to learn AJAX and I just wanted to use it to see how it would work.
 

temp02

New Member
Joined
Mar 18, 2009
Messages
493 (0.15/day)
Likes
165
#4
AFAIK yes you can change the css "visibility" property to "hidden" or "visible" and the form should act accordingly.
It's easier this way, since it's just one or two lines of Javascript to show and hide the form.
 

ct5098

New Member
Joined
Aug 3, 2009
Messages
13 (0.00/day)
Likes
0
Processor AMD Phenom II 955 BE @ 3.4 GHz
Motherboard MSI K9N2G Neo
Cooling Xigmatek heatsink
Memory 2 x 2GB DDR2 @ 800 MHz
Video Card(s) Sapphire 2GB Radeon HD 6950
Storage 1TB Western Digital Black Edition
Display(s) Auria 25" LCD
Case NZXT tower
Audio Device(s) N/A
Power Supply 550 Watt
Software Windows 7 Home Premium 64-bit
#5
Ok, thanks for your help. I always try to do things the hard way :)
 

W1zzard

Administrator
Staff member
Joined
May 14, 2004
Messages
17,186 (3.44/day)
Likes
18,169
Processor Core i7-4790K
Memory 16 GB
Video Card(s) GTX 1080
Display(s) 30" 2560x1600 + 19" 1280x1024
Software Windows 7
#6
if the form is static you should hide it via css visibility

if you need to generate its contents on user action, use ajax to generate the html code and insert it in appropriate position, this should update the DOM tree.

dont forget about server side validation. never ever trust the client with anything, it's incredibly easy to modify/remove/generate html and js code


personally i avoid js whereever possible or at least make sure there's a decent fallback for client without js enabled that makes sure everything stays usable
 

ct5098

New Member
Joined
Aug 3, 2009
Messages
13 (0.00/day)
Likes
0
Processor AMD Phenom II 955 BE @ 3.4 GHz
Motherboard MSI K9N2G Neo
Cooling Xigmatek heatsink
Memory 2 x 2GB DDR2 @ 800 MHz
Video Card(s) Sapphire 2GB Radeon HD 6950
Storage 1TB Western Digital Black Edition
Display(s) Auria 25" LCD
Case NZXT tower
Audio Device(s) N/A
Power Supply 550 Watt
Software Windows 7 Home Premium 64-bit
#7
Yes, the form is static. I am going to have to validate with PHP as well trio check the MySQL database to ensure no duplicate entries, etc. Thanks for the responses.