Ajaxから未定義の結果

Question

私はいくつかのフォーム変数をAjaxを使用してPHPページに渡していますが、PHPコードが実行されるとテーブル行は未定義の値で埋められます。

、

AJAX

$(document).ready(function(){ 
$('form.submit').submit(function() { 
var name = $(this).find('.name').attr('value'); 
var address = $(this).find('.address').attr('value'); 
var number = $(this).find('.number').attr('value'); 
var price = $(this).find('.price').attr('value'); 
var deposit = $(this).find('.deposit').attr('value'); 
var product = $(this).find('.product').attr('value'); 
var payment_type = $(this).find('.payment_type').attr('value'); 
var deal_date = $(this).find('.deal_date').attr('value'); 
var install_date = $(this).find('.install_date').attr('value'); 
var installed = $(this).find('.installed').attr('value'); 
var notes = $(this).find('.notes').attr('value'); 
var contract_received = $(this).find('.contract_received').attr('value'); 
// ... 
    $.ajax({ 
     type: "POST", 
     url: "add.php", 
     data: "name="+ name +"& address="+ address +"& number="+ number +"& price="+ price +"& deposit="+ deposit +"& product="+ product +"& payment_type="+ payment_type +"& deal_date="+ deal_date +"& install_date="+ install_date +"& installed="+ installed +"& notes="+ notes +"& contract_received="+ contract_received, 

     success: function(){ 
      $('form.submit').hide(function(){$('div.success').fadeOut();}); 

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

HTML

<form id="submit" name="submit" class="submit"> 
    <input name="name" id="name" type="text" class="form-control" placeholder="Name"/><br /> 
    <input name="address" id="address" type="text" class="form-control" placeholder="Address"/><br /> 
    <input name="number" id="number" type="text" class="form-control" placeholder="Number"/><br /> 
    <input name="price" id="price" type="text" class="form-control" placeholder="Price"/><br /> 
    <input name="deposit" id="deposit" type="text" class="form-control" placeholder="Deposit"/><br /> 
    <input name="product" id="product" type="text" class="form-control" placeholder="Product"/><br /> 
    <input name="payment_type" id="payment_type" type="text" class="form-control" placeholder="Payment"/><br /> 
    <input name="deal_date" id="deal_date" type="text" class="form-control" placeholder="Deal Date"/><br /> 
    <input name="install_date" id="install_date" type="text" class="form-control" placeholder="Install Date"/><br /> 
    <input name="installed" id="installed" type="text" class="form-control" placeholder="Installed"/><br /> 
    <textarea name="notes" id="notes" cols="" rows="" class="form-control" placeholder="Notes"></textarea><br /> 
    <input name="contract_received" id="contract_received" type="text" class="form-control" placeholder="Contract Received"/><br /> 
    <input type="submit" name="button" id="button" value="Submit" /> 
</form> 

を私はフォーム変数を代入し、PHPコードをチェックして、それが正常に動作しますので、私はこの問題は、Ajaxコードであることを考えています

PHP

$name  = htmlspecialchars(trim($_POST['name'])); 
$address  = htmlspecialchars(trim($_POST['address'])); 
$number  = htmlspecialchars(trim($_POST['number'])); 
$price  = htmlspecialchars(trim($_POST['price'])); 
$deposit  = htmlspecialchars(trim($_POST['deposit'])); 
$product  = htmlspecialchars(trim($_POST['product'])); 
$payment_type  = htmlspecialchars(trim($_POST['payment_type'])); 
$deal_date  = htmlspecialchars(trim($_POST['deal_date'])); 
$install_date  = htmlspecialchars(trim($_POST['install_date'])); 
$installed  = htmlspecialchars(trim($_POST['installed'])); 
$notes  = htmlspecialchars(trim($_POST['notes'])); 
$contract_received  = htmlspecialchars(trim($_POST['contract_received'])); 

$addClient = "INSERT INTO DATA (
name, address,number,price,deposit,product,payment_type,deal_date,install_date,installed,notes,contract_recieved)VALUES('$name','$address','$number','$price','$deposit','$product','$payment_type','$deal_date','$installed_date','$installed','$notes','$contract_received')"; 
mysql_query($addClient) or die(mysql_error()); 

Answer 1

あなたはとても難しいです。フォーム全体を送信する場合は、フォームからすべての個別の値を取得する必要はありません。しかし、そうする場合は、encodeURIComponent()を使用して各値を正しくエンコードする必要があります。また、クエリ文字列にスペースを入れないでください。

最も簡単な解決策は、jQueryのフォームをシリアル化し、それを送信することです。

$.ajax({ 
    type: "POST", 
    url: "add.php", 
    data: $('form.submit').serialize(), // or just: data: $(this).serialize(), 
    success: function(){ 
     $('form.submit').hide(function(){$('div.success').fadeOut();}); 
    } 
}); 

これでフォームからすべてのキーと値のペアが正しく送信され、jQueryのもあなたのためのエンコーディングの世話をします。

Answer 2

正しい構文は、上のhttp://api.jquery.com/jQuery.ajax/

data: {name: name, address: address, number: number} 

とそうです。