Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Oct 2012
    Location
    Melbourne, Australia.
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts

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

    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.

    Code:
    <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>
    Code:
    //   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:


    Code:
    <form id="petform" >
                    Enter your pets name: <input id="petinput" type="text" name="petname" />
                    <button id="petnamesubmit" type="button"> Submit to Database </>
    </form>
    Code:
    $('#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.
    Last edited by JaseT; 10-23-2012 at 12:53 AM. Reason: Trying Plain Button Click Event Instead

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    both look correct to me, is that the only code on your test page? maybe someting is interfereing

  • #3
    New Coder
    Join Date
    Oct 2012
    Location
    Melbourne, Australia.
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you for your help.
    The petname input box is on a page with other elements
    This page has in the header:

    Code:
    <!-- 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.

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Code:
    <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>
    Code:
    //   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

  • #5
    New Coder
    Join Date
    Oct 2012
    Location
    Melbourne, Australia.
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    id double check the location of phpdb.php

  • #7
    New Coder
    Join Date
    Oct 2012
    Location
    Melbourne, Australia.
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    phpdb.php is in the root directory (same place as index.html).

    I tried changing:

    Code:
    $.ajax({
            url: "/phpdb.php",
    But still no luck
    I'll keep thinking.
    Last edited by JaseT; 10-23-2012 at 07:12 AM.

  • #8
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    hmm. well this is pretty simple stuff. could you post any console errors you get?

  • #9
    New Coder
    Join Date
    Oct 2012
    Location
    Melbourne, Australia.
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Bingo ! Found it !

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

    Code:
    $.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.

    Code:
    $(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;
        });
        });


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •