Jquery POST submitting blank variables

Question

I've been staring at this for far too long and just can't figure out what's wrong. I'm attempting to pull form data from a jquery form in javascript and then send it off to a php page which posts it to a mysql server. Here's my code:

"index2.html" (just the form page)

<title>Login Test</title>
</head>
<body>

<div data-role="page">
<div data-role="header">
    <h1>Login</h1>
</div>

<div data-role='content'>

    <form id="testform" action="/ajaxtest/userInfo2.php">
    <label for="name" class="ui-hidden-accessible">Name:</label> 
    <input type="text" name="usr" placeholder="Username"/>
    <label for="password" class="ui-hidden-accessible">Age :</label> 
    <input type="text" name="age" placeholder="Password"/>
    <button id="sub">Submit</button>
    </form>

</div>

</div>
</body>

Next is "my_script.js" which is properly included in "index2.html"

$("#sub").click( function() {
event.preventDefault();
 $.post( "/ajaxtest/userInfo2.php", 
         $.(#testform).serializeArray() 
  );
});

And lastly "userInfo2.php" which is the php page that submits the data to my table

<?php
$conn = mysql_connect('localhost', 'root', 'root');
$db = mysql_select_db('myDatabase');
$name = $_POST['usr'];

mysql_query("INSERT INTO ajaxtest (name) VALUES ('$name')");

?>

It should be known that my table only has one field: "name". I was just trying to get one field to work and then continue expanding. Every time that I try and test this, it prints "undefined" on my userInfo2.php page and inserts a blank name into my table.

I tried throwing a GET line into my php to retrieve the same variable POST would, and that worked. It added the correct name to the table but still printed "undefined". However, I still want the POST to work...

I really hope it's just something small that I've overlooked, but thanks in advance for the help!

You are using [an **obsolete** database API](http://stackoverflow.com/q/12859942/19068) and should use a [modern replacement](http://php.net/manual/en/mysqlinfo.api.choosing.php). You are also **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** that a modern API would make it easier to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. — Quentin, Jan 18 '13 at 16:50
why are you serializing that array? can't you just submit it? like this: `$('#testform').submit()`. btw: you don't have the selector in apostrophes — macino, Jan 18 '13 at 16:53
Your labels are written incorrectly. The `for=` attribute should be identical to the `id=` attribute of the corresponding input element. — Blazemonger, Jan 18 '13 at 16:55

score 2 · Answer 1 · answered Jan 18 '13 at 16:51

2

Your select is wrong

$.(#testform)

should be

$('#testform')

And you should be passing in the event argument

$("#sub").click( function(event) // <-- here

answered Jan 18 '13 at 16:51

wirey00

33,517
7
54
65

I corrected all of the errors pointed out (including "$('#testform') and adding "event" as a param, as well as fixing my labels in my form) but I'm still having the exact same problem. Blank name inserted into the table and "undefined" being printed. Any other ideas? – Sam Johnson Jan 18 '13 at 17:17
instead of using `.serailizeArray()`.. use `.serialize()`.. it will give you a name:value pair instead of an array of [Name: user,Value: value] – wirey00 Jan 18 '13 at 17:37

Jquery POST submitting blank variables

1 Answers1