Solved

jQuery simple form submit example needed

Posted on 2010-09-11
7
768 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
  • 6
7 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33654269
0
 
LVL 30

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 30

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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 30

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 30

Author Comment

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

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 30

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now