• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 789
  • Last Modified:

jQuery simple form submit example needed

Hello All;
I am going to be using ASP Classic.

I need a simple Form Submit using jQuery.
Can someone please provide me a simple example.

It needs to have a <textarea> in the form.

Nothing flashy, just a simple demostration that "works".

Carrzkiss
0
Wayne Barron
Asked:
Wayne Barron
  • 6
1 Solution
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
thanks for the links.
I have been trying out some examples, and what I need to know is this.

The ajax function that i have been using for the last year will not work with ie8 for one that that I am having to do.
jQuery will work, BUT. I cannot get the example that I have to work, as I do not fully understand it enough.

In the link
http://api.jquery.com/jQuery.post/


it shows several ways to do it, but not a fully example.

could you possibly show me and example of sending data to the next page?


basically.

Page1.asp (holds a text field)
Page2.asp (holds whatever needs to send the data back...  response.write mytext  )

Thanks
Carrzkissa
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
OK.

I found this code, with was designed for PHP
http://www.queness.com/post/160/create-a-ajax-based-form-submission-with-jquery
and I have cut out all the stuff that I do not need, as I only need a <textarea> and a submit button.

in the [show.asp]
The only thing that I have in it right now is just

<%
response.write request.form("MyText")
%>

I am starting off with just the basics, to test and get this thing to work.
BUT, When I add text into the textarea, I get the warning message that is in the code.

Can someone please help me in making this send the data from the textarea to the show.asp...


Carrzkiss
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS / Ajax Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript" language="javascript">
$(document).ready(function() {
//jquery-1.4.2.js	
	//if submit button is clicked
	$('#Submit').click(function () {		
		
		//Get the data from all the fields
		var MyText = $('textarea[name=MyText]');

		//Simple validation to make sure user entered something
		//If error found, add hightlight class to the text field
		if (MyText.val()=='') {
			MyText.addClass('hightlight');
			return false;
		} else MyText.removeClass('hightlight');
		
		
		//organize the data properly
		var data = 'MyText='  + encodeURIComponent(MyText.val());
		
		//show the loading sign
		$('.loading').show();
		
		//start the ajax
		$.ajax({
			//this is the php file that processes the data and send mail
			url: "show.asp",	
			
			//GET method is used
			type: "GET",

			//pass the data			
			data: data,		
			
			//Do not cache the page
			cache: false,
			
			//success
			success: function (html) {				
				//if process.php returned 1/true (send mail success)
				if (html==1) {					
					//hide the form
					$('.form').fadeOut('slow');					
					
					//show the success message
					$('.done').fadeIn('slow');
					
				//if process.php returned 0/false (send mail failed)
				} else alert('Sorry, unexpected error. Please try again later.');				
			}		
		});
		
		//cancel the submit button default behaviours
		return false;
	});	
});	
</script>
<style>
body{text-align:center;}
.clear {
	clear:both
}
.block {
	width:400px;
	margin:0 auto;
	text-align:left;
}
.element * {
	padding:5px; 
	margin:2px; 
	font-family:arial;
	font-size:12px;
}
.element label {
	float:left; 
	width:75px;
	font-weight:700
}
.element input.text {
	float:left; 
	width:270px;
	padding-left:20px;
}
.element .textarea {
	height:120px; 
	width:270px;
	padding-left:20px;
}
.element .hightlight {
	border:2px solid #9F1319;
	background:url(iconCaution.gif) no-repeat 2px
}
.element #submit {
	float:right;
	margin-right:10px;
}
.loading {
	float:right; 
	background:url(ajax-loader.gif) no-repeat 1px; 
	height:28px; 
	width:28px; 
	display:none;
}
.done {
	background:url(iconIdea.gif) no-repeat 2px; 
	padding-left:20px;
	font-family:arial;
	font-size:12px; 
	width:70%; 
	margin:20px auto; 
	display:none
}
</style>
</head>

<body>
<div class="block">
<div class="done">
<b>Thank you !</b> We have received your message. 
</div>
	<div class="form">
	<form method="post" action="show.asp">
	<div class="element">
		<label>Comment</label>
		<textarea name="MyText" class="text textarea" /></textarea>
	</div>
	<div class="element">
		
		<input type="submit" id="Submit"/>
		<div class="loading"></div>
	</div>
	</form>
	</div>
</div>

<div class="clear"></div>

</body>
</html>

Open in new window

0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
OK people.
I feel like beating Microsoft.

I found another script that I got working in FF but will NOT work in IE8
Can someone with some AJAX/jQuery knowledge tell me WHY this does not work in IE8?
It works on the site that I got it from, but will not work on my system or on my hosting provider.

Please help someone.... Anyone!

Carrzkiss
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://github.com/malsup/form/raw/master/jquery.form.js?v2.44"></script>

<script language="javascript" type="application/javascript">
// prepare the form when the DOM is ready 
$(document).ready(function() { 
    // bind form using ajaxForm 
    $('#htmlForm').ajaxForm({ 
        // target identifies the element(s) to update with the server response 
        target: '#htmlExampleTarget', 
 
        // success identifies the function to invoke when the server response 
        // has been received; here we apply a fade-in effect to the new content 
        success: function() { 
            $('#htmlExampleTarget').fadeIn('slow'); 
        } 
    }); 
});
</script>
</head>

<body>
<form id="htmlForm" action="show1.asp" method="post">
<input type="text" name="MyText" value="Hello HTML" />
<input type="submit" value="Echo as HTML" />
</form>

<div id="htmlExampleTarget"></div>


</body>
</html>

Open in new window

0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
Link to the code listed above
http://jquery.malsup.com/form/#html
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
To get everyone up to speed that may come in to this thread.

The post above http:#a33655482
This works great in FF and Chrome
BUT will not work in IE8

The link to this code that works across all browsers is here
http://jquery.malsup.com/form/#html

It seems simple enough to follow, but I am at a loss as to why it works in other browsers
But not in IE8. Which I am pretty sure, means that it is not going to work in previous versions either. (Referring to my code I have presented above)

And a wrap up.
The show1.asp only has
<%
response.write request.form("MyText")
%>

Carrzkiss
0
 
Wayne BarronAuthor, Web DeveloperAuthor Commented:
This issue is resolved.
Please go here for all the information and the sample code to download and test.

http://www.experts-exchange.com/Q_26467036.html

Have a good one.
Carrzkiss
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now