使用JavaScript获取表单数据并使用Ajax发送数据 [英] Getting form data using JavaScript and sending data with Ajax

问题描述

编辑：找到问题。将名称=demo_name更改为我的表单上的项目id =demo_name修复它。感谢@Jill

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

我试图使用jquery的ajax能力将联系表单数据插入MySQL数据库。我是新的在这里，它的一部分工作，但数据插入到数据库作为未定义，而不是输入的值，如名称，电话等。有人可以帮助我查明可能是什么原因吗？ （部分在斯洛伐克，但我把重要的位翻译成英语）

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页面（只是表单段）：

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：

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

推荐答案

你应该有 dataString 在此表单下：

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

这篇关于使用JavaScript获取表单数据并使用Ajax发送数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！