JavaScript Help

Printable View

February 1st, 2006, 08:28 PM
HTRegz

JavaScript Help

Hey Hey,

As I've stated before, I'm not a web developer... but I keep getting web dev projects.. So I can navigate PHP pretty good but Javascript is a whole nother world to me.. and I needed input validation... here's the code I'm using

Code:

<script type="text/javascript"> function validateProd() { mNv=addImage.sname1.value; if (mNv=='') { alert('Your name is a required field. Please try again.'); event.returnValue=false; } mNv=addImage.scode1.value; if (mNv=='') { alert('Your name is a required field. Please try again.'); event.returnValue=false; } mNv=addImage.scolour1.value; if (mNv=='') { alert('Your name is a required field. Please try again.'); event.returnValue=false; } mNv=addImage.Docket1.value; if (mNv=='') { alert('Your name is a required field. Please try again.'); event.returnValue=false; } mNv=addImage.imRcvd1.value; if (mNv=='') { alert('Your name is a required field. Please try again.'); event.returnValue=false; } ` } </script>

and further down I have

Code:

<form action="" method="POST" name="addImage" onsubmit="validateProd();">

Which is how I found it presented on the net... but it's still not working... any ideas/?

Peace,
HT
February 1st, 2006, 09:28 PM
HTRegz

Hey Hey,

So the code has transformed a bit after some searching on google.. but still doesn't work..

Code:

<script language="JavaScript">  </script>

and

Code:

<form action="" method="POST" name="addImage" onSubmit="return validateProd();">

Peace,
HT
February 1st, 2006, 10:25 PM
JPnyc

Here's a very generic one I wrote. Should work for any form. If you don't need the passwords matching, you can remove that. The -2 in the test assumes you have 2 buttons, submit and reset.

function check_form() {

var frm = document.forms[0];
var message="";

var x=0;
{
for(var i=0;i< (frm.elements.length-2);i++) {

if((frm.elements[i].value == "") || (frm.elements[i].value == null)) {

if(x==5){
message += "\n";
}
message += frm.elements[i].getAttribute('name') + ', ';
x++;
}
}
if(x!=0){

alert("The following required fields: "+message+" were left blank");

frm.elements[i-x].focus();
return false;
}
if(frm.elements[1].value!=frm.elements[2].value) {
alert('The Passwords Do Not Match');
return false;
}
else {
return true;
}
}
}
February 1st, 2006, 10:33 PM
HTRegz

Hey Hey,

Thanks but that still didn't work.. I'm starting to think I've got a problem elsewhere hah... this could take a while.. good thing work is done in 20 minutes and I'm not in tomorrow.

Peace,
HT
February 1st, 2006, 10:35 PM
JPnyc

You must, because I know that script works. Did you remove the passwordst thing? There has to be an error elsewhere in your page. Do the form fields have the name attribute set? Because this script keys off that.
February 1st, 2006, 10:39 PM
HTRegz

Yeah I've got the one that I posted working on other pages I use as well.... Everything is named... but I'm wondering if my naming is causing problems... Unfortunately, due to the nature of the page... the fields are all named (based on their data) and then have a number appended to them with php... I'm doing the same to the javascript and it looks right if I check the source on the page afterwards... but I'm wondering if it's my bastardized melding of php and javascript that's doing it.
February 1st, 2006, 10:40 PM
JPnyc

A link or the page code might help. But as you said you're leaving soon and you're off tomorrow.
February 3rd, 2006, 05:43 AM
skiddieleet

both of these worked for me:

Code:

<html> <head> <script language="JavaScript"> function validateProd() { if(document.getElementById('sname1').value == '') { alert('Your name is a required field. Please try again.'); return false; } if(document.getElementById('scode1').value == '') { alert('Your name is a required field. Please try again.'); return false; } if(document.getElementById('Docket1').value == '') { alert('Your name is a required field. Please try again.'); return false; } return true; } </script> </head> <body> <br /> <form method="POST" name="addImage" id="addImage" action="index2.php" onSubmit="return validateProd();"> <input type="text" name="sname1" id="sname1" size="10"> <input type="text" name="scode1" id="scode1" size="10"> <select name="Docket1" id="Docket1"><option value=""></option><option value="A">A</option></select> <input type="submit" value="submit"> </form> </body> </html>

Code:

<html> <head> <script language="JavaScript"> function validateProd() { if(document.addImage.sname1.value == '') { alert('Your name is a required field. Please try again.'); return false; } if(document.addImage.scode1.value == '') { alert('Your name is a required field. Please try again.'); return false; } if(document.addImage.Docket1.value == '') { alert('Your name is a required field. Please try again.'); return false; } return true; } </script> </head> <body> <br /> <form method="POST" name="addImage" id="addImage" action="index2.php" onSubmit="return validateProd();"> <input type="text" name="sname1" id="sname1" size="10"> <input type="text" name="scode1" id="scode1" size="10"> <select name="Docket1" id="Docket1"><option value=""></option><option value="A">A</option></select> <input type="submit" value="submit"> </form> </body> </html>

Does your browser have a javascript console? Perhaps it's throwing some errors that might be helpful. Hope this helps.
February 3rd, 2006, 04:06 PM
HTRegz

Hey Hey,

Still nothing that's working for me... I think i'm javascript inept...

I opened the JavaScript console.... I've got a few listed errors

Code:

Error: validateProd is not defined Source File: http://www.xxxx.ca/xxxx/admin/addImages.php Line: 1

Code:

Error: illegal character Source File: http://www.xxxx.ca/xxxx/admin/addImages.php Line: 30 Source Code: ` }

Unfortunately because it's a password protected site for a private client, I can't release a link to the page... here's something interesting though... When I go to view source, the javascript shows up.. but if I double click on the error message and it opens the source and highlights the line, if I look where the javascript should be... the area is blank..

Peace,
HT
February 3rd, 2006, 04:21 PM
JPnyc

Try a ridiculously simple JS, like alert('hello woild!'); just to be sure that ANY JS will execute in the environment. IF that doesn't work, we know it's not the coding of the JS.
February 3rd, 2006, 04:24 PM
HTRegz

Hey Hey,

Ok I made it past those

now i'm looking at

Code:

Error: document.addImage.sname1 has no properties Source File: http://www.xxxx.ca/xxxx/admin/addImages.php Line: 9

Don't mind me... I'm half using this just to follow my own thought process but suggestions are always welcome

Peace,
HT
February 3rd, 2006, 04:27 PM
HTRegz

Quote:

Originally posted here by JPNYC
Try a ridiculously simple JS, like alert('hello woild!'); just to be sure that ANY JS will execute in the environment. IF that doesn't work, we know it's not the coding of the JS.

There's other jS running on the same page and it's working....
February 3rd, 2006, 04:28 PM
HTRegz

Alrighty....one more thread

Here's the code as it currently stands in my file

Code:

<script language='JavaScript'> function validateProd() { <? if ( $_SESSION['imgCount'] ) { for ( $i = 1; $i <= $_SESSION['imgCount']; $i++ ) { ?> if (document.addImage.sname<?php echo $i; ?>.value == '') { alert('Your name is a required field. Please try again.'); return false; } else if (document.addImage.scode<?php echo $i; ?>.value == '') { alert('Your name is a required field. Please try again.'); return false; } else if (document.addImage.scolour<?php echo $i; ?>.value == '') { alert('Your name is a required field. Please try again.'); return false; } else if (document.addImage.Docket<?php echo $i; ?>.value == '') { alert('Your name is a required field. Please try again.'); return false; } else if (document.addImage.imRcvd<?php echo $i; ?>.value == '') { alert('Your name is a required field. Please try again.'); return false; } return true; <? } } ?> } </script>

Here's the code when rendered by the browser

Code:

<script language='JavaScript'> function validateProd() { if (document.addImage.sname1.value == '') { alert('Your name is a required field. Please try again.'); return false; } else if (document.addImage.scode1.value == '') { alert('Your name is a required field. Please try again.'); return false; } else if (document.addImage.scolour1.value == '') { alert('Your name is a required field. Please try again.'); return false; } else if (document.addImage.Docket1.value == '') { alert('Your name is a required field. Please try again.'); return false; } else if (document.addImage.imRcvd1.value == '') { alert('Your name is a required field. Please try again.'); return false; } return true; } </script>

Peace,
HT
February 3rd, 2006, 04:41 PM
JPnyc

Well I'm sure this isn't the problem, but might as well fix it anyway, the language attribute is deprecated. You now need to have the type attri.

<script type="text/javascript">
February 3rd, 2006, 04:58 PM
HTRegz

Quote:

Originally posted here by JPNYC
Well I'm sure this isn't the problem, but might as well fix it anyway, the language attribute is deprecated. You now need to have the type attri.

<script type="text/javascript">

Thanks.... I changed that.. still no fix... but hopefully I'll come across something... still getting the error that it has no properties... even if I change to getElementByID

Peace,
HT
February 3rd, 2006, 05:21 PM
skiddieleet

Can I see your actual form code? Maybe there's a problem there. When I was testing this I couldn't figure out why my js wouldn't work and I had something like

</form>
<input type="submit...
</form>

Perhaps you have something stupid like that in the form.
February 3rd, 2006, 05:27 PM
SirDice

Long shot.... Add id="blah" to your tags instead of name="blah" or set both.....
February 3rd, 2006, 05:40 PM
HTRegz

Hey Hey,

SirDice: No Dice :) Thanks Though

H3r3tic:

Attached Text File has form code... (was way to long on here)

I believe I've sanitized it... the only things missing should be client specific product names.

here's the javascript again as well with my latest playing/fixing aded

Code:

<script type="text/javascript"> function validateProd() { if (document.getElementById('sname1').value == '') { alert('Your name is a required field. Please try again.'); return false; } else if (document.getElementById('scode1').value == '') { alert('Your name is a required field. Please try again.'); return false; } else if (document.getElementById('scolour1').value == '') { alert('Your name is a required field. Please try again.'); return false; } else if (document.getElementById('Docket1').value == '') { alert('Your name is a required field. Please try again.'); return false; } else if (document.getElementById('imRcvd1').value == '') { alert('Your name is a required field. Please try again.'); return false; } return true; } </script>

Peace,
HT
February 3rd, 2006, 06:56 PM
JPnyc

Try:

var els=document.forms[0].elements;

then make your test

if (els[1].value=="")

then 2, 3, etc. You don't actually need to name or id anything to reference elements in a form. Javascript has native arrays/objects for these elements.
February 3rd, 2006, 07:24 PM
HTRegz

Quote:

Originally posted here by JPNYC
Try:

var els=document.forms[0].elements;

then make your test

if (els[1].value=="")

then 2, 3, etc. You don't actually need to name or id anything to reference elements in a form. Javascript has native arrays/objects for these elements.

hey Hey,

Thanks, but unfortunately that won't work for this... the form has a variable number of elements (always a multltiple but could be quite a few) (which is why I've had to put php inside the javascript... which works out right now (the php side anyways)... I may just have to rewrite this and do an independant check for each field... but I'm not sure if that'll be feasible either.

Peace,
HT
February 3rd, 2006, 07:30 PM
JPnyc

Well if it has a variable number of elements, the 1st script I gave you is the one that you should try to get to work. That 1 will work for 1 element or 100 or any number in between.
February 3rd, 2006, 07:40 PM
HTRegz

Quote:

Originally posted here by JPNYC
Well if it has a variable number of elements, the 1st script I gave you is the one that you should try to get to work. That 1 will work for 1 element or 100 or any number in between.

It would be perfect but unfortunately they don't want every field checked... There are 11 fields... This is repeated depending on how many files are uploaded

1 File = 11 fields
2 Files = 22 Fields
3 Files = 33 Fields
and so on...

Out of every section they want fields 1, 2, 3, 4 and 9 to be required... I'm sure I can find a way to take your validation script and loop through it.. I think now it's just a matter of starting from scratch.... For me this is a learning experience... this is more javascript than I've ever looked at before...

Peace,
HT
February 3rd, 2006, 07:46 PM
JPnyc

Ok, then just check the fields like this

if (document.forms[0].elements[0].value=="") //this is for your 1st element

if (document.forms[0].elements[1].value=="") //this is for your 2nd element

if (document.forms[0].elements[2].value=="") //this is for your 3rd element

if (document.forms[0].elements[3].value=="") //this is for your 4th element

if (document.forms[0].elements[8].value=="") //this is for your 9th element

Now this way of referencing has to work. If it does not, then it's the inclusion of PHP elements in the JS code that is bollixing things up.
February 3rd, 2006, 07:58 PM
HTRegz

Hey Hey,

so i took that code, decided to leave out everything else (the looping to deal with multiple uploads, etc)
and doctored it to look like this

Code:

<script type="text/javascript"> function validateProd() { if (document.forms[0].elements[0].value=="") {//this is for your 1st element alert('A Style Name is Required'); return false; } if (document.forms[0].elements[1].value=="") {//this is for your 2nd element alert('A Style Code is Required'); return false; } if (document.forms[0].elements[2].value=="") {//this is for your 3rd element alert('A Style Colour is Required'); return false; } if (document.forms[0].elements[3].value=="") {//this is for your 4th element alert('A Docket Number is Required'); return false; } if (document.forms[0].elements[8].value=="") {//this is for your 9th element alert('The Date Received is Required'); return false; } return true; } </script>

It works... however my 4th element... (Docket Number) is the only one I filled out and it's the only one it questions me about.... am I missing something?

Peace,
HT
February 3rd, 2006, 08:20 PM
HTRegz

Hey Hey,

so I messed up that code a little more..

Code:

<script type="text/javascript"> function validateProd() { if (document.forms[0].elements[0].value=="") {//this is for your 1st element alert('A Style Name is Required'); return false; } if (document.forms[0].elements[1].value=="") {//this is for your 2nd element alert('A Style Code is Required'); return false; } if (document.forms[0].elements[2].value=="") {//this is for your 3rd element alert('A Style Colour is Required'); return false; } if (document.forms[0].elements[3].options[document.forms[0].elements[3].selectedIndex].value=='0') {//this is for your 4th element alert('A Docket Number is Required'); return false; } if (document.forms[0].elements[8].value=="") {//this is for your 9th element alert('The Date Received is Required'); return false; } return true; } </script>

I changed the 4th element.... so that it would use the select box values... then I went on with the page... it submitted and went through... even though all 4 of the text boxes were wrong, only the docket number was correct..

This warning came up

Quote:

Error: document.forms[0].elements[3].options has no properties
Source File: http://www.XXX.ca/XXX/admin/addImages.php
Line: 48

Peace,
HT
February 3rd, 2006, 08:49 PM
JPnyc

Ok, but we're getting closer! Lemme ruminate on it a bit. Also some work has floated my way that Ihave to deal with.
February 3rd, 2006, 09:38 PM
HTRegz

Hey Hey,

Here's the final code

Code:

<script type="text/javascript"> function validateProd() { if (document.forms[0].elements[0].value=="") {//this is for your 1st element alert('A Style Name is Required'); return false; } if (document.forms[0].elements[1].value=="") {//this is for your 2nd element alert('A Style Code is Required'); return false; } if (document.forms[0].elements[2].value=="") {//this is for your 3rd element alert('A Style Colour is Required'); return false; } if (document.forms[0].elements[3].selectedIndex =='0') {//this is for your 4th element alert('A Docket Number is Required'); return false; } if (document.forms[0].elements[8].value=="") {//this is for your 9th element alert('The Date Received is Required'); return false; } return true; } </script>

No errors are generated, however nothing happens either... I've tried it as both onClick and onSubmit... there is now no php being used in it... it's just JavaScript..

Peace,
HT
February 3rd, 2006, 09:39 PM
JPnyc

Should be in the form tag onsubmit='return validateProd();'

Alsol you can't get the selectedIndex that way. Your 1st one was closer.
February 3rd, 2006, 09:43 PM
HTRegz

Quote:

Originally posted here by JPNYC
Should be in the form tag onsubmit='return validateProd();'

Alsol you can't get the selectedIndex that way. Your 1st one was closer.

That's where it's been the entire time, but for fun I put it in the submit buttons onClick tag... still didn't work

As for selectedIndex are ya sure? The last one told me that there were no properties for that object... this one doesn't give any errors to me... I took it off a website.... I'll see if I can find the link.

Peace,
HT
February 3rd, 2006, 09:57 PM
JPnyc

Yeah, it should be what you had last time. Been a while since I validated a select dropdown, but I'm pretty sure that's the correct syntax.
February 3rd, 2006, 09:58 PM
JPnyc

Ooops, I think you left out 1 reference to options:
document.forms[0].elements[3].options[document.forms[0].elements[3].options.selectedIndex].value=='0'
February 3rd, 2006, 10:04 PM
HTRegz

Quote:

Originally posted here by JPNYC
Ooops, I think you left out 1 reference to options:
document.forms[0].elements[3].options[document.forms[0].elements[3].options.selectedIndex].value=='0'

With that I get the no properties error again.
February 3rd, 2006, 10:27 PM
JPnyc

Ok, but leaving that aside, let's find out why the function doesn't work. COmment out the selectedIndex lines for now, let's get it to work one step at a time. In fact, you should really start with a single element validation and get that to work. When in doubt, simplify.
February 3rd, 2006, 10:29 PM
HTRegz

Hey Hey,

It's working.... I forgot to account for the hidden fields at the starm of the form... Now I just need to make it loop for each file uploaded but that should be simple enough

Thanks for your help everyone.

Peace,
HT
February 3rd, 2006, 10:34 PM
JPnyc

AHA! Okie doke. Time to go out and pillage.
February 3rd, 2006, 10:39 PM
JPnyc

That also explains why the error on the dropdown box with the proper syntax. Because it wasn't referencing the dropdown element. Anyway, glad it works.
February 3rd, 2006, 10:47 PM
HTRegz

Thanks for all your help.... it was greatly appreciated.
February 3rd, 2006, 10:57 PM
JPnyc

My pleasure. I don't get to do quite as much coding on the job as I'd like, so this is how I get my fill :)

All times are GMT +1. The time now is 04:28 PM.