У меня есть два ряда флажков. Когда пользователь нажимает на какой-либо отдельный флажок (в определенной строке), я хочу добавить число к моей сумме в PHP. Если он отменит выбор отдельного флажка, я хочу вычесть из общего количества в реальном времени без обновления страницы. Мой вопрос, что происходит в поле данных моего звонка AJAX?
и это правильный способ сделать это?
<input type="checkbox" name="standard_form[]" value="A" onclick="processForm()"> <input type="checkbox" name="premium_form[]" value="B" onclick="processForm()"> <script type="text/javascript"> function processForm() { $.ajax( { type: 'POST', url: 'submit_form.php', data: '', success: function(data) { $('#message').html(data); } } ); } </script>
if(IsChecked('standard_form','A')) { $price += IsChecked('standard_form','A') ? 10 : 0; } return $price ;
Пытаться:
<script type="text/javascript"> function processForm() { $.ajax( { type: 'POST', url: 'submit_form.php', data: { checked_box : $('input:checkbox:checked').val()}, success: function(data) { $('#message').html(data); } } ); } </script>
Вы должны сериализовать форму в объект JS, вот что входит в поле данных. Вот простая функция сериализации, которая может быть улучшена, но даст вам представление
function serializeForm(form) { var obj = {}; for (var i = 0; i < form.elements.length; i++) { var el = form.elements[i]; if (el.name) { if (obj[el.name] && obj[el.name].constructor == Array ) { obj[el.name].push(el.value); } else if (obj[el.name]) { obj[el.name] = [obj[el.name], el.value]; } else { obj[el.name] = el.value; } } } return obj; }
Существует плагин, который позволяет вам отправлять формы с AJAX легко http://jquery.malsup.com/form/ См. JQuery AJAX submit form
Предполагая следующий HTML
<form id="myForm" action="submit_form.php" method="post"> <input type="checkbox" name="standard_form[]" value="A" onclick="processForm()"> <input type="checkbox" name="premium_form[]" value="B" onclick="processForm()"> </form>
Вы можете просто сделать следующее, чтобы форма была отправлена с помощью AJAX
// attach handler to form's submit event $('#myForm').submit(function() { // submit the form $(this).ajaxSubmit(); // return false to prevent normal browser submit and page navigation return false; });
В checkboxes попробуйте onclick="processForm(this)" , затем в JavaScript:
<script type="text/javascript"> function processForm(elm) { $.ajax( { type: 'POST', url: 'submit_form.php', data: elm.name+'='+elm.value, success: function(data) { $('#message').html(data); } } ); } </script>