Solved

submit without page refresh using jquery/php

Posted on 2011-03-08
9
609 Views
Last Modified: 2012-05-11
I'm trying to get my form to submit without refreshing page using jquery.  I used this code on a login page and it works fine.  BUT, when I try to use to update info in mySQL database, the jquery is not even functioning when i click Update button on form.  Now when i test form to see if it works when submitting via "action" in form tag, the update is successful...Please take a look at what I'm doing wrong....

<html>
<head><title></title>

<script src="js/jquery.js" type="text/javascript" language="javascript"> </script>

<script type="text/javascript">
$(document).ready(function()
{
     $("#contentform").submit(function()
{
$.post("useredit_update.php",{ id:$('#id').val(),fname:$('#fname').val(),lname:$('$lname').val(),rand:Math.random()},function(data)
{
if(data=='yes')
{
$("$msgbox").fadeTo(200,0.1,function()
{
$(this.html('Update Successful').addClass('messageboxok').fadeTo(900,1);
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function()
{
$(this).html('Error with Update...').addClass('messageboxerror').fadeTo(900,1);
})l
}
})l
return false;
})l
})l
</script>

<link rel="stylesheet" href="css/user_edit.css" type="text/css" media="screen" />

</head>

<?php

$id=$_GET['id'];
include("db_connect.php");

query statement here....

while loop here....
}
?>
<body>

<form id="contentform" name="contentform" method="post" action="">
<table>
<input type="hidden" name="id id="id" value="<? echo $id; ?>">
<tr>
<td colspan="2"><label for="fname">First Name</label></td>
<td colspan="2"><input type="text" name="fname" id="fname" tabindex="1" value="<? echo $fname;?>"/></td>
</tr>
<tr>
<td colspan="2"><label for="lname">Last Name</label></td>
<td colspan="2"><input type="text" name="lname" id="lname" tabindex="1" value="<? echo $lname;?>"/></td>
</tr>
--- other form fields listed---
<tr>
<td colspan="2"><input type="submit" id="submit" name="submit" value="Update Record" /></td>
<td colspan="2"></td>
</tr>
</table>
</form>
<div class="buttondiv">
<span id="msgbox" style="display:none"></span>
</div>
</body>
</html>

As I stated above, using the jquery code at top of form worked fine when I used it in a login form, but now it seems the jquery code isnt even being acknowledge at all. I did test to make sure the useredit_update.php file did update successfully thru a normal form method/action post.
0
Comment
Question by:melvint91
[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
  • 5
  • 3
9 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 35072344
>> ...
>> $(this).html('Error with Update...').addClass('messageboxerror').fadeTo(900,1);
>> })l  <==Garbage Character here
>> }
>> })l  <==Garbage Character here
>> return false;
>> })l  <==Garbage Character here
>> })l <==Garbage Character here
>> </script>
>> ...
clean the "garbage" characters pointed out above.
0
 
LVL 82

Expert Comment

by:hielo
ID: 35072398

<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
     $("#contentform").submit(function()
	{
		var params=$('#contentform').serialize()+'&rand='+(new Date()).valueOf() ;
		$.post("useredit_update.php",params,function(data)
		{
			if(data=='yes')
			{
				$("$msgbox").fadeTo(200,0.1,function()
				{
					$(this.html('Update Successful').addClass('messageboxok').fadeTo(900,1);
				});
			}
			else
			{
				$("#msgbox").fadeTo(200,0.1,function()
				{
					$(this).html('Error with Update...').addClass('messageboxerror').fadeTo(900,1);
				});
			}
		});
	return false;
	});
});
</script>

Open in new window

0
 

Author Comment

by:melvint91
ID: 35072800
hielo: excuse the garbage character...it's not in the actual code, I had to retype all code so you had something to see.  I'm working from a classified server and I cant copy and paste.  I will test your last solution and reply with a success or failure outcome.
0
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 

Author Comment

by:melvint91
ID: 35073396
heilo:  your solution wasn't successful.  There has to be something wrong because I copied my original code I posted from another script I used for my Login form process and it worked like a charm.
0
 
LVL 82

Expert Comment

by:hielo
ID: 35073654
On the code you provided you have:
$.post("useredit_update.php",...);

Is the code you provided the code for useredit_update.php? I noticed that your php code is using:
$id=$_GET['id'];

BUT your jquery is sendting a POST request, NOT a GET request.

0
 
LVL 82

Expert Comment

by:hielo
ID: 35077068
Regarding my SECOND post,
On line 12, change $("$msgbox") to $("#msgbox")

On line 14, change $(this.html to $(this).html
0
 

Author Comment

by:melvint91
ID: 35149143
Still trying to get this to work...
0
 

Expert Comment

by:shubham-aggarwal
ID: 35154594
That should work .There were some syntax / Selector error on line 11 and 17 .
$(document).ready(function() {
    $("#contentform").submit(function() {

        $.post("useredit_update.php", {
            id: $('#id').val(),
            fname: $('#fname').val(),
            lname: $('#lname').val(),
            rand: Math.random()
        },
        function(data) {
            if (data == 'yes') {
                $("$msgbox").fadeTo(200, 0.1,
                function() {
                    $(this).html('Update Successful').addClass('messageboxok').fadeTo(900, 1);
                });
            } else {
                $("#msgbox").fadeTo(200, 0.1,
                function() {
                    $(this).html('Error with Update...').addClass('messageboxerror').fadeTo(900, 1);
                });
            }
        });
        return false;
    });
});

Open in new window

0
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 35156386
copy and paste the following and give it a try:
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
     $("#contentform").bind('submit',function()
	{
		var params=$('#contentform').serialize()+'&rand='+(new Date()).valueOf() ;
		$.post("useredit_update.php",params,function(data)
		{
			if( /\byes\b/i.test(data) )
			{
				$("#msgbox").fadeTo(200,0.1,function()
				{
					$(this).html('Update Successful').addClass('messageboxok').fadeTo(900,1);
				});
			}
			else
			{
				$("#msgbox").fadeTo(200,0.1,function()
				{
					$(this).html('Error with Update...').addClass('messageboxerror').fadeTo(900,1);
				});
			}
		});
	return false;
	});
});
</script>

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
[form-control] Retain values after a POST action 21 73
Updating checkbox via JQuery does not trigger Knockout binding 6 60
Javascript Error 10 24
Jquery syntax 12 29
This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

734 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