• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

[jQuery] Insert into MySql

Question

Andrew Lyle    341

I'm looking for a solution to insert a form field into a database using jQuery, without having to reload the page at all.

The code will eventually be a comment form field that inserts into the Comments database, but can't disrupt the streaming music.

Share this post


Link to post
Share on other sites

9 answers to this question

Recommended Posts

  • 0
Rob    20

jQuery is just a client-side scripting language which, in the context of your request, can help automate AJAX calls to a script - if you can make a PHP script which adds things to a database based on the query-string input parameters, you can get jQuery to call it easily without reloading the page.

Moved to Web Client Side

Share this post


Link to post
Share on other sites
  • 0
Andrew Lyle    341
jQuery is just a client-side scripting language which helps automate HTTP requests - if you can make a PHP script which adds things to a database based on querystring input parameters, you can get jQuery to call it easily without reloading the page.

Moved to Web Client Side

lol, thanks rob, but do you got a quick example?

Share this post


Link to post
Share on other sites
  • 0
Rob    20

$("#SubmitButton").click(function() { 
	$.ajax({type:"GET", url:"submit.php", data:$("form#YourForm").serialize(), cache:false, timeout:10000,
		success: function() { 
			// Request has been successfully submitted	
		},
		error: function() {
			// An error occurred, do something about it
		},
		complete: function() { 
			// We're all done so do any cleaning up - turn off spinner animation etc.
		}
	});
});

Process:

  • The button with an ID of SubmitButton is clicked, and the above function is called
  • All the inputs inside your <form id="YourForm"></form> element are serialised and send to submit.php
  • The output is analysed - was it successful or did an error occur due to a timeout of 10 seconds, or an HTTP error?
  • Clean up, and do anything you need to when you know the request (successful or not) is done

Share this post


Link to post
Share on other sites
  • 0
Antaris    83

As Rob has said, jQuery can be used to make AJAX calls back to your server, so if you createa php script to do the grunt work, you can have your jQuery do the following:

var insertIntoDatabase = function(param1, param2)
{
  $.get("myphpscript.php", { "param1" : param1, "param2" : param2 }, function(result) {
	alert(result);
  });
};

Have a look at the JQuery API for some more examples, also, $.getJSON is quite a good method, if you are returning data from the server in JSON format, than it will automatically interpret the response as a Javascript object.

Edit: Rob's more complete example is probably the better one to follow...

Share this post


Link to post
Share on other sites
  • 0
Andrew Lyle    341

Maybe I should mention i've never used jquery before :p And have almost no to little idea what you guys just said lol

Share this post


Link to post
Share on other sites
  • 0
Rob    20

Do you know PHP?

Share this post


Link to post
Share on other sites
  • 0
Andrew Lyle    341
Do you know PHP?

What's that?

Just kidding. I have a great grasp on PHP & MySql, some knowledge in Javascript, with no knowledge in Ajax or jQuery. I just seen a list of scripts here that shows some examples of how it works, and thought I could insert comments on my web site instead of having the page reload each time.

Share this post


Link to post
Share on other sites
  • 0
Rob    20

Here's a one-page, self-contained example I cooked up.

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
	&lt;head&gt;
		&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;script type="text/javascript"&gt;
			// Document's loaded, register the click trigger
			$(document).ready(function() { $("#SubmitLink").click(function() { submitForm(); return false; } ); });

			// Function to do the AJAX
			function submitForm() {
					$.ajax({type:"GET", url:"submit.php", data:$("#CommentsForm").serialize(), cache:false, timeout:10000,
						success: function() {
							// Request has been successfully submitted
							alert("Succeeded"); 			
						},
						  error: function() {
							// An error occurred, do something about it
							alert("Failed");
	   					},
						complete: function() {
							// We're all done so do any cleaning up.
							alert("Regardless of the outcome we're going to add the comment for demonstration purposes:");
							addCommentLocally();
						}
   					});
			}

			// Function to add the comment to the page
			function addCommentLocally() {
				$("#comments").append('&lt;div class="comment"&gt;Field 1: '+$("#field1").val()+'&lt;br /&gt;Field 2: '+$("#field2").val()+'&lt;br /&gt;Field 3: '+$("#field3").val()+'&lt;/div&gt;&lt;hr /&gt;');
				$("#CommentsForm input").val("");
			}
		&lt;/script&gt;

		&lt;h1&gt;jQuery Example&lt;/h1&gt;
		&lt;h2&gt;AJAX Comments&lt;/h2&gt;

		&lt;h3&gt;Current Comments&lt;/h3&gt;
		&lt;div id="comments"&gt;
			&lt;div class="comment"&gt;Field 1: ABC&lt;br /&gt;Field 2: DEF&lt;br /&gt;Field 3: GHI&lt;/div&gt;&lt;hr /&gt;
			&lt;div class="comment"&gt;Field 1: JKL&lt;br /&gt;Field 2: MNO&lt;br /&gt;Field 3: PQR&lt;/div&gt;&lt;hr /&gt;
		&lt;/div&gt;

		&lt;h3&gt;Add a Comment&lt;/h3&gt;
		&lt;form id="CommentsForm" name="CommentsForm"&gt;
			&lt;p&gt;
				Field 1: &lt;input name="field1" id="field1" type="text" /&gt;&lt;br /&gt;
				Field 2: &lt;input name="field2" id="field2" type="text" /&gt;&lt;br /&gt;
				Field 3: &lt;input name="field3" id="field3" type="text" /&gt;
			&lt;/p&gt;
		&lt;/form&gt;		
		&lt;p&gt;&lt;a href="#" id="SubmitLink"&gt;Submit!&lt;/a&gt;&lt;/p&gt;	
	&lt;/body&gt;
&lt;/html&gt;

Share this post


Link to post
Share on other sites
  • 0
Andrew Lyle    341

Thank you so much Rob for the help and support! (Y)(Y) works like a charm :D

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.