How to cancel form submission [Archive]

Misterman

11-04-2014, 02:16 PM

DISCLOSURE TIME:
1. I am new in this forum, though I have read the rules and FAQ, I may make mistakes, please forgive me
2. I know next to nothing about JavaScript, so please be gentle with me. In fact, I am a complete novice, though I have solid knowledge of VBScript.
THE PROBLEM
I wrote a VBScript client-side script to make sure some data are entered and if not to stop form submission. It works great in VBScript, but of course it will be ignored by Firefox and others because they don't speak VBS. I am forced to migrate the code to JavaScript. This is where I am having problems. In VBS, to respond to an event, such as form submission, the name of the event handler (function) is FormName_Event e.g.frmDefault_onSubmit. The first question is: doesn't JVS have an equivalent?
In my research on JVS, here is what I learnt:

I changed the HTML a little bit to <form method="POST" action="welcome.asp" name="frmDefault" onsubmit="return frmDefault_onSubmit()"> and then have a function called. Here is the function: function frmDefault_onSubmit(). However, I couldn't get it to work. What am I doing wrong? Here is the JVS code:

<script Language="JavaScript">

</script>

The code is completely ignored, as if it were not there:
I even had the following line sof code (which of course would be removed later:

alert("Hello");
this should generate an error if this is called

No message was displayed neither did I get any error message. It is supposed to check that First name, Last name, GSM Number and Email were entered. Help is very much appreciated. Thanks

jscheuer1

11-04-2014, 06:10 PM

In javascript you can name the function almost anything you want (there are some keywords/reserved words that cannot and/or should not be used). But that doesn't look to be your problem, rather that you're using other stuff that's not there in javascript. There's no javascript .Trim() function for example. For best results, the form should be accessed via the page's forms collection or by id, its elements via its elements collection, rather than directly via name. Upper and lower case matter more than in VB.

This works:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
function frmDefault_onSubmit() {
var UserInput, form = document.forms.frmDefault, els = form.elements, rx1 = /^\s*/, rx2 = /\s*$/;
function trim(s){
s = s.replace(rx1, "");
s = s.replace(rx2, "");
return s;
}
alert("Hello");

UserInput = els.Firstname.value;
if (trim(UserInput) == "") {
alert(" Enter the Firstname ");
return false;
}
UserInput = els.Lastname.value;
if (trim(UserInput) == "") {
alert(" Enter the Lastname ");
return false;
}

UserInput = els.GSMNumber.value;
if (trim(UserInput) == "") {
alert(" Enter the GSM Number ");
return false;
}

UserInput = els.Email.value;
if (trim(UserInput) == "") {
alert(" Enter the Email ");
return false;
}
els.Source.value = "something"; // <% =Request.QueryString("Source") %> // can't use these without asp
els.Website.value = "something else"; // <% =Request.QueryString("Website") %> // can't use these without asp
return true;
}
</script>
</head>
<body>
<form method="POST" action="welcome.asp" name="frmDefault" onsubmit="return frmDefault_onSubmit()">
First: <input type="text" name="Firstname"> Last: <input type="text" name="Lastname"><br>
GSM Number: <input type="text" name="GSMNumber"><br>
Email: <input type="text" name="Email">
<input type="hidden" name="Source"><input type="hidden" name="Website">
<br><input type="submit" value="Go">
</form>
</body>
</html>

And here's a more robust version which will not only trim the value to test it, but also trim the value in the form before submitting. And it will also (when the form isn't being submitted) set the focus of the form upon the input that needs attention:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
function frmDefault_onSubmit() {
var UserInput, form = document.forms.frmDefault, els = form.elements, rx1 = /^\s*/, rx2 = /\s*$/;
function trim(s){
s = s.replace(rx1, "");
s = s.replace(rx2, "");
return s;
}

UserInput = els.Firstname.value;
if ((els.Firstname.value = trim(UserInput)) == "") {
alert(" Enter the Firstname ");
els.Firstname.focus();
return false;
}
UserInput = els.Lastname.value;
if ((els.Lastname.value = trim(UserInput)) == "") {
alert(" Enter the Lastname ");
els.Lastname.focus();
return false;
}

UserInput = els.GSMNumber.value;
if ((els.GSMNumber.value = trim(UserInput)) == "") {
alert(" Enter the GSM Number ");
els.GSMNumber.focus();
return false;
}

UserInput = els.Email.value;
if ((els.Email.value = trim(UserInput)) == "") {
alert(" Enter the Email ");
els.Email.focus();
return false;
}
els.Source.value = "something"; // <% =Request.QueryString("Source") %> // can't use these without asp
els.Website.value = "something else"; // <% =Request.QueryString("Website") %> // can't use these without asp
return true;
}
</script>
</head>
<body>
<form method="POST" action="welcome.asp" name="frmDefault" onsubmit="return frmDefault_onSubmit()">
First: <input type="text" name="Firstname"> Last: <input type="text" name="Lastname"><br>
GSM Number: <input type="text" name="GSMNumber"><br>
Email: <input type="text" name="Email">
<input type="hidden" name="Source"><input type="hidden" name="Website">
<br><input type="submit" value="Go">
</form>
</body>
</html>

Here's an even more modular and efficient version (otherwise the same as the second one):

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
function frmDefault_onSubmit(){
var form = document.forms.frmDefault, els = form.elements, rx = /(^\s*)|(\s*$)/g;
function trim(s){return s.replace(rx, "");}
function valtrimmed(el){el.focus(); return (el.value = trim(el.value)) !== '';}

if(!valtrimmed(els.Firstname)){alert("Enter the First Name"); return false;}
if(!valtrimmed(els.Lastname)){alert("Enter the Last Name"); return false;}
if(!valtrimmed(els.GSMNumber)){alert("Enter the GSM Number"); return false;}
if(!valtrimmed(els.Email)){alert("Enter the Email"); return false;}
els.Source.value = "something"; // <% =Request.QueryString("Source") %> // can't use these without asp
els.Website.value = "something else"; // <% =Request.QueryString("Website") %> // can't use these without asp
return true;
}
</script>
</head>
<body>
<form method="POST" action="welcome.asp" name="frmDefault" onsubmit="return frmDefault_onSubmit()">
First: <input type="text" name="Firstname"> Last: <input type="text" name="Lastname"><br>
GSM Number: <input type="text" name="GSMNumber"><br>
Email: <input type="text" name="Email">
<input type="hidden" name="Source"><input type="hidden" name="Website">
<br><input type="submit" value="Go">
</form>
</body>
</html>