Undefined result in MYSQL Table

Question

I am trying to add information to a MYSQL table using ajax. If I go direct to the insert page it works fine, but as soon as I pass the variables through the ajax code, the results entered in to the database table all say undefined instead of giving their actual value.

HTML CODE

  <form action="social.php" method="POST" class="submit">
    <div id="facebook">
    <div class="row">
      <input name="facebook" type="text" id="facebook" placeholder="Add Your Facebook Link" size="50" value="<?php echo "$facebook"; ?>">
      </div>
    </div>
    <div id="twitter"><input name="twitter" id="twitter" type="text" placeholder="Add Your Twitter Link" size="50"  value="<?php echo "$twitter"; ?>"></div>
    <div id="googleplus"><input name="googleplus" id="googleplus" type="text" placeholder="Add Your Google + Link" size="50" value="<?php echo "$googleplus"; ?>"></div>
    <div id="linkedin"><input name="linkedin" type="text" id="linkedin" placeholder="Add Your Linkedin Link" size="50" value="<?php echo "$linkedin"; ?>"></div>
    <div id="socialsubmitbutton">
    <input type="hidden" name="usern" id="usern" value="<?php echo "$usern"; ?>" />
    <input type="submit" name="button" id="button" value="Submit">
    </div>
    </form>

Javascript / Ajax

   <script type"text/javascript">
    $(document).ready(function(){
$('form.submit').submit(function () {
   var usern = $(this).find('.usern').attr('value');
   var facebook = $(this).find('.facebook').attr('value');
   var googleplus = $(this).find('.googleplus').attr('value');
var linkedin = $(this).find('.linkedin').attr('value');
var twitter = $(this).find('.twitter').attr('value');
    // ...
    $.ajax({
        type: "POST",
        url: "social.php",
        data: "usern="+ usern +"& facebook="+ facebook +"& googleplus="+ googleplus +"& linkedin="+ linkedin +"& twitter="+ twitter,
        success: function(){
            $('form.submit').hide(function(){$('div.success').fadeOut();});

        }
    });
return false;
});
  });
</script>

PHP

     include 'db.php';
$usern        = htmlspecialchars(trim($_POST['usern']));
$facebook        = htmlspecialchars(trim($_POST['facebook']));
$twitter        = htmlspecialchars(trim($_POST['twitter']));
$linkedin       = htmlspecialchars(trim($_POST['linkedin']));
$googleplus        = htmlspecialchars(trim($_POST['googleplus']));


$addClient  = "INSERT INTO settings (username, facebook, googleplus, linkedin, twitter) VALUES ('$usern', '$facebook', '$googleplus', '$linkedin', '$twitter')";
mysql_query($addClient) or die(mysql_error());

Ravi Dhoriya ツ · Answer 1 · 2014-04-26T12:30:30.940

1

Remove spaces between parameters;

Change

data: "usern="+ usern +"& facebook="+ facebook +"& googleplus="+ googleplus +"& linkedin="+ linkedin +"& twitter="+ twitter,
                         ^--remove                ^--remove                    ^--remove                ^--remove

to

data: "usern="+ usern +"&facebook="+ facebook +"&googleplus="+ googleplus +"&linkedin="+ linkedin +"&twitter="+ twitter,

EDIT

and also you need to find element by its name attribute

var usern = $(this).find("[name=usern]").val();
var facebook = $(this).find("[name=facebook]").val();
var googleplus = $(this).find("[name=googleplus]").val();
var linkedin = $(this).find("[name=linkedin]").val();
var twitter = $(this).find("[name=twitter]").val();

edited Apr 26 '14 at 12:30

answered Apr 26 '14 at 12:04

Ravi Dhoriya ツ

4,435
8
37
48

did u tried using `var usern = $('#usern').val(); var facebook = $('#facebook').val(); var googleplus = $('#googleplus').val(); var linkedin = $('#linkedin').val(); var twitter = $('#twitter').val();` – Ravi Dhoriya ツ Apr 26 '14 at 12:16
Ok i tried the edit, if i use the first one, it still says undefined, if i use the second one, then nothing is entered in to the tables – user2516043 Apr 26 '14 at 12:19
Ah, finally i got the problem. You have used multiple IDs. which is invalid. So you might need to find element by its name itself. Anyhow, I've updated my answer. – Ravi Dhoriya ツ Apr 26 '14 at 12:29

score 1 · Accepted Answer · edited May 23 '17 at 12:11

In tis piece of code:

...
var usern = $(this).find('.usern').attr('value');
var facebook = $(this).find('.facebook').attr('value');
var googleplus = $(this).find('.googleplus').attr('value');
var linkedin = $(this).find('.linkedin').attr('value');
var twitter = $(this).find('.twitter').attr('value');
...

you are selecting entities that have class "usern", "facebook", etc. You actually want to select entities by name, so the selectors should be like this:

...
var usern = $(this).find("[name='usern']").attr('value');
var facebook = $(this).find("[name='facebook']").attr('value');
...

Also, if you want to retrieve the current value of the inputs, you should use .val() instead of .attr('value'), as explained here

...
var usern = $(this).find("[name='usern']").val();
var facebook = $(this).find("[name='facebook']").val();
...

EDIT:

I would suggest, too, that instead of constructing your call like this:

$.ajax({
    type: "POST",
    url: "social.php",
    data: "usern="+ usern +"& facebook="+ facebook +"& googleplus="+ googleplus +"& linkedin="+ linkedin +"& twitter="+ twitter,
    success: function(){
        $('form.submit').hide(function(){$('div.success').fadeOut();});

    }
});

You do it like this, as this is way more readable and less error-prone:

$.ajax({
    type: "POST",
    url: "social.php",
    data: {
        usern : usern,
        facebook : facebook,
        googleplus : googleplus,
        linkedin : linkedin,
        twitter : twitter
    },
    success: function(){
        $('form.submit').hide(function(){$('div.success').fadeOut();});

    }
});

Make sure you have `"` quotes within `find()`. – Rahil Wazir Apr 26 '14 at 12:14 — Rahil Wazir, Apr 26 '14 at 12:14

score 0 · Answer 3 · answered Apr 26 '14 at 12:06

You don't have the right syntax to pass your data :

data: "usern="+ usern +"& facebook="+ facebook +"& googleplus="+ googleplus +"& linkedin="+ linkedin +"& twitter="+ twitter,

become

data: {'usern': usern,'facebook': facebook,'googleplus': googleplus, 'linkedin': linkedin, 'twitter': twitter},

Undefined result in MYSQL Table

3 Answers3