php variable в запросе jquery.ajax

Question

У меня есть форма в php-файле, которая принимает введенные пользователем значения и отправляет данные в файл .txt.

Теперь он отлично работает, когда форма заполнена, нажата кнопка «отправить», и пользователь отправляется на страницу «подтверждение/завершение», в то время как полученные данные помещаются в файл .txt.

Что я хочу сделать, это использовать ajax и jquery, чтобы иметь форму => завершено/подтверждено без отправки на другую страницу.

Проблема заключается в том, что пользовательские данные теперь не передаются в TXT-файл.

PHP: (confirmation.php)

<?php 
    $color = $_POST['color']; 
    $fp = fopen('userdata.txt', 'w'); 
    $valstring = "What Color: " . $color . "\r\n"; 
    fwrite($fp, $valstring); 
    fclose($fp); 
?> 

AJAX/Jquery: (кнопка нажата от form.php)

$(document).ready(function() { 

var cir = { 
    load: $('<div />', { class: 'loading' }), 
    contain: $('#contain') 
} 

$('input[type="submit"]').on('click', function(e) { 
e.preventDefault(); 

    $.ajax({ 
     url: 'confirmation.php', 
     type: 'POST', 
     beforeSend: function() { 
      cir.contain.append(cir.load); 
     }, 
     success: function(data) { 
      cir.contain.html(data); 
     } 
    }); 
}); 

}); 

При использовании Аякса над файлом userdata.txt только имеет What Color: вошел в него. Значение $color, выбранное пользователем, не было распознано.

Я знаю, что код работает без ajax, но я хотел бы, если возможно, использовать метод ajax (без обновления страницы).

Заранее благодарим за любую помощь.

Answer 1

Вы должны установить параметр data в вашем АЯКС вызов, что-то, как это должно работать:

<form> 
    <select name="color" id="color"> 
     <option value="Red">Red</option> 
     <option value="Green">Green</option> 
    </select> 
    <select id="age"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
    </select> 
    <input type="text" id="name" /> 
    <input type="submit" value="SEND" /> 
</form> 

$('input[type="submit"]').on('click', function(e) { 
    $.ajax({ 
    url:'confirmation.php', 
    type:'POST', 
    // get the selected values from 3 form fields 
    data:'color=' + $('#color').val() + 
      '&age=' + $('#age').val() + 
      '&name=' + $('#name').val(), 
    success:function(data) { 
     // ... 
    } 
    }); 
    return false; 
}); 

Вы, вероятно, следует прочитать больше о jQuery.ajax

Answer 2

вы не отправлять какие-либо данные в вашем АЯКС должности, по этой причине переменных $ цветов пусто в попытке confirmation.php это изменить:

$.ajax({ 
    url: 'confirmation.php', 
    type: 'POST', 
    beforeSend: function() { 
     cir.contain.append(cir.load); 
    }, 
    success: function(data) { 
     cir.contain.html(data); 
    } 

с:

var formColor = $("#colorId").val(); //where ColorId it's the color input type ID 
$.ajax({ 
    url: 'confirmation.php', 
    type: 'POST', 
    data: { color: formColor }, 
    beforeSend: function() { 
     cir.contain.append(cir.load); 
    }, 
    success: function(data) { 
     cir.contain.html(data); 
    }