Getting form data using JavaScript and sending data with Ajax

Question

EDIT: Found the issue. Changing name="demo_name" and such items on my form to id="demo_name" fixed it. Thanks @Jill

I'm trying to insert contact form data into a MySQL database using jquery's ajax ability. I'm new at this, and it's partially working, but the data is inserted into the database as 'undefined', not as the values entered such as name, phone, etc. Can someone help me pinpoint what may be causing it? (Partially in slovak, but I translated the important bits to english)

html page (just the form segment):

<div id="demo_form">
    <h2>Order a demo lesson!</h2><p>Na Vaše otázky velmi radi co najskôr zodpovieme.<br /> Prípadná <strong>ukážková hodinu je zdarma</strong> a nezáväzná.</p>
        <form name="demo" action"">
            <fieldset>
                <input type="text" class="text" name="demo_name" onblur="swip (this, '', 'Name *');" onfocus="swip (this, 'Meno *', '');" value="Meno *" />
                <input type="text" class="text" name="demo_age" onblur="swip (this, '', 'Age of child');" onfocus="swip (this, 'Vek dietata', '');" value="Vek dietata" />
                <input type="text" class="text" name="demo_email" onblur="swip (this, '', 'E-mail *');" onfocus="swip (this, 'E-mail *', '');" value="E-mail *" />
                <input type="text" class="text" name="demo_phone" onblur="swip (this, '', 'Phone');" onfocus="swip (this, 'Telefón', '');" value="Telefón" />
                <input type="text" class="text big_input" name="demo_where" onblur="swip (this, '', 'Where did you find out about us?');" onfocus="swip (this, 'Odkial ste sa o nás dozvedeli?', '');" value="Odkial ste sa o nás dozvedeli?" />
                <textarea rows="" cols="" name="demo_text" onblur="swip (this, '', 'Message...');" onfocus="swip (this, 'Text správy...', '');">Text správy...</textarea>


                <input type="submit" class="btn" value="Send" />
            </fieldset> 
        </form>
</div><!-- end: #demo_form -->

javascript/jquery:

$(function() {  
  $(".btn").click(function() {  
    // validate and process form here

    var demo_name = $("input#demo_name").val();  

    var demo_age = $("input#demo_age").val();  

    var demo_email = $("input#demo_email").val();  

    var demo_phone = $("input#demo_phone").val();  

    var demo_where = $("input#demo_where").val();  

    var demo_text = $("input#demo_text").val();  


    var dataString = 'demo_name='+ demo_name + '&demo_age=' + demo_age + '&demo_email=' + demo_email + '&demo_phone=' + demo_phone + '&demo_where=' + demo_where + '&demo_text=' + demo_text;  

$.ajax({  
  type: "POST",  
  url: "../php/demo_register.php",  
  data: dataString,  
  success: function() {

    $('#demo_form').html("<div id='message'></div>");  
    $('#message').html("<h2>Contact Form Submitted!</h2>")  
    .append("<p>We will be in touch soon.</p>")  

  }  
});  
return false;   
  });  
});

php script:

<?php

include("../protected/config.php");
// Connect to server and select databse.
mysql_connect("$host", "$username", "$password")or die("cannot connect"); 
mysql_select_db("$db_name")or die("cannot select DB");

$demo_name=$_POST['demo_name'];
$demo_age=$_POST['demo_age'];
$demo_email=$_POST['demo_email'];
$demo_phone=$_POST['demo_phone'];
$demo_where=$_POST['demo_where'];
$demo_text=$_POST['demo_text'];

// To protect MySQL injection
$demo_name = stripslashes($demo_name);
$demo_age = stripslashes($demo_age);
$demo_email = stripslashes($demo_email);
$demo_phone = stripslashes($demo_phone);
$demo_where = stripslashes($demo_where);
$demo_text = stripslashes($demo_text);

$demo_name = mysql_real_escape_string($demo_name);
$demo_age = mysql_real_escape_string($demo_age);
$demo_email = mysql_real_escape_string($demo_email);
$demo_phone = mysql_real_escape_string($demo_phone);
$demo_where = mysql_real_escape_string($demo_where);
$demo_text = mysql_real_escape_string($demo_text);


$insert = mysql_query("INSERT INTO $tbl_name (name, age, email, phone, kde, text) VALUES ('$demo_name', '$demo_age', '$demo_email', '$demo_phone', '$demo_where', '$demo_text')");

if(!$insert){ 
die("There's a little problem: ".mysql_error()); 
} 
?>

In all honesty, you don't need to do all those .val() declarations. jquery's $.serialize() will create name=val pairs and form a string that looks like name=val&age=val&email=val&phone=val&kde=val&text=val. When it's passed into your PHP File, you still access it with $_POST['name'] etc...so just use var dataString = $('form[name="demo"]').serialize(); — Ohgodwhy
– Ohgodwhy, Commented Aug 9, 2012 at 14:38
@Ohgodwhy I've done this and took out the .val() parts and in the same place put the code you suggested. Now when I submit the form, the string is added to the URL and the data is no longer submitted to my database. Any idea why? — Spencer Evans
– Spencer Evans, Commented Aug 9, 2012 at 14:53
The demo code here is huge - you should really edit the example so it's applicable to other people. — mikemaccana
– mikemaccana, Commented Jul 30, 2014 at 14:49

Jill-Jênn Vie · Accepted Answer · 2012-08-09 14:35:40Z

1

You should have dataString under this form:

var dataString = {demo_name: demo_name, demo_age: demo_age, and_so_on: and_so_on};

answered Aug 9, 2012 at 14:35

Jill-Jênn Vie

1,84119 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Spencer Evans Over a year ago

i changed it to this format and now instead of each value being inserted to the database as a row with every column 'undefined', it's inserting a blank row with no values under any column :(

Jill-Jênn Vie Over a year ago

You need as well to replace name="demo_name" with id="demo_name" (and all other occurrences), if you wanna use the # selector.

Kerem · Accepted Answer · 2012-08-09 15:15:53Z

0

More preferable way:

var dataString = $("form[name='demo']").serialize();

answered Aug 9, 2012 at 15:15

Kerem

11.6k5 gold badges61 silver badges58 bronze badges

Collectives™ on Stack Overflow

Getting form data using JavaScript and sending data with Ajax

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related