Отправьте данные из формы и покажите полученные в другом div с помощью jQuery ajax

Question

Отправьте данные из формы и покажите полученные в другом div с помощью jQuery ajax

У меня есть небольшая тестовая php-страница, на которой я хочу отправить форму с радиомодулями и флажками в process.php, после чего результат будет отправлен обратно и показан в #content_result на той же странице без обновления страницы. Я пытался использовать JQuery Ajax, но ничего не произошло, когда я нажал кнопку подтверждения.

Проблема решена, когда я изменил что-то в process.php 🙂

Вот мой код index.php:

<!Doctype HTML>
<html>
<head>
<title>Test</title>
<meta charset="utf-8"/>
<script src="js/jquery-3.2.1.min.js"></script>
</head>

<body>
<form action="xuly.php" method="get" id="fil_form">
<input type="radio" name="type" value="numberic" id="type_num"/><label>Numberic Type</label><br>
<input type="radio" name="type" value="character" id="type_char"/><label>Character Type</label><br>
<input type="checkbox" name="zerotonine" value="zero" id="check_zero"/><label>From 0 to 9</label><br>
<input type="checkbox" name="evennumberic" value="even" id="check_even"/><label>Even Number</label><br>
<input type="checkbox" name="oddnumberic" value="odd" id="check_odd	"/><label>Odd Number</label><br>
<input type="submit" name="submit_btn" id="submit_btn" value="Submit" />
</form>
<div id="content_result" style="margin-left:5px; width: 990px; min-height: 600px; border:1px solid #000; float:left;">
</div>
<script type="text/javascript">
$(document).ready(function(){
var formsubmit = $("#submit_btn");
formsubmit.click(function(event){
event.preventDefault();
var data = $('form#fil_form').serialize();
$.ajax({
type : 'GET',
url : 'process.php',
data : data,
success : function(data)
{
$('#content_result').html(data);
}
});
});
});
</script>
</body>
</html>

2

ajax fixed html jquery php

Решение

По вопросам рекламы [email protected]

Accepted Answer

Отладка путем добавления print_r($_GET);

<?php
// if(isset($_GET['submit_btn'])){ // remove this !!!
if($_GET['type']=='numberic'){
if(isset($_GET['zerotonine'])){
echo '0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9';
}elseif(isset($_GET['evennumberic'])){
echo '0 - 2 - 4 - 6 - 8';
}elseif(isset($_GET['oddnumberic'])){
echo '1 - 3 - 5 - 7 - 9';
}
else{
echo '0 - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9<br>';
echo '0 - 2 - 4 - 6 - 8<br>';
echo '1 - 3 - 5 - 7 - 9<br>';
}
}elseif($_GET['type']=='charactic'){
if(isset($_GET['zerotonine'])){
echo 'Zero - One - Two - ... - Eight - Nine';
}elseif(isset($_GET['evennumberic'])){
echo 'Zero - Two - Four - Six - Eight';
}elseif(isset($_GET['oddnumberic'])){
echo 'One - Three - Five - Seven - Nine';
}
else{
echo 'Zero - One - Two - ... - Eight - Nine<br>';
echo 'Zero - Two - Four - Six - Eight<br>';
echo 'One - Three - Five - Seven - Nine<br>';
}
}
//	} // end of the if to remove
print_r($_GET); // TODO: remove when above cases are working
?>

0

Другие решения

Ваш код PHP правильный.

Проблема с кодом JavaScript, когда вы отправляете форму, $('form#fil_form').serialize() не включает кнопку отправки вместе с другими значениями ввода.

В вашем коде первое, что вы делаете, проверяете submit_btn isset($_GET['submit_btn']), но submit_btn не входит в массив!

Решение может быть одним из следующих,

Вместо тестирования $_GET['submit_btn'], проверьте, если GET пуст или нет.

ИЛИ ЖЕ

добавлять submit_btn введите в массив GET, изменив этот код:

var data = $('form#fil_form').serialize();

Для того, чтобы:

var data = $('#fil_form').serializeArray();

data.push({ name: 'submit_btn', value: 'submit_btn' });

1

У вас неверный идентификатор для формы в вашем селекторе JS:

Изменить это:

 var data = $('form#fil_form').serialize();

К этому:

 var data = $('#fil_form').serialize();

Это первое, что я заметил. Если это все еще не работает, тогда используйте forData() JS объект, чтобы получить все элементы формы.

0

Источник