• 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

    • EU Commission explains why Siri AI isn't launching in the EU, and Apple is to blame

      By NEXXUS · Posted

      I dont use apple products
    • Popular Windows 11 file manager Files gets improved tags, layouts, and new OneDrive icon

      By TarasBuria · Posted

      Popular Windows 11 file manager Files gets improved tags, layouts, and new OneDrive icon by Taras Buria Files, one of the best third-party file managers for Windows 11 out there, has received a minor update to version 4.1.3. The latest release brings a few quality-of-life improvements and new features, including an easier way to calculate folder sizes, improved tags, a new OneDrive icon, and more. Starting with folder size, File now has a dedicated "View size" button for each folder if you have the "Calculate folder sizes" option turned off in settings. This improves performance and allows you to see each folder's size only when needed. Note that folder size calculation could take some time depending on the number of files and their "weight." Next, Files can now retain file selection when switching layouts. While this change is rather minor, it lets you keep selected objects highlighted whenever you need to switch, say, from a list to a thumbnail layout. If you use tags, you will be glad to know that Files 4.1.3 makes it easier to remove all tags. You can do that with one of the following methods: From the context menu — right-click an item, open the Tags submenu, and choose Remove tags. From the toolbar — when the Edit Tags button is pinned to the toolbar, the same option appears in its menu. From the Command Palette — open the Command Palette and search for Remove tags. You can also assign your own keyboard shortcut to it from Settings. The final visible change is the new OneDrive icon. Files now pulls the icon directly from the OneDrive executable, which means the app always has the up-to-date version. As for the fixes, developers resolved the following bugs: Fixed an issue with extracting tar archives. Fixed an issue where the Signatures page would occasionally cause a crash. Fixed an issue where the Play action wasn’t available when a single media file was selected. Fixed an issue where Smart Extract would extract archives to the wrong location when switching tabs. Fixed an issue where tag search excluded folders when grouping by type. Fixed an issue where thumbnails would sometimes fail to refresh after a file was modified. Fixed an issue where a BitLocker-locked drive wasn’t displayed. Developers also revealed what is coming in future updates. Soon, Files Preview will get a new Tree View sidebar, allowing you to display folders in an expandable hierarchy, which is a popular way to browse deeply nested folders. Expect the feature to arrive in the preview channel in upcoming updates. You can download Files from the Microsoft Store (paid version) or its official website (free).
    • Claude on Windows is eating up massive amounts of RAM, with no way to stop it

      By WaltC · Posted

      AI programs are riddled with bugs, and it's often surprising to see how little this is acknowledged. I guess it's all the rabid enthusiasm spurred by the blind investments in it because of the word "intelligence" in the nomenclature. AI has no intelligence at all, in and of itself, and it's just like any other program as it does what its programmers have told it to do, whether they like it or not, whether they realize it or not...
    • Microsoft: Windows 11 KB5094126, KB5093998 finally stops trusting a critical system threat

      By Captain_Eric · Posted

      Got it. Seem like a good improvement. Thanks. But, before we "Add the source to Trusted Sites," how would know if it is trusted or not? Could get messy for not first Knowing" it is clean. See what I mean?
    • AB Download Manager 1.9.0

      By Copernic · Posted

      AB Download Manager 1.9.0 by Razvan Serea AB Download Manager is an open-source, feature-rich download manager designed to accelerate downloads, organize files efficiently, and provide seamless control over downloads. With support for multiple connections, resume capability, and an intuitive interface, it enhances the downloading experience for users seeking speed and reliability. The software integrates with various browsers, enabling quick link grabbing and batch downloading. It supports HTTP, HTTPS, and FTP protocols, ensuring broad compatibility with different file sources. Users can schedule downloads, set speed limits, and categorize files automatically for better organization. AB Download Manager is lightweight yet powerful, making it a great alternative to proprietary download managers. Its open-source nature allows developers to contribute, customize, and improve the software as needed. Whether you're downloading large files, managing multiple downloads at once, or seeking an ad-free experience, this tool offers a practical and efficient solution. Key features of AB Download Manager: Multi-Connection Support – Accelerates downloads by splitting files into multiple segments. Resume Capability – Allows paused or interrupted downloads to be resumed without starting over. Batch Downloading – Supports downloading multiple files at once for improved efficiency. Browser Integration – Captures download links directly from browsers for seamless operation. HTTP, HTTPS, and FTP Support – Ensures compatibility with a wide range of file sources. Download Scheduling – Enables users to automate downloads at specific times. Speed Limiting – Lets users control bandwidth usage for optimized performance. File Categorization – Automatically organizes downloaded files into designated folders. User-Friendly Interface – Simple and intuitive design for easy navigation. Cross-Platform Compatibility – Works on multiple operating systems. Ad-Free Experience – No intrusive ads or tracking for a clean user experience. AB Download Manager 1.9.0 changelog: Added Czech language support User-friendly error messages for download errors (#1252) An option to remember the last selected queue and quickly add downloads to it by long-clicking the Add button ( #1246) An option to export/import downloads using JSON format A Download button on the multi-download page for cases where users do not want to start downloads without queue processing (#1247) The app now includes a logger that can be enabled using a command-line flag (#1226) Startup errors are now logged automatically to help diagnose initialization issues Changed The default unqueued "Max Concurrent Downloads" value has been changed from "Unlimited" to 3 (This can be customized in the app settings) Improved Updated translations Added an indicator on the Android main page when resume is not supported (#1248) Extract the file name from the download link as a fallback when no response information is available (#1209) Minor UI/UX improvements Download: AB Download Manager 1.9.0 | Portable | ~80.0 MB (Open Source) Download: ARM64 | Portable ARM64 | Android Links: AB Download Manager Website | Github Page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware

  • Recent Achievements

    • First Post
      DragonOfMercy earned a badge
      First Post
    • First Post
      bella52 earned a badge
      First Post
    • Reacting Well
      Techinmay earned a badge
      Reacting Well
    • Collaborator
      WndSks went up a rank
      Collaborator
    • One Month Later
      Sopa flores earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      495
    2. 2
      PsYcHoKiLLa
      208
    3. 3
      +Edouard
      155
    4. 4
      Steven P.
      84
    5. 5
      FloatingFatMan
      72
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!