• 0

[jQuery] Submitting a form

Asked by Shazer2,

 Share

Question

Enthusiast

Shazer2

Posted
Posted

I am trying to make something where you can post, and with jQuery it submits (no refresh or parsing via another page) and inserts the data into the DB. The code I am using for the jQuery is in my <head> and this is the code:

&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" &gt;
    $(function() {
        $(".submit").click(function() {
            var np = $("#np").val();
            $.ajax({
                type: "POST",
                url: "inc/ajax.php",
                data: np,
                success: function(){
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                }
            });
        }
        return false;
    });
    &lt;/script&gt;

I then have the following in ajax.php and I am 100% certain it's in the correct directory.

&lt;?php

/**
 * @author Shannon
 * @copyright 2011
 */
session_start();
include ("connect.php");

$user = $_SESSION['username'];
$np = $_POST['np'];
$np = mysql_real_escape_string($np);   

mysql_query("INSERT INTO `posts` (user, np) VALUES ('$user', '$np')") or die(mysql_error());  
?&gt;

That is all correct too, but it just doesn't seem to insert into the database. If anyone has an idea why, please post a reply.

Link to comment
https://www.neowin.net/forum/topic/990268-jquery-submitting-a-form/
Share on other sites

17 answers to this question

Recommended Posts

  • 0
Grand Master

Rob Veteran

Posted
  • Veteran
Posted

Let's do some basic debugging techniques to see what's going on.

First, in your JavaScript, make liberal use of console.log('something'); to see what's actually being sent (check the output in your browser's console of choice, be it Firebug/Web Inspector etc.) Ensure that your np variable contains what you think it contains. And ensure that the Ajax request runs, completes and doesn't error out (again, Firebug/Web Inspector).

Once you're happy your JavaScript is behaving itself, do the same with PHP - output variables to a log file if you like, check to see the status of any database connections.

Use a process of elimination to work out exactly where the problem is occurring by ensuring each step is completing successfully.

  • 0
Enthusiast

Shazer2

Posted
  • Author
Posted

Rob, this is the first time using JavaScript so I don't know ANY functions. This was merely copied off a site to see if I could get it to work. Obviously I couldn't so I resulted here asking for assistance. I don't know the problem and don't really know what to do to find out. I'm pretty efficient in PHP however, just not JS.

Anymore help you can give?

  • 0
Enthusiast

Shazer2

Posted
  • Author
Posted

I'm running it as a PHP file (still works) but:

&lt;?php
session_start();
include("inc/connect.php");
?&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Home&lt;/title&gt;
    &lt;link rel="stylesheet" href="inc/style.css" type="text/css" /&gt;
    &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" &gt;
    $(function() {
        $(".submit").click(function() {
            var np = $("#np").val();
            $.ajax({
                type: "POST",
                url: "inc/ajax.php",
                data: np,
                success: function(){
                    $('.success').fadeIn(200).show();
                    $('.error').fadeOut(200).hide();
                }
            });
        }
        return false;
    });
    &lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
    &lt;div align="center"&gt;
        &lt;div class="header"&gt;
            &lt;div class="logo"&gt;
                &lt;a href="index.php"&gt;&lt;img src="inc/logo.png" alt="Logo" /&gt;&lt;/a&gt;&lt;br /&gt;
            &lt;/div&gt;

            &lt;?php
            $user = $_SESSION['username'];

            if (!$user) {
                header("location:login.php");
            }
            ?&gt;

            &lt;div class="useri"&gt;&lt;br /&gt;

            &lt;?php echo "Logged in as: &lt;a href='#'&gt;".$user."&lt;/a&gt;&lt;br /&gt;"; ?&gt;

            &lt;a href="logout.php"&gt;Logout&lt;/a&gt;
            &lt;/div&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;hr /&gt;

            &lt;div class="newsbox"&gt;
                    &lt;u&gt;&lt;b&gt;News&lt;/b&gt;&lt;/u&gt;&lt;hr /&gt;
                    &lt;?php
                    $sql = mysql_query("SELECT * FROM `feed`") or die(mysql_error());
                    while ($rnews = mysql_fetch_array($sql)) {
                        echo $rnews['news']."&lt;br /&gt;&lt;br /&gt;";
                    }
                    ?&gt;
            &lt;/div&gt;

            &lt;div class="updatebox"&gt;
            &lt;u&gt;&lt;b&gt;Updates&lt;/b&gt;&lt;/u&gt;&lt;hr /&gt;
            &lt;?php
            $sql = mysql_query("SELECT * FROM `feed`") or die(mysql_error());
            while ($rupdate = mysql_fetch_array($sql)) {
                echo $rupdate['update']."&lt;br /&gt;&lt;br /&gt;";
            }
            ?&gt;
            &lt;/div&gt;

            &lt;div class="newspost"&gt;
            &lt;form id="submit" name="submit" method="POST"&gt; 
            &lt;input name="np" type="text" id="np" style="margin-left: 1px; margin-right: 1px; width: 99%;" /&gt;
            &lt;input name="sub" type="submit" id="sub" style="float: right;" value="Post!" /&gt;
            &lt;/form&gt;
            &lt;br /&gt;&lt;/div&gt;&lt;br /&gt;

        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

  • 0
Grand Master

Rob Veteran

Posted
  • Veteran
Posted

First problem I can see is this line:

$(".submit").click(function() {

This means 'run this function when an element with a class of 'submit' is clicked'.

Fastforward to your HTML, and you'll see your Submit button doesn't have a class of 'submit' at all! So our JavaScript function is never being called, and no Ajax request is made. What your button does have, however, is an ID of 'sub'...

Replace that line with this, and try again:

$("#sub").click(function() {

  • 0
Grand Master

Rob Veteran

Posted
  • Veteran
Posted

You're also missing the closing bracket for the click event declaration.

&lt;script type="text/javascript"&gt;
   $(function() {
      $("#sub").click(function() {
         var np = $("#np").val();
         $.ajax({
            type: "POST",
            url: "inc/ajax.php",
            data: np,
            success: function(){
               $('.success').fadeIn(200).show();
               $('.error').fadeOut(200).hide();
            }
         });
         return false;
      });
   });
&lt;/script&gt;

  • 0
Enthusiast

Shazer2

Posted
  • Author
Posted

We are making progress. It now opens up a new entry in the database but isn't sending any of the data to the database. It leaves both fields (np, user) empty. Another problem, it doesn't auto refresh after it is posted or submitted.

What I want it to do is when it posts it, clear the textbox and have a little message underneath saying success.

  • 0
Grand Master

Rob Veteran

Posted
  • Veteran
Posted

Now your problem is that your PHP is expecting data in a variable called np, but your JavaScript is just sending the value of a textbox that happens to be called np as well. So if we change this one line to this:

data: {np:np},

You can see we're now saying 'send the value we've put into local variable np to the server, labelled 'np'.

I'm not able to help much more I'm afraid. You mention you want a little message saying success, but nowhere in your HTML do you have anything like that. So I think you need to learn a little more about how HTML works, and the basics of JavaScript and then this will start to make a bit more sense. Right now you're just copying and pasting stuff... which is how we all start, but to customize this you really need to understand the fundamentals first.

Good luck :)

  • 0
Enthusiast

Shazer2

Posted
  • Author
Posted

Updated last post with what I wanted the resulting outcome to be, that seems to work (inserts np into database) but it isn't inserting the user in. To get the user logged in I use sessions (obviously), so what I am wondering is with JavaScript can you make a var hold the value of a PHP session. If not, I am determining the user in the ajax.php file, but it doesn't seem to want to add that into the database.

So where we are at: it inserts np into the database but doesn't insert user. We still need to say if the post succeeded or failed too. I do know HTML but don't know how to incorporate it into JavaScript to display the message. I just need a little more explanation Rob. I learned PHP this way too, when I didn't understand something after looking it up, I went and asked places. I am now half decent with PHP but just a beginner with JavaScript.

  • 0
Grand Master

Rob Veteran

Posted
  • Veteran
Posted

Hint: try to work out what this line of code is supposed to do, based on what we've discussed here previously and by looking into the appropriate jQuery documentation. Once you understand that, you'll see what you need to do to get a success or failure message.

$('.success').fadeIn(200).show();

  • 0
Enthusiast

Shazer2

Posted
  • Author
Posted

I've looked at that line multiple times Rob. I know it displays the fail or success but I'm not sure how to use it. I even added a part in my CSS file (.success) because I thought that is what was needed.

Can you explain to me what this does, or at least direct me to a page that will give me a brief idea of how to use it and what it does?

  • 0
Grand Master

Rob Veteran

Posted
  • Veteran
Posted

Just heading to bed, but here's a line-by-line description of the JS:

&lt;script type="text/javascript"&gt;
   $(function() {                                   // Run this function when both jQuery and the DOM is ready
      $("#sub").click(function() {                  // When the element with an ID of 'sub' is clicked, run this function
         var npMessage = $("#np").val();            // Set the value of the element with an ID of 'np' into a variable called 'npMessage'
         $.ajax({                                   // Start an Ajax request
            type: "POST",                           // ... of type 'POST'
            url: "inc/ajax.php",                    // ... to this URL
            data: {np:npMessage},                   // Sending the value of npMessage (set earlier) under the name 'np'
            success: function(){                    // If the Ajax request succeeds, run this function
               $('.success').fadeIn(200).show();    // Fade in any HTML elements with a class of 'success' on the page, then show them (last bit is redundant)
               $('.error').fadeOut(200).hide();     // Fade out any HTML elements with a class of 'error' on the page, then hide them (last bit is redundant)
            }                                       // End of the success method
         });                                        // End of the Ajax request
         return false;                              // Prevent the normal behaviour of the button (submitting the page in a non-Ajax way)
      });                                           // End of the click handler
   });                                              // End of the jQuery DOM ready handler
&lt;/script&gt;

jQuery documentation - for more information on the $.ajax function.

Firebug - a browser plugin for Firefox that helps visually show Ajax requests and whether they succeed

  • 0
Enthusiast

Shazer2

Posted
  • Author
Posted

Thanks. I just don't understand how to display the success message or the failed message. I know I need to do something like:

&lt;div class="success"&gt;Success!&lt;/div&gt;

somewhere in the page, but I don't know where, unless it's in a called function it's just going to constantly be displayed. Not sure if you will see this before you go to bed, but if you do please reply to this one. If you do see it, please also tell me how to clear the textbox after everything has been submitted.

  • 0
Enthusiast

Shazer2

Posted
  • Author
Posted

Sort of had it working, but now the messages won't display. I realise I have to make 2 spans with error and success, and set display to none. I then fade it in when it has the right stuff entered and fade out success and fade in error when it doesn't.

It seems to be having trouble though with the following code, not sure why it is doing it.

&lt;script type="text/javascript"&gt;
    $(function() {  
        $("#sub").click(function() {    
            var npMessage = $("#np").val(); 

            if (npMessage=='') {
                $('.success').fadeOut(200).hide();
                $('.error').fadeIn(200).show(); 
            } else {
                $.ajax({   
                    type: "POST",  
                    url: "inc/ajax.php", 
                    data: {np:npMessage},
                    success: function(){ 
                        $('.success').fadeIn(200).show();
                        $('.error').fadeOut(200).hide();
                    }
                });
            return false;   
            });
        });
    &lt;/script&gt;

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • YouTube has finally brought back its DMs feature, but only in these countries

      By David Uzondu · Posted

      YouTube has finally brought back its DMs feature, but only in these countries by David Uzondu Late last year, YouTube started testing a "new" way to share videos directly with friends, without having to leave the app. Now, the video giant has announced that is now rolling out a revamped direct messaging inbox, which lets you share videos, Shorts, and live streams and have conversations about them, directly on YouTube. The platform limits this feature to 18+ users who are signed in to a verified channel and use the latest mobile app version. Direct messaging on YouTube first became a thing back in 2017 inside the mobile app (later renamed to "Messages"), where users could chat one-on-one and share clips directly, but all that came to an end on September 18, 2019, when Google decided to shut it down after giving users a month to download a .zip file archive of their past chats. No one really knows why YouTube killed the feature, but users were encouraged to migrate to the public Comments section, on Community tab posts, and via YouTube Stories. The previous incarnation suffered from moderation challenges, prompting Google to implement stricter safety guidelines and age verifications for this new iteration. Here's a list of the countries where the re-launched feature is currently available, though note that Brand Accounts do not have access to it, at least for now: Countries American Samoa Austria Belgium Brazil Bulgaria Croatia Cyprus Czech Republic Denmark Estonia Finland France Germany Greece Guam Hungary Iceland Ireland Italy Latvia Liechtenstein Lithuania Luxembourg Malta Netherlands Northern Mariana Islands Norway Poland Portugal Puerto Rico Romania Singapore Slovakia Slovenia Spain Sweden Switzerland U.S. Virgin Islands United Kingdom United States Before you can use the feature, you first have to send an invite link to your contact. Invite links expire exactly seven days after you create them. If the person on the other end accepts the invite, you can exchange videos directly and text back and forth inside the app. To delete a message, just long-press on the message and tap unsend to remove it for both users. You can also delete entire conversations by long-pressing the thread and selecting delete, but the other person will continue to see the chat history on their end. To make sure everything remains safe, YouTube monitors these messages to ensure they follow Community Guidelines.
    • EU Commission explains why Siri AI isn't launching in the EU, and Apple is to blame

      By WaltC · Posted

      The problem of course is simply that government does not always know best. My point is that agency is taken away from the EU consumer in these cases. I'm sorry, but I do not believe that governments (politicians) are inherently good, and "looking out for me." Primarily they look to themselves and their own personal desires first, foremost, and always. When the EU or the DOJ fines these companies, claiming to "represent the welfare of the consumer," how much of these billion-dollar judgments are handed to the consumers they claim to represent? Not even a dollar, as I've seen. Yet the EUC lawyers who are paid to sit around and dream up these suits make huge commissions on the fines the EUC adjudicates, which is an ironclad fact I hope everyone is aware of. It's also rank corruption, of course, but that's another topic. Last, when the EU inflicts these judgments, or the DOJ, take your pick, the costs are bundled right along in the cost of the goods and services these companies provide the consumers they are "looking out for." If you are someone who believes his government is his savior then you have my condolences. I think Apple is right here, because the whole scheme of consumer choice is that consumers pick and choose among the products companies offer. Microsoft Windows is more compatible with third party software and hardware than any desktop OS on Earth, which is my sole reason for choosing it. Just because the EUC forces companies do certain things it knows the companies do not want to do, "or else", has no bearing on consumer benefit. This Siri thing is almost idiotic it's so infantile. But this is what the EUC does when the EU in Brussels becomes cash-strapped and needs a big infusion of cash. Some people get upset by "big companies" but it's the opposite when governments dwarf the size and scope of these companies, which is so obvious it hurts.... I mean you can't honestly believe that forcing Apple to do things with Siri it has its own reasons to decline is something that "opens up" Apple, do you? Say it aint' so...
    • Popular Windows 11 file manager Files gets improved tags, layouts, and new OneDrive icon

      By BoondockSaint · Posted

      Looks like many years since the request was made, a directory tree view finally may be added. https://github.com/files-community/Files/pull/18537
    • Popular Windows 11 file manager Files gets improved tags, layouts, and new OneDrive icon

      By leonsk29 · Posted

      Is it still super slow or has it improved on that area?
    • Microsoft: Windows 11 KB5094126, KB5093998 finally stops trusting a critical system threat

      By NXTwoThou · Posted

      There's this from last year https://gist.github.com/threat...364659a8887841aa43deca4efd9 but nothing about a buffer overflow that MS somehow can't code against. No matter what, it makes sense to take a "protected by default" approach.

  • Recent Achievements

    • One Month Later
      sjbousquet earned a badge
      One Month Later
    • Week One Done
      sjbousquet earned a badge
      Week One Done
    • First Post
      DragonOfMercy earned a badge
      First Post
    • First Post
      bella52 earned a badge
      First Post
    • Reacting Well
      Techinmay earned a badge
      Reacting Well

  • Popular Contributors

    1. 1
      +primortal
      501
    2. 2
      PsYcHoKiLLa
      214
    3. 3
      +Edouard
      156
    4. 4
      Steven P.
      84
    5. 5
      FloatingFatMan
      73
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!