asked on

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

Gurvinder Pal Singh

you have tried this one?
http://api.jquery.com/submit/
http://api.jquery.com/jQuery.post/
http://www.w3schools.com/jquery/event_submit.asp

Wayne Barron

ASKER

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

Wayne Barron

ASKER

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

Wayne Barron

ASKER

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

Wayne Barron

ASKER

Link to the code listed above
http://jquery.malsup.com/form/#html

Wayne Barron

ASKER

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

ASKER CERTIFIED SOLUTION

Wayne Barron

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial