• 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

    • draw.io Desktop 30.2.4

      By Copernic · Posted

      draw.io Desktop 30.2.4 by Razvan Serea draw.io desktop is a downloadable security-first diagramming application that runs on Windows, MacOS and Linux. Creating diagrams in the desktop app doesn’t need an internet connection. This is useful when you are disconnected or when you must create diagrams in a highly secure environment, where data protection is of the utmost importance. When you use the draw.io desktop app, your diagrams will be stored on your local device. Because this is a stand-alone application, also designed to run offline, there are no interfaces to cloud storage platforms available. Of course, you can still store your diagrams in folders that are synchronised to your cloud storage if you wish. Easy-to-use diagram editor The draw.io apps work just like the office and drawing tools you are used to using. Drag and drop shapes from the shape libraries and drag to draw connectors between them. Drag connectors to add waypoints and set a precise shape and position, or let them reroute automatically. Double click and start typing to add a label to anything. Create tables and swimlane flows with a familiar tool. Style shapes and connectors with customisable palettes, sketch options, fonts and text formatting tools. Search for shapes, including in open-source icon libraries. Use our vast libraries of shapes and templates, organised into logical categories, to create a range of diagrams and infographics. Generate diagrams from text descriptions using our smart templates. Diagram faster with keyboard shortcuts. draw.io Desktop 30.2.4 changelog: Uses electron 42.4.1 Updates to draw.io core 30.2.4. Download: draw.io 64-bit | Standalone ~100.0 MB (Open Source) Download: draw.io 32-bit | ARM64 | ARM64 Standalone Links: draw.io Home Page | Project page @GitHub | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Microsoft will soon allow some users to block Copilot from analyzing their Office files

      By Usama Jawad96 · Posted

      Microsoft will soon allow some users to block Copilot from analyzing their Office files by Usama Jawad Microsoft Purview is a pretty useful data governance, security, and management service that allows customers to gain enhanced visibility and control over their content. It's meant for commercial customers, such as organizations that are storing data at scale. As AI continues to expand and infiltrate every corner of a firm, many are a bit conscious about the technology gaining access to their confidential data. Microsoft is now making a configuration change that will allow such customers to rest easy. Right now, users within an organization have the option to apply Purview sensitivity labels (when available) to secure certain files and label them as such. For example, if you apply the "Confidential" label on an Excel file, the file will be encrypted, and a "confidential" watermark will be applied to it. So, if this file is shared with anyone, they are aware that its access is supposed to be restricted. Up until now, Microsoft was allowing some connected experiences, like its AI services, to analyze files, regardless of their sensitivity label. This is of major concern to most organizations, as a recent example highlighted how confidential emails with data loss prevention (DLP) policies like privacy labels were being uploaded to Copilot for analysis. As such, Microsoft is updating an existing Purview data label sensitivity setting that prevents "some connected experiences that analyze content", from being blocked completely from doing this. The label isn't changing, but the blocking is now being enforced across all connected services (including Copilot and other AI tools), and now extends to Microsoft Word, Excel, and PowerPoint. Files with the label applied already will get this enhancement automatically too once it becomes available. Microsoft has urged IT admins to inform their respective helpdesk and compliance teams, update internal documentation, and review sensitivity labels to ensure that they meet their respective compliance needs. This change is tagged as MC1297982 in the Message Center. General availability is scheduled to begin in a phased manner soon and will complete by the end of next month. That said, it is important to note that this only applies to commercial customers who have a license that allows them to use Purview.
    • Acronyms....

      By Mindovermaster · Posted

      llamas are unruly going haywire in New Guinea.
    • The Persuasion Engine: How Any Business Can Use AI-Powered Neuromarketing —was $28 now free

      By News Staff · Posted

      The Persuasion Engine: How Any Business Can Use AI-Powered Neuromarketing —was $28 now free by Steven Parker Claim your complimentary copy (worth $35) of "The Persuasion Engine: How Any Business Can Use AI-Powered Neuromarketing to Understand and Win Customers" for free, before the offer ends on June 24. Description The Persuasion Engine, by neuromarketing and behavioral science expert Roger Dooley, solves the most pressing challenge faced by every marketer: how to figure out why customers make the decisions they do when 95% of their thought processes occur at an unconscious level. Dooley explains how artificial intelligence democratizes sophisticated neuromarketing tools that were once available only to Fortune 500 companies, making powerful customer insight and persuasion techniques accessible to businesses of any size. The book walks you through the evolution of traditional neuromarketing into ”Neuromarketing 2.0,” where AI-powered tools eliminate the need for expensive lab studies and human behavioral science experts. It offers a comprehensive roadmap for implementing eye tracking, facial coding, biometrics, implicit testing, and advanced AI behavioral techniques that dramatically improve marketing effectiveness while reducing costs and time investment. Inside the book, you’ll find: Revolutionary AI prompting strategies that bring world-class behavioral science expertise to your desktop Practical frameworks for leveraging attention, emotion, credibility, and decision architecture to boost conversions Step-by-step guidance for implementing biometric tools and implicit testing without laboratory resources Advanced techniques for creating scarcity, urgency, and FOMO that drive immediate customer action Comprehensive methods for auditing and enhancing empathy in customer communications Perfect for marketing professionals, business owners, entrepreneurs, and anyone with a stake in customer acquisition and retention, The Persuasion Engine provides actionable strategies that will transform your approach to marketing. Whether you're working on a shoestring or managing enterprise campaigns, you'll discover how to use your customers' non-conscious motivations and create compelling marketing that work on real people in the real world. How to download for free Please ensure you read the terms and conditions to claim this offer. Complete and verifiable information is required in order to receive this free offer. If you have previously made use of these offers, you will not need to re-register. Was $28, but is now FREE | Below free offer link expires on June 24. The Persuasion Engine: How Any Business Can Use AI-Powered Neuromarketing to Understand and Win Customers The below offers are also available for free in exchange for your (work) email: The Vibe Coding Playbook: Building Your Tech Business with AI ($35 Value) FREE - Expires 6/23 The Persuasion Engine: How Any Business Can Use AI-Powered Neuromarketing to Understand and Win Customers ($28 Value) FREE - Expires 6/24 How to Do More with Less: Future-Proofing Yourself in an AI-driven Economy ($28 Value) FREE - Expires 6/30 Cloud Security Fundamentals: Building the Foundations for Secure Cloud Platforms ($131.95 Value) FREE - Expires 7/1 The Complete Free AI Learning: Master ChatGPT, Claude, Gemini & More ($21 Value) FREE How to Build an AI Design Workflow with Gamma ($21 Value) FREE The Ultimate Linux Newbie Guide – Featured Free content Python Notes for Professionals – Featured Free content Learn Linux in 5 Days – Featured Free content Quick Reference Guide for Cybersecurity – Featured Free content We post these because we earn commission on each lead so as not to rely solely on advertising, which many of our readers block. It all helps toward paying staff reporters, servers and hosting costs. Other ways to support Neowin The above deal not doing it for you, but still want to help? Check out the links below. Check out our partner software in the Neowin Store Buy a T-shirt at Neowin's Threadsquad Subscribe to Neowin - for $14 a year, or $28 a year for an ad-free experience Disclosure: An account at Neowin Deals is required to participate in any deals powered by our affiliate, StackCommerce. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through the branded deals site.
    • Microsoft confirms Recycle Bin bug across all versions of Windows

      By sphbecker · Posted

      All versions is correct. The bug appears on any version of Windows with KB5094126 installed. It's a little insane to expect the author to explain that systems that can't possibly have that patch installed, will not experience the bug. If you have any gripe about the title, it would be that it doesn't mention the update at all, but I wouldn't agree with that either. A title is not expected to be a full summery of the article.

  • Recent Achievements

    • Week One Done
      Eurosoft10 earned a badge
      Week One Done
    • One Month Later
      Eurosoft10 earned a badge
      One Month Later
    • One Year In
      Skeet Campbell earned a badge
      One Year In
    • One Month Later
      Sharbel earned a badge
      One Month Later
    • First Post
      BizSAR earned a badge
      First Post

  • Popular Contributors

    1. 1
      +primortal
      589
    2. 2
      +Edouard
      190
    3. 3
      Michael Scrip
      76
    4. 4
      PsYcHoKiLLa
      75
    5. 5
      neufuse
      72
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!