/    Sign up×
Community /Pin to ProfileBookmark

Strange problem in JavaScript code.. sometimes working and somtimes not!

I’ve wrote a simple JavaScript function in the <head> tag of the page to validate a form in that page, and it worked well. Then I wrote another function in the same <head> to validate another form, the second function worked but the first stopped working! I deleted the second function but the first stopped working permanently and I don’t know why. The code is listed below

The first function

[CODE]function validate_addproduct_form()
{
c = /^d{1,}$/;
p = /^d{1,}.{0,1}d{0,2}/;
string = ”;
if (!c.test(addproduct.code.value))
{
string += ‘n* The code you entered is not a valid code.’;
}

if (!p.test(addproduct.price.value))
{
string += ‘n* The price you entered is not a valid price.’;
}

if (string != ”)
{
alert (‘The following error(s) occured:n’+string+’nnPlease correct the errors and try again.’);
event.returnValue = false;
}

else if (addproduct.description.value == ”)
{
action = confirm(“You haven’t inserted description. Do you want to continue?”);
if (action == false)
{
event.returnValue = false;
}

}
}[/CODE]

Which validates this form

[CODE]<form name=”addproduct” enctype=”multipart/form-data” method=”post” action=”index.php” onsubmit=”validate_addproduct_form();”>
<table align=”center” width=”80%” border=”0″ cellpadding=”5″ cellspacing=”0″ style=”border-collapse: collapse” id=”AutoNumber1″>
<tr>
<td align=”right”><label for=”code”>Code:</label></td>
<td><input type=”text” name=”code” value=”” size=”3″ maxlength=”3″ id=”code” /></td>
</tr>
<tr>
<td align=”right”><label for=”price”>Price:</label></td>
<td><input type=”text” name=”price” value=”” size=”6″ maxlength=”6″ id=”price” /> LE</td>
</tr>
<tr>
<td align=”right”>Dimensions (in mm):</td>
<td>
<label for=”l”>Length</label>
<input type=”text” name=”l” value=”” size=”6″ maxlength=”5″ id=”l” />
<label for=”w”> Width</label>
<input type=”text” name=”w” value=”” size=”6″ maxlength=”5″ id=”w” />
<label for=”h”> Hight</label>
<input type=”text” name=”h” value=”” size=”6″ maxlength=”5″ id=”h” />
</td>
</tr>
<tr>
<td align=”right” valign=”middle”>Description:</td>
<td><TEXTAREA name=”description” rows=”10″ cols=”50″ id=”description” /></TEXTAREA></td>
</tr>
<tr><input type=”hidden” name=”MAX_FILE_SIZE” value=”5000000″ />
<td align=”right”><label for=”file”>Upload image:</label></td>
<td><input type=”file” name=”userfile” accept=”image/gif” id=”file” /></td>
</tr>
<tr>
<td align=”left”><input type=”hidden” name=”do” value=”product”>
<input type=”hidden” name=”action” value=”add”></td>
<td align=”center”><BR>
<input type=”submit” value=”Add Product” name=”submit”></td>
</tr>
</table>
</form>[/CODE]

The second function

[CODE]function validate_login_form()
{
if (login.user_name.value == ” || login.password.value == ”)
{
alert(‘Please insert the missing fields’);
event.returnValue = false;
}
}[/CODE]

Which validaes this form

[CODE]<form name=”login” method=”post” action=”index.php” onsubmit=”validate_login_form();”>
<table border=”0″ cellpadding=”10″ cellspacing=”0″ style=”border-collapse: collapse” id=”AutoNumber1″>
<tr>
<td align=”right”><label for=”user_name”>user name:</label></td>
<td><input type=”text” name=”user_name” size=”20″ maxlength=”30″ id=”user_name” /></td>
</tr>
<tr>
<td align=”right”><label for=”password”>password:</label></td>
<td><input type=”password” name=”password” size=”20″ maxlength=”20″ id=”password” /></td>
</tr>
<tr>
<td align=”left”><input type=”hidden” name=”do” value=”login”></td>
<td align=”center”>
<input type=”submit” value=”login” name=”submit”></td>
</tr>
</table>
</form>[/CODE]

to post a comment
JavaScript

7 Comments(s)

Copy linkTweet thisAlerts:
@thoughtcubeJul 10.2006 — Open a javascript console as you view the page, and try the functions. Do you get any errors?
Copy linkTweet thisAlerts:
@ashraf_gawdatauthorJul 10.2006 — Sorry but I don't know what a javascript console is. Could you explain it please?
Copy linkTweet thisAlerts:
@LogicianJul 10.2006 — Any error messages in the console?

I suggest you check out these sections of the website below, although the entire page should be read.

[URL=http://www.javascripttoolbox.com/bestpractices/#var]http://www.javascripttoolbox.com/bestpractices/#var[/URL]

[URL=http://www.javascripttoolbox.com/bestpractices/#forms]http://www.javascripttoolbox.com/bestpractices/#forms[/URL]
Copy linkTweet thisAlerts:
@thoughtcubeJul 10.2006 — When running Firefox (I don't know about IE, sorry), do (from the menu) tools->Javascript Console

Then interact with your page. You can switch back&forth with the open javascript console window, which will show you javascript errors. In all likelihood, you have some error (syntax, possibly) which is making the script do nothing.
Copy linkTweet thisAlerts:
@phpnoviceJul 10.2006 — When running Firefox (I don't know about IE, sorry), do (from the menu) tools->Javascript Console[/QUOTE]
For IE, if a little yellow triangle (with a black exclamation mark in it) is showing at the left side of the status bar, then you double-click that to open the IE-equivalent of a JavaScript Console for error messages.
Copy linkTweet thisAlerts:
@ashraf_gawdatauthorJul 10.2006 — Thanks for every one replied and tried to help, and special thanks for Logician because that page helped so much. It worked when I did as mentioned in it and used square bracket notation like this:

document.forms["formname"].elements["inputname"]

instead of this:

document.formname.inputname

Thanks again.
Copy linkTweet thisAlerts:
@phpnoviceJul 10.2006 — It worked when I did as mentioned in it and used square bracket notation like this:

document.forms["formname"].elements["inputname"]

instead of this:

document.formname.inputname[/QUOTE]

I'm glad you got it working. However, in the case you just posted, there is absolutely no difference in the end results. I looked at your code, though, and the problem was that you didn't have the [b]document[/b] root object qualification. For example:

if (!c.test(addproduct.code.value))

This is fine in Firefox -- which uses a default [b]document[/b] object scope. However, IE uses a default [b]window[/b] object scope. Thus, for cross-browser compatibility, that would need to be this:

if (!c.test([COLOR=Blue]document.[/COLOR]addproduct.code.value))
×

Success!

Help @ashraf_gawdat spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.3,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...