使用JavaScript獲取表單數據並使用Ajax發送數據

Question

編輯：發現問題。將name =「demo_name」和我的表單上的這些項目更改爲id =「demo_name」修復了它。謝謝@Jill

我想使用jQuery的ajax能力插入聯繫表格數據到MySQL數據庫。我是新來的，這是部分工作，但數據作爲'未定義'插入到數據庫中，而不是像名稱，電話等輸入的值。有人可以幫助我找出可能導致它的原因嗎？ （部分在斯洛伐克，但我翻譯成英文的重要位）

html頁面（只是形式段）：

<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腳本：

<?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()); 
} 
?> 

Answer 1

你應該有dataString在這種形式下：

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

Answer 2

更可取的方法：

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