Solved

jQuery simple form submit example needed

Posted on 2010-09-11
7
776 Views
Last Modified: 2012-08-13
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
Comment
Question by:Wayne Barron
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
7 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33654269
0
 
LVL 31

Author Comment

by:Wayne Barron
ID: 33654626
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
 
LVL 31

Author Comment

by:Wayne Barron
ID: 33655122
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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 
LVL 31

Author Comment

by:Wayne Barron
ID: 33655482
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
 
LVL 31

Author Comment

by:Wayne Barron
ID: 33655484
Link to the code listed above
http://jquery.malsup.com/form/#html
0
 
LVL 31

Author Comment

by:Wayne Barron
ID: 33655510
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
 
LVL 31

Accepted Solution

by:
Wayne Barron earned 0 total points
ID: 33734821
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

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

jQuery is a JavaScript library that greatly simplifies JavaScript programming. AJAX is an acronym formed from "Asynchronous JavaScript and XML."  AJAX refers to any communication between client and server, when the human client does not observe a…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

622 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question