Post/submit(?) Single Input to database using Ajax/php

[JaseT]

Hi,
I've been trying for a day on this one but still no luck.
I'm tryng to submit or post (?) a single input field value into a MySQL database using Ajax, so the webpage is not reloaded.
The php database storage code is working fine (I've tested it).
The problem is with the HTML Form code and/or the JQuery.Ajax code. I can't get the single Form Input value (which shows up correctly in my debugger) into the database using my current Ajax code.
The JQuery Serialize website states...
"No submit button value is serialized since the form was not submitted using a button."
However, I'm including the serialize in the onclick event to bypass this??

Can anyone please tell me the correct way of doing this?
Thank you.

<form id="petform" action="/" method="post">
                Enter your pets name: <input id="petinput" type="text" name="petname" />
                <input id="petnamesubmit" type="submit" value="Submit to Database" />
</form>

//   PHP MySQL: Post PetName to MySQL Database using AJAX

$('#petnamesubmit').click(function(){
    $.ajax({
        url: phpdb.php,
        type:'POST',
        data: $(this).serialize(),
        success: function(msg){
                alert("Data has been submitted to the Database");
            }                   
        });
    }
);

UPDATE: .....

I'm now trying a plain button click event for my HTML/Ajax combo; rather than the above "INPUT" method:

<form id="petform" >
                Enter your pets name: <input id="petinput" type="text" name="petname" />
                <button id="petnamesubmit" type="button"> Submit to Database </>
</form>

$('#petnamesubmit').click(function(){

    var petnamevalue = $("input#petinput").val();
    
    $.ajax({
        url: phpdb.php,
        type:'POST',
        data: petnamevalue,
        success: function(msg){
                alert("Data has been submitted to the Database");
            }                   
        });
    }
);

But still no luck ??
Thanks.

[DanInMa]

both look correct to me, is that the only code on your test page? maybe someting is interfereing

[JaseT]

Thank you for your help.
The petname input box is on a page with other elements
This page has in the header:

<!-- include jQuery library -->
      <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        
<!-- Use an external JavaScript file --> 
       <script type="text/javascript" src="js/myjs.js"></script>

So, the JQuery.Ajax() code is in an external myjs.js file (which contains other js as well).

When I execute this webpage, Firebug shows the following:
petnamevalue: ReferenceError: petnamevalue is not defined.
Howeverm, input#petinput shows the correct input value.

It appears that when I click the button...nothing happens, the JQuery does not fire and petnamevalue does not become defined ??

Thank you for your time on this one.

[DanInMa]

<form id="petform" action="/" method="post">
                Enter your pets name: <input id="petinput" type="text" name="petname" />
                <input id="petnamesubmit" type="submit" value="Submit to Database" />
</form>

//   PHP MySQL: Post PetName to MySQL Database using AJAX
$(function() {
$('#petform').submit(function(){
    $.ajax({
        url: phpdb.php,
        type:'POST',
        data: $(this).serialize(),
        success: function(msg){
                alert("Data has been submitted to the Database");
            }                   
        });
    });
    });

you were getting the first error becuase you were trying to serialize the button itself becuase you binded the function to.

i put your code in a document ready section and binded directlky to the forms submit event. give this a shot

[JaseT]

Thanks,
I tried your code exactly, however, sorry, it didn't work. I get an error page 404 "Object not found...the requested URL was not found on this server".
I'll take a look at your code with Firebug and see if I can shed more light, thanks.

[DanInMa]

id double check the location of phpdb.php

[JaseT]

phpdb.php is in the root directory (same place as index.html).

I tried changing:

$.ajax({
        url: "/phpdb.php",

But still no luck
I'll keep thinking.

[DanInMa]

hmm. well this is pretty simple stuff. could you post any console errors you get?

[JaseT]

Bingo ! Found it !

You were right. The path to the phpdb.php was incomplete. The URL should have included the full path...

$.ajax({
        url: '/Full Path Here/phpdb.php',
        type:'POST',

Now for my next problem...the serialize is too non-specific...my database contains a new row ok, but an empty cell for petname I need to "grab" petname from the posted array? I'll have another think
Thanks so much for all your help.

Also, for the benefit of others... I had to add "return false" to the Ajax, to stop the page from reloading, e.g.

$(function() {
$('#petform').submit(function(){
    
    var petnamevalue = $(this).serialize();
    
    $.ajax({
        url: '/jasontaylorwebsite2/phpdb.php',
        type:'POST',
        data: petnamevalue,
        success: function(msg){
                alert("Data has been submitted to the Database");
            }                   
        });
        return false;
    });
    });