...
PDA

Why does the form reload/clear after validation error?

TotallyClueless
04-23-2004, 05:13 PM
I am trying to create a form to allow people to submit support requests using a web form (before you ask I have access to CGI so am left with no alternative but to do it this way). Anyway, issue is that when the form is validated, when you acknowledge the alert, the for reloads/clears. How do I stop this from occuring?

Thanks for any ideas .....

<html>
<head>
<form name="servicerequest">
<script language="JavaScript">
function sendtheMail() {
var frm = document.forms["servicerequest"];
if (document.forms[0].Urgency.value == "") {
alert("No urgency has been specified!");
return false;
}
if (document.forms[0].Product.value == "") {
alert("No product has been specified!");
return false;
}
if (document.forms[0].Country.value == "") {
alert("No member firm/country has been specified!");
return false;
}
if (document.forms[0].Office.value == "") {
alert("No office has been specified!");
return false;
}
if (document.forms[0].PrimaryContact.value == "") {
alert("No primary contact has been specified!");
return false;
}
if (document.forms[0].PCPhone.value == "") {
alert("The primary contact's office phone number has not been entered!");
return false;
}
if (document.forms[0].PCMobile.value == "") {
alert("The primary contact's mobile/cell phone number has not been entered!");
return false;
}
if (document.forms[0].message.value == "") {
alert("No details have been entered!");
return false;
}
document.forms[0].action = "mailto:totallyclueless@abc.com" +
"?subject=" +
document.forms[0].Urgency.value;
alert("You may now see a message informing you that this program will submit the form via e-mail, then another message confirming that you wish to continue. Please select OK, then Yes when prompted to allow the submission to proceed.");
return true;
}
</script>
</head>
<body bgcolor="navy" text="white">
<form method="post" enctype="text/plain">
<p><b><font size="5">Service Request Form</font></b></p>
<table border="0">
<tr>
<td align="right">
<div align="left">
<b>Urgency:</b></div>
</td>
<td><select name="Urgency" size="1" tabindex="1">
<option value="High">High</option>
<option value="Medium">Medium</option>
<option selected value="Normal">Normal</option>
</select></td>
<td><b>Product</b>:*</td>
<td><select name="Product" size="1" tabindex="2">
<option value="Active Directory">Active Directory</option>
<option value="Exchange">Exchange</option>
<option value="Virus">Virus</option>
</select></td>
</tr>
<tr>
<td align="right">
<div align="left">
<b>Country:*</b></div>
</td>
<td><select name="Country" size="1" tabindex="3">
<option value="Albania">Albania</option>
<option value="Angola">Angola</option>
</select></td>
<td><b>Office:*</b></td>
<td><input type="text" name="Office" size="27" tabindex="4" border="0"></td>
</tr>
<tr>
<td align="right">
<div align="left">
<b>Primary Contact:*</b></div>
</td>
<td><input type="text" name="PrimaryContact" size="34" tabindex="5" border="0"></td>
<td><b>Phone:*</b></td>
<td><input type="text" name="PCPhone" size="27" tabindex="6" border="0"></td>
</tr>
<tr>
<td align="right"></td>
<td></td>
<td><b>Mobile/Cell:*</b></td>
<td><input type="text" name="PCMobile" size="27" tabindex="7" border="0"></td>
</tr>
<tr>
<td align="right"></td>
</tr>
<tr>
<td align="right">
<div align="left">
<b>Secondary Contact: </b></div>
</td>
<td><input type="text" name="SecondaryContact" size="34" tabindex="8" border="0"></td>
<td><b>Phone:</b></td>
<td><input type="text" name="SCPhone" size="27" tabindex="9" border="0"></td>
</tr>
<tr>
<td align="right"></td>
<td></td>
<td><b>Mobile/Cell</b></td>
<td><input type="text" name="SCMobile" size="27" tabindex="10" border="0"></td>
</tr>
<tr valign="top">
<td align="right">
<p align="left"><b>Details:*</b></p>
<div align="left">
<p>Please provide as much detail as possible including steps taken to isolate or resolve.</p>
</div>
</td>
<td colspan="3"><textarea name="message" rows="11" cols="77" tabindex="11"></textarea></td>
</tr>
<tr valign="top">
<td align="right">
<div align="left">
<b>Notes:</b></div>
</td>
<td colspan="3">
<ul>
<li>All fields marked with * are mandatory
</ul>
</td>
</tr>
</table>
<hr>
<input onclick="sendtheMail()" type="submit" value="Submit" tabindex="12"> <input type="reset" value="Clear">
</form>
</form>
</body>

</html>
sad69
04-23-2004, 05:54 PM
Welcome here! First off, wrap your Javascript code in code tags [ code ] ... [ /code ] (no spaces).

Couple of things that I saw:

1. You have two forms. From what I can see, <form name="servicerequest"> is useless. On top of that, this form is being declared in the head... weird.

2. Instead of calling sendMail() in the onClick event on the submit button, try moving it to the onSubmit event of your form (the one you shouldn't delete).

See how that works for you.

Sadiq.
Choopernickel
04-23-2004, 06:09 PM
The form is doing exactly what you instructed. You've specified no action attribute for your form. Sadiq is right, the first form tag (above your javascript - ??) is extraneous and needs to go. Also, I'd recommend moving the validation function call to the <form onsubmit=""> handler - it'll submit without validation if I hit the enter key.

Specify an action attribute for your form, and you should be good to go.
sad69
04-23-2004, 06:19 PM
Well in the validation code TotallyClueless does specify the action there.. but yea, if you move the validation call to the onsubmit event, it should work.

I'm not sure why it's resetting the form when there's an error but hopefully making those changes might help.

Good luck,
Sadiq.
Roy Sinclair
04-23-2004, 06:34 PM
The reason the form resets is because of this line here:

<input onclick="return sendtheMail()" type="submit" value="Submit" tabindex="12">

I've included the missing element which will fix the problem. The form isn't truly resetting, the form is actually submitting back to the page which is then simply reloaded.
sad69
04-23-2004, 06:49 PM
The form isn't truly resetting, the form is actually submitting back to the page which is then simply reloaded.

Hey now that makes good sense! :D

Sadiq.
TotallyClueless
04-23-2004, 07:03 PM
Fantastic - works a treat! Thanks very much!
Roy Sinclair
04-23-2004, 07:18 PM
Don't fail to follow Sadiq's suggestion of moving the check to the onsubmit event of the <form> tag or removing the extraneous form tag from the head of your page.
TotallyClueless
04-23-2004, 08:07 PM
Yep - got it. Thanks again to all.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum