Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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()); 
} 
?>
share|improve this question
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 Aug 9 '12 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 Aug 9 '12 at 14:53

2 Answers

up vote 1 down vote accepted

You should have dataString under this form:

var dataString = {demo_name: demo_name, demo_age: demo_age, and_so_on: and_so_on};
share|improve this answer
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 :( – Spencer Evans Aug 9 '12 at 14:45
You need as well to replace name="demo_name" with id="demo_name" (and all other occurrences), if you wanna use the # selector. – Jill-Jênn Vie Aug 9 '12 at 14:52
thanks, this did the trick. – Spencer Evans Aug 9 '12 at 15:08
up vote 0 down vote

More preferable way:

var dataString = $("form[name='demo']").serialize();
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.