asked on

submit without page refresh using jquery/php

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.

hielo

>> ...
>> $(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.

hielo

<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

melvint91

ASKER

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.

melvint91

ASKER

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.

hielo

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.

hielo

Regarding my SECOND post,
On line 12, change $("$msgbox") to $("#msgbox")

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

melvint91

ASKER

Still trying to get this to work...

shubham-aggarwal

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

ASKER CERTIFIED SOLUTION

hielo

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial