PDA

View Full Version : form - alert box not popping up


tom-mt
08-09-2002, 10:16 PM
Hi there,

I have a form in which the "name", "country" and "comments" fields must not be empty when submitting. If any of them is empty, then an alert popup box should appear, asking the user to fill them up, but the alert box is not functioning; instead, itīs redirecting the user to a 500error page. This is a news post script that Iīve downloaded and customized the look of it myself, and the original page works well (popping up the alert box) but the one that Iīve customized donīt work. The javascript code in the HEAD tag is exactly the same as the original file, as I did a copy&paste, and to be sure, I verified it line by line, so I guess the error is in the FORM tag itself. Well, the relevant code is this(the complete page can be seen at url (http://www.motiontheque.com/news/news_comments.asp?NewsID=35) ):

<form method="post" name="frmNewsComments" action="add_comments.asp?NewsID=35" onsubmit="return CheckForm();">

<div class="row">
<span class="label">Nome:</span><span class="formw"><input type="text" name="name" size="30" maxlength="30" /></span>
</div>
<div class="row">
<span class="label">País:</span><span class="formw">

<select name="country">
<option value="" selected="selected">Pull down to select</option>
<option value="Brasil">Brasil</option>
<option value="Other">Other</option>
</select>

</span>
</div>

<div class="row">
<span class="label">E-mail:</span><span class="formw"><input type="text" name="email" size="30" maxlength="50" /></span>
</div>

<div class="row">
<span class="label">Comments*:</span>
<span class="formw">
<textarea name="comments" cols="40" rows="6"></textarea>
</span>
</div>
<div class="row">
<span class="formw">
<input type="submit" name="submitbtn" value="Add Comments" />
<input type="reset" name="Reset" value="Clear Form" />
</span>
</div>

<div class="row">
<span class="label">Click on Icon to add to your message</span>
<span class="formw">
<a href="javascript:AddSmileyIcon(':)')"><img src="news_images/smiley1.gif" alt="smiley1" /></a>
<a href="javascript:AddSmileyIcon(';)')"><img src="news_images/smiley2.gif" alt="smiley2" /></a>
<a href="javascript:AddSmileyIcon(':o')"><img src="news_images/smiley3.gif" alt="smiley3" /></a>
<a href="javascript:AddSmileyIcon(':D')"><img src="news_images/smiley4.gif" alt="smiley4" /></a>
<a href="javascript:AddSmileyIcon(':errr:')"><img src="news_images/smiley5.gif" alt="smiley5" /></a>
<a href="javascript:AddSmileyIcon(':(')"><img src="news_images/smiley6.gif" alt="smiley6" /></a>
<a href="javascript:AddSmileyIcon('X(')"><img src="news_images/smiley7.gif" alt="smiley7" /></a>
</span>
</div>

</form>

Mr J
08-09-2002, 10:41 PM
You need the script from the url you posted in order to validate the form

tom-mt
08-09-2002, 10:50 PM
?

the script is already there

Mr J
08-10-2002, 01:48 PM
Try this


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">
<!-- Hide from older browsers...

//Function to check form is filled in correctly before submitting
function CheckForm () {
//Intialise variables
var errorMsg = "";
var errorMsgLong = "";

//Check for a name
if (document.frmNewsComments.name.value == ""){
errorMsg += "\n\tName \t\t- Enter your Name";
}

//Check for a country
if (document.frmNewsComments.country.value == ""){
errorMsg += "\n\tCountry \t\t- Select the country you are in";
}

//Check for comments
if (document.frmNewsComments.comments.value == ""){
errorMsg += "\n\tComments \t- Enter a comment to add to the Guestbook";
}

//Check for HTML tags before submitting the form
if ((document.frmNewsComments.comments.value.indexOf("<", 0) >= 0) && (document.frmNewsComments.comments.value.indexOf(">", 0) >= 0)){
errorMsgLong += "\n- HTML tags are not permitted, remove all HTML tags.";
}


//If there is aproblem with the form then display an error
if ((errorMsg != "") || (errorMsgLong != "")){
msg = "___________________________________________________________________\n\n";
msg += "Your Comments have not been added because there are problem(s) with the form.\n";
msg += "Please correct the problem(s) and re-submit the form.\n";
msg += "___________________________________________________________________\n\n";
msg += "The following field(s) need to be corrected: -\n";

errorMsg += alert(msg + errorMsg + "\n" + errorMsgLong);
return false;
}

return true;
}

// Function to add the code for bold italic and underline, to the message
function AddMessageCode(code,promptText, InsertText) {

if (code != "") {
insertCode = prompt(promptText + "\n[" + code + "]xxx[/" + code + "]", InsertText);
if ((insertCode != null) && (insertCode != "")){
document.frmNewsComments.comments.value += "[" + code + "]" + insertCode + "[/"+ code + "] ";
}
}
document.frmNewsComments.comments.focus();
}


//Function to add the code to the message for the smileys
function AddSmileyIcon(iconCode) {
document.frmNewsComments.comments.value += iconCode + " ";
document.frmNewsComments.comments.focus();
}
// -->
</script>
</HEAD>
<BODY>
<form method="post" name="frmNewsComments" action="add_comments.asp?NewsID=35" onsubmit="return CheckForm();">

<div class="row">
<span class="label">Nome:</span><span class="formw">
<input type="text" name="name" size="30" maxlength="30" />
</span>
</div>

<div class="row">
<span class="label">País:</span><span class="formw">
<select name="country">
<option value="" selected="selected">Pull down to select</option>
<option value="Brasil">Brasil</option>
<option value="Other">Other</option>
</select>
</span>
</div>

<div class="row">
<span class="label">E-mail:</span><span class="formw"><input type="text" name="email" size="30" maxlength="50" /></span>
</div>

<div class="row">
<span class="label">Comments*:</span>
<span class="formw">
<textarea name="comments" cols="40" rows="6"></textarea>
</span>
</div>
<div class="row">
<span class="formw">
<input type="submit" name="submitbtn" value="Add Comments" />
<input type="reset" name="Reset" value="Clear Form" />
</span>
</div>

<div class="row">
<span class="label">Click on Icon to add to your message</span>
<span class="formw">
<a href="java script:AddSmileyIcon('')"><img src="news_images/smiley1.gif" alt="smiley1" /></a>
<a href="java script:AddSmileyIcon('')"><img src="news_images/smiley2.gif" alt="smiley2" /></a>
<a href="java script:AddSmileyIcon('')"><img src="news_images/smiley3.gif" alt="smiley3" /></a>
<a href="java script:AddSmileyIcon('')"><img src="news_images/smiley4.gif" alt="smiley4" /></a>
<a href="java script:AddSmileyIcon(':errr:')"><img src="news_images/smiley5.gif" alt="smiley5" /></a>
<a href="java script:AddSmileyIcon('')"><img src="news_images/smiley6.gif" alt="smiley6" /></a>
<a href="java script:AddSmileyIcon('X(')"><img src="news_images/smiley7.gif" alt="smiley7" /></a>
</span>
</div>

</form>
</BODY>
</HTML>

tom-mt
08-10-2002, 03:02 PM
Wow thank you so much Mr J, itīs working now. I donīt know exactly what happened (my js sucks), just the part to check for html tags was different, I wonder why if I change the things under the FORM tag to comply with W3C standards makes the previous script stop working (it works if I use tables instead of divs). Anyways, besides the fact that I donīt know why itīs working now, everything is fine.

Thanks a lot!