-1

I have a user registration form in my jQuery mobile app but when I submit the form via an $.ajax call it inserts only a blank row and the error_log says:

[01-Dec-2013 13:27:13] PHP Notice:  Undefined index:  fname in /home2/hedonsof/public_html/tcob/php/register.php on line 10
[01-Dec-2013 13:27:13] PHP Notice:  Undefined index:  lname in /home2/hedonsof/public_html/tcob/php/register.php on line 11
[01-Dec-2013 13:27:13] PHP Notice:  Undefined index:  username in /home2/hedonsof/public_html/tcob/php/register.php on line 12
[01-Dec-2013 13:27:13] PHP Notice:  Undefined index:  password in /home2/hedonsof/public_html/tcob/php/register.php on line 13
[01-Dec-2013 13:27:13] PHP Notice:  Undefined index:  email in /home2/hedonsof/public_html/tcob/php/register.php on line 14

My index:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="lib/BlackBerry-JQM-all-1.0.0.css" rel="stylesheet" type="text/css"/>
<link href="style/main.css" rel="stylesheet" type="text/css"/>
<script src="lib/BlackBerry-JQM-all-1.0.0.js" type="text/javascript"></script>
<script src="ui/jquery.ui.map.js" type="text/javascript"></script>
<script src="ui/jquery.ui.map.services.js" type="text/javascript"></script>
<script src="ui/jquery.ui.map.extensions.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src=http://maps.googleapis.com/maps/api/js?sensor=false type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="landing">
  <div data-role="header"> </div>
  <div data-role="content">
    <div id="map_
    canvas" style="height:600px"> </div>
    <div id="info"> </div>
  </div>
  <div data-role="footer">
    <div data-role="actionbar"> <a id="help" data-role="tab"> <img src="img/ic_help.png"/>
      <p>Help</p>
      </a> <a id="chat" data-role="tab"> <img src="img/ic_textmessage.png"/>
      <p>Chat</p>
      </a> <a id="add" data-role="tab" href="#add"> <img src="img/ic_add.png"/>
      <p>Add </p>
      </a> <a id="settings" data-role="tab" href="#register"> <img src="img/Core_applicationmenu_icon_settings.png" alt="" />
      <p>Settings</p>
      </a> </div>
  </div>
</div>
<div data-role="page" id="register">
  <div data-role="header"> </div>
  <div data-role="content">
    <div class="BB10Container">
      <form id="adduser">
<label for="fname">First Name</label>
        <input type="text" name="fname" id="fname" placeholder="John"/>
        <label for="lname">Last Name</label>
        <input type="text" name="lname" id="lname" placeholder="Doe"/>
        <label for="username">Username</label>
        <input type="text" name="username" id="username" placeholder="Username"/>
        <label for="basic">Password</label>
        <input type="password" name="password" id="password" placeholder="Password"/>
        <label for="verpass">Repeat Password</label>
        <input type="password" name="verpass" id="verpass" placeholder="Password"/>
        <label for="regemail">Email</label>
        <input type="email" name="email" id="email" placeholder="your@email.com"/>
        <input type="submit" data-role="button" data-inline="true" data-icon="check" value="Submit" id="regsubmit">
</form>

    </div>
    <div id="info"> </div>
  </div>
  <div data-role="footer">
    <div data-role="actionbar"> <a id="help" data-role="tab"> <img src="img/ic_help.png"/>
      <p>Help</p>
      </a> <a id="chat" data-role="tab"> <img src="img/ic_textmessage.png"/>
      <p>Chat</p>
      </a> <a id="add" data-role="tab" href="#add"> <img src="img/ic_add.png"/>
      <p>Add </p>
      </a> <a id="settings" data-role="tab" href="#settings"> <img src="img/Core_applicationmenu_icon_settings.png" alt="" />
      <p>Settings</p>
      </a> </div>
  </div>
</div>
</div>
<script type="text/javascript">

 $(document).ready(function() {
    $("#regsubmit").click(function(){

        var formData = $("#adduser").serialize();
 alert(formData);   
        $.ajax({
            type: "POST",
            url: "register.php",
            cache: false,
            data: fname: fname,
                  lname: lname,
                  username: username,
                  password: password,
                  email: email,
            success: onSuccess
        });

        return false;
    }); 
 });

 function onSuccess(data, status)
{
    alert('Success');
}
</script>
</body>
</html>

My PHP

<?php
require('connect.php');
ini_set('display_errors', 'On');
error_reporting(E_ALL);
try{
$db = mysql_connect($host, $dbusername, $password ) or die(mysql_error());
    mysql_select_db($db_name) or die(mysql_error());

    // Note: You need to verify the data coming in isn't harmful, this SQL pretty much puts anything into the database so make sure to change this!
        $fname = $_POST['fname'];
        $lname =$_POST['lname'];
        $username = $_POST['username'];
        $password = $_POST['password'];
        $email = $_POST['email'];

        mysql_query("INSERT INTO members (fname, lname, username, password,email) VALUES ('$fname', '$lname','$username','$password','$email')");
        mysql_close($db);
        echo "SUCCESS";
    }
    catch(Exception $e)
    {
        echo $e->getMessage();
        // Note: Log the error or something
    }
?>
RapsFan1981
  • 1,177
  • 3
  • 21
  • 61
  • Does this answer your question? ["Notice: Undefined variable", "Notice: Undefined index", and "Notice: Undefined offset" using PHP](https://stackoverflow.com/questions/4261133/notice-undefined-variable-notice-undefined-index-and-notice-undefined) – yivi Feb 29 '20 at 16:36

3 Answers3

2

You are sending blank values in your data. You have defined your data field for the $.POST as

data: fname: fname,
      lname: lname,
      username: username,
      password: password,
      email: email,

but you have never set the value of the parameters fname,lname,etc. Meaning, when you say fname: fname -- what is the value of fname on the right side of the colon? Also, posted further down, the argument list needs to be wrapped in a {}. You can see an example of this on the jQuery .ajax() documentation page.

$.ajax({
  type: "POST",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})

However, to solve your issues, just send the serialized form data as your post object

data: formdata

This will send the serialized form that you have already performed in with the POST.

Tommy
  • 39,592
  • 10
  • 90
  • 121
1

The data you are POSTing to register.php from your Ajax call needs to be a single JSON like this (notice the added {} around the fields):

data: {fname: fname,
lname: lname,
username: username,
password: password,
email: email},

From this change you wil be able to access the fields inside the $_POST associative array. Which should address the PHP error.

Jason Sperske
  • 29,816
  • 8
  • 73
  • 124
0

You may also want to check out http://api.jquery.com/serialize/ this will automcatically send all form elements in the form as key value pairs in the $_POST request

Lizard
  • 43,732
  • 39
  • 106
  • 167
  • He is already using the .serialize() function, he just isn't actually doing anything with the results other than alerting them to the screen. – Tommy Dec 01 '13 at 20:55