Needs help with updating db with jquery ajax

[eefh01]

Hi,

I am working on submitting a form with various info to update on db using jquery, ajax. The db is updating perfectly when I disable JS on firefox. When enabled, a few fields (adID, userID, comments) are not updating on the db. The field userID updated as zero, but the other two are blank.

Structure of table :

Field-Type
adID-varchar(250)
userID-int(11)
ContactDate-date
IP-varchar(250)
ModeOfContact-varchar(250)
comments-text

Please help me.

jquery code :

$("#Econtactadvertiserpanelsubmit").click(function(){
                $("#Econtactadvertiserpanel").append("<h2 id='loading'>Please wait..</h3>");

            var comments = $("#emailmsg").val();
            var adID = $("#adID").val();
            var userID = $("#userID").val();
            var ContactDate = $("#ContactDate").val();
            var ip = $("#ip").val();
            var ModeOfContact = $("#ModeOfContact").val();

            //console.log(emailmsg,con_name);

            $.ajax({
              type: "POST",
              url: "sendmail/selemail.php",
              data: 'adid=' + adID + '&userid=' + userID + '&ContactDate=' + ContactDate + '&ip=' + ip + '&ModeOfContact=' + ModeOfContact + '&comments=' + comments,
              success: function(result){
                console.log(result);
              }
            })
            return false;
            });

HTML form :

<div id="Econtactadvertiserpanel" style="margin: 0px; padding: 5px; text-align: center; background: #F3EFE0; border: #006400 dashed thin">
       <form name="Econtactadvertiserpanel" method="POST" action="selemail.php">
            <table>
              <tr>
                <td><label>Your Name</label></td>
                <td id="con_name"><?php echo $conlst['name']; ?></td>
              </tr>
              <tr>
                <td>Your Message</td>
                <td><textarea id="emailmsg" name="emailmsg" cols="50" rows="5"></textarea> </td>
              </tr>
              <tr>
                <td colspan="2"><input id="Econtactadvertiserpanelsubmit" type="submit" name="submit" value="Submit" /></td>
              </tr>
            </table>
            <input type="hidden" name="adID" id="adID" value="<?php echo $adID; ?>">
            <input type="hidden" name="userID" id="userID" value="<?php echo $conlst['userID']; ?>">
            <input type="hidden" id="ContactDate" name="ContactDate" value="<?php echo $datetoday; ?>">
            <input type="hidden" id="ModeOfContact" name="ModeOfContact" value="E">
            <input type="hidden" id="ip" name="ip" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>">
       </form>
        </div>

PHP file :

<?php

$adID=$_POST['adID'];
$userID=intval($_POST['userID']);
$ContactDate = date('Y-m-d', strtotime($_POST['ContactDate']));
$IP=$_POST['ip'];
$ModeOfContact=$_POST['ModeOfContact'];
$comments=$_POST['emailmsg'];

require_once('dbcon.php'); // DataBase connection


mysql_query("INSERT INTO contactdata VALUES('$adID', '$userID', '$ContactDate', '$IP', '$ModeOfContact', '$comments')");


if($adreply_q) {
  echo "Success";
}
else {
  echo "Failed";
}
?>

Thanks in advance.

Regards,

Kiran

[Airshow]

The db is updating perfectly when I disable JS on firefox.

Is this just an FF issue? Are other browsers OK?

Airshow

[Airshow]

Try wrapping the javascript in:

$(document).ready(function() {
...
});

Otherwise it's trying to attach a .click function to a DOM element that does not yet exist. In regular javascript, that would throw an error but with jQuery, failure is silent.

There may be other things but this needs to be fixed first.

Airshow

[eefh01]

Hi,

Thanks you for the reply. It seems the issue is not just with FF. The jQuery code is in ready function. Any other observations?

Thanks again,

Kiran

[Airshow]

I'll have a look ...

[Airshow]

A few things; some fixes, some suggestions ...

1. The ajax handler is better attached to the form element, rather than the submit button. I'm pretty certain that, in some browsers, the regular HTML submit action will take place in addition to the AJAX action if you try attaching to the submit button. Attaching to the form element is more reliable.

$("#Econtactadvertiserform").submit(function() {
	...

And an associated change to the form id:

<form id="Econtactadvertiserform" ... >

2. You can use jQuery's .serialize() to serialize the form data instead of building the string yourself. (You will need also to change name="emailmsg" to name="comments" in the HTML.)

3. By putting your "loading" (and an "error" message) in the HTML, both initially styled with display:none; , they can be more easily shown/hidden as required.

Your javascript will then be something like this:

$(document).ready(function() {
	$("#Econtactadvertiserform").submit(function() {
		$('#loading').show();
		var data = $(this).serialize();
		$.ajax({
			type: "POST",
			url: "sendmail/selemail.php",
			data: data,
			success: function(result){
				console.log(result);
			},
			error: function(XMLHttpRequest, textStatus, errorThrown){
				$('#error').show();
			},
			complete: function(){
				$('#loading').hide();
			}
		})
		return false;
	});
});

Airshow

[eefh01]

Hi,

Thanks for trying to help me out. I tried the above too.. but no joy.. As I said a few fields are updating fine in the db, I suspected that the issue could be with datatypes used in the table. I tried to convert them as required in table and JS too.. but no results.

Lately, I figured out the issue... a simple typo which took a day to resolve. It is

adID-varchar(250) and userID-int(11) are used in the table structure. However, I used

data: '[B]adid[/B]=' + adID + '&[B]userid[/B]=' + userID + '&ContactDate=' + ContactDate .....

in jQuery

I corrected this to

data: 'adID=' + adID + '&userID=' + userID + '&ContactDate='...

which resolved the issue and working great.

Thanks again Airshow for taking time to help me out.

Kiran

[Airshow]

Kiran,

That's good news. I guess it had to be something like that.

Now you know what was wrong, you can try my var data = $(this).serialize(); idea again. Just make sure the two form fields are named name="adID" and name="userID" in the HTML.

It won't make the code any better, just a bit more concise and more responsive to future changes/additions.

Airshow