Отправить форму и вернуть значения с помощью HTML/JQuery/PHP

Question

вам нужна ваша помощь ... Моя домашняя страница имеет 3 divs, #Header, #Content, #Footer. Все остальные страницы открываются внутри div #Content. На одной из этих страниц у меня есть форма с двумя списками выбора и одной кнопкой отправки. Просто нажмите кнопку, а затем верните другую страницу в div #Content, показывая значения, которые я выбираю раньше. Как это:

Происхождения: 1
Судьба является: 1

Но этот код возвращает следующее ...

Notice: Undefined variable: origin in ... 
Notice: Undefined variable: destiny in ... 

Примечание: Это работает, если я не открыть страницу внутри #content DIV

мой Html:

<form id="myform" name="myform" action="values.php" method="POST"> 
    <select id="origin" name="origin"> 
     <option value="0" selected>-- Select Origin --</option> 
     <option value="1">Portugal</option></select> 
    <select id="destiny" name="destiny"> 
     <option value="0" selected>-- Select Destiny --</option> 
     <option value="1">Lisboa</option></select> 
    <input id="btSubmit" name="btSubmit" type="submit" value="search!"> 
</form> 

моя функция:

$(document).ready(function(){ 
    $('#btSubmit').click(function(e) { 
     e.preventDefault(); 
     var url = $('#myform').attr('action'); 
     var method = $('#myform').attr('method'); 
    $.ajax({ 
     type: method, 
     url: url, 
     data: $('#myform').serialize(), 
     success: $('#content').load(url) 
     }); 
    }); 
}); 

моя страница values.php:

<?php 
    if(isset($_POST['origin']) || isset($_POST['destiny'])) 
    { 
     $origin = $_POST['origin']; 
     $destiny = $_POST['destiny']; 
    } 
    echo 'The origin is:' . $origin . '<br>'; 
    echo 'The destiny is:' . $destiny; 
?> 

Answer 1

Вы не должны вызывать load снова - вы уже назвали его в основном с $.ajax и получил Результаты. Так что вам нужно просто отобразить их в content:

success: function (data) { 
    $('#content').html(data); 
} 

Answer 2

Вы должны правильно использовать успех функцию обратного вызова. Примите ответ в методе обратного вызова и установите его в свой div

success: function (data) { 
    $('#content').html(data); 
} 

Кроме того, вы должны выполнить свою операцию с событием отправки формы.

$('form#myform').on('submit', function (e) { 

вместо

$('#btSubmit').click(function(e) { 

Answer 3

Как Андрей упомянул вы должны использовать

success: function (data) { 
    $('#content').html(data); 
} 

, потому что вызов success: $('#content').load(url) запускает новый GET запрос. Когда запрос GET достигает PHP код $_POST не установлен и ваши переменные не инициализируются так что вы получите сообщение от PHP:

Notice: Undefined variable: origin in