INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Directing user to a URL

Directing user to a URL

(OP)
Hello

I have some JS that checks form field validation on a Web page, and it does so effectively, and here is the part that deals with the Submit button:

CODE --> JS

$("#contact_submit button").click(function(event){
var form_data=$("#contact").serializeArray();
var error_free=true;
for (var input in form_data){
var element=$("#contact_"+form_data[input]['name']);
var valid=element.hasClass("valid");
var error_element=$("span", element.parent());
if (!valid){error_element.removeClass("error").addClass("error_show"); error_free=false;}
else{error_element.removeClass("error_show").addClass("error");}
}

if (!error_free){
event.preventDefault(); 
}
else{
alert('No errors: Form will be submitted');
} 

At the end, instead of displaying that Alert box, is it possible to automatically direct the user to a 'Thank you' page?

The code that actually processes the email is in Classic ASP.

Thanks!

RE: Directing user to a URL

You can use window.location for that but I don't get the idea: you want to load a differente page if the data is not valid? What if the user just made a mistake? No second opportunities?

Cheers,
Dian

RE: Directing user to a URL

(OP)
No, the whole script looks like this:

CODE --> JS

<script>
		$(document).ready(function() {
			<!-- Real-time Validation -->
				<!--Name can't be blank-->
				$('#contact_name').on('input', function() {
					var input=$(this);
					var is_name=input.val();
					if(is_name){input.removeClass("invalid").addClass("valid");}
					else{input.removeClass("valid").addClass("invalid");}
				});
				
				<!--Email must be an email -->
				$('#contact_email').on('input', function() {
					var input=$(this);
					var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
					var is_email=re.test(input.val());
					if(is_email){input.removeClass("invalid").addClass("valid");}
					else{input.removeClass("valid").addClass("invalid");}
				});
				
				<!--Website must be a website -->
				$('#contact_website').on('input', function() {
					var input=$(this);
					if (input.val().substring(0,4)=='www.'){input.val('http://www.'+input.val().substring(4));}
					var re = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/;
					var is_url=re.test(input.val());
					if(is_url){input.removeClass("invalid").addClass("valid");}
					else{input.removeClass("valid").addClass("invalid");}
				});
				
				<!--Message can't be blank -->
				$('#contact_message').keyup(function(event) {
					var input=$(this);
					var message=$(this).val();
					console.log(message);
					if(message){input.removeClass("invalid").addClass("valid");}
					else{input.removeClass("valid").addClass("invalid");}	
				});
		
			<!-- After Form Submitted Validation-->
			$("#contact_submit button").click(function(event){
				var form_data=$("#contact").serializeArray();
				var error_free=true;
				for (var input in form_data){
					var element=$("#contact_"+form_data[input]['name']);
					var valid=element.hasClass("valid");
					var error_element=$("span", element.parent());
					if (!valid){error_element.removeClass("error").addClass("error_show"); error_free=false;}
					else{error_element.removeClass("error_show").addClass("error");}
				}
				if (!error_free){
					event.preventDefault(); 
				}
				else{
					alert('No errors: Form will be submitted');
				}
			});
			
			
			
		});
	</script> 

It validates the fields and shows in red any errors that need to be corrected before the form can be submitted.

I just meant that if there are no errors instead of the alert box, how would the user then be redirected to a 'thankyou.asp' page.

Thanks for your reply!

RE: Directing user to a URL

add

CODE --> vbscript

<%
response.redirect "[thank_you_url]"
%> 

To the code that actually sends the message.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Directing user to a URL

I still don't get it: if it has no errors, then the form will be submitted and the handler can just return the message you want in the generated HTML.

Cheers,
Dian

RE: Directing user to a URL

(OP)
Hello Diancecht

Quote:

if it has no errors, then the form will be submitted

But I don't want it submitted while that Alert Box is there. I want it submitted without the Alert Box AND for the redirected page to be the 'thankyou.asp' redirected page.

Thanks.

RE: Directing user to a URL

Remove the code for the "Alert" and submit the form there instead and let the server then handle the redirect.

Servers are MUCH better at redirecting than javascript is.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Directing user to a URL

When the form is submitted it is technically redirected to a new page which contains your ASP code. Your ASP code can then produce the thank you page directly and serve it to the browser after its done processing the form data. There's nothing more you need to to do in JS.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

RE: Directing user to a URL

(OP)
Great. Thank you to you both for your explanation. I wasn't sure to what extent JS could undertake the server-side code role. Basically, then, JS does all the donkey-work validation and passes it over to asp.

Thanks!

RE: Directing user to a URL

Quote:

JS does all the donkey-work validation and passes it over to asp.
It's considered good practice to validate both client and server side. Never assume your incoming request has passed validation just because the request is received, it might not be your page or a person with a browser running JS sending the ASP the request!

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

RE: Directing user to a URL

(OP)
Oh, I see what you mean!

Yes, best to do both.

Thanks!

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close