Andrew Lyle Global Moderator Posted February 7, 2009 Global Moderator Share Posted February 7, 2009 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. Link to comment Share on other sites More sharing options...
0 Rob Veteran Posted February 7, 2009 Veteran Share Posted February 7, 2009 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 Link to comment Share on other sites More sharing options...
0 Andrew Lyle Global Moderator Posted February 7, 2009 Author Global Moderator Share Posted February 7, 2009 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? Link to comment Share on other sites More sharing options...
0 Rob Veteran Posted February 7, 2009 Veteran Share Posted February 7, 2009 $("#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 Link to comment Share on other sites More sharing options...
0 Antaris Veteran Posted February 7, 2009 Veteran Share Posted February 7, 2009 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... Link to comment Share on other sites More sharing options...
0 Andrew Lyle Global Moderator Posted February 7, 2009 Author Global Moderator Share Posted February 7, 2009 Maybe I should mention i've never used jquery before :p And have almost no to little idea what you guys just said lol Link to comment Share on other sites More sharing options...
0 Rob Veteran Posted February 7, 2009 Veteran Share Posted February 7, 2009 Do you know PHP? Link to comment Share on other sites More sharing options...
0 Andrew Lyle Global Moderator Posted February 7, 2009 Author Global Moderator Share Posted February 7, 2009 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. Link to comment Share on other sites More sharing options...
0 Rob Veteran Posted February 7, 2009 Veteran Share Posted February 7, 2009 Here's a one-page, self-contained example I cooked up. <!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" xml:lang="en"> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> </head> <body> <script type="text/javascript"> // 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('<div class="comment">Field 1: '+$("#field1").val()+'<br />Field 2: '+$("#field2").val()+'<br />Field 3: '+$("#field3").val()+'</div><hr />'); $("#CommentsForm input").val(""); } </script> <h1>jQuery Example</h1> <h2>AJAX Comments</h2> <h3>Current Comments</h3> <div id="comments"> <div class="comment">Field 1: ABC<br />Field 2: DEF<br />Field 3: GHI</div><hr /> <div class="comment">Field 1: JKL<br />Field 2: MNO<br />Field 3: PQR</div><hr /> </div> <h3>Add a Comment</h3> <form id="CommentsForm" name="CommentsForm"> <p> Field 1: <input name="field1" id="field1" type="text" /><br /> Field 2: <input name="field2" id="field2" type="text" /><br /> Field 3: <input name="field3" id="field3" type="text" /> </p> </form> <p><a href="#" id="SubmitLink">Submit!</a></p> </body> </html> Link to comment Share on other sites More sharing options...
0 Andrew Lyle Global Moderator Posted February 8, 2009 Author Global Moderator Share Posted February 8, 2009 Thank you so much Rob for the help and support! (Y)(Y) works like a charm :D Link to comment Share on other sites More sharing options...
Question
Andrew Lyle Global Moderator
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.
Link to comment
Share on other sites
9 answers to this question
Recommended Posts