Отправка id через формы ajax
у меня есть несколько элементов формы, которые при нажатии обновляют базу данных и исчезают.
сначала у меня есть кнопка, которая читает Check In. При нажатии на нее база данных обновляется и вместо кнопки отображается раскрывающийся список. В раскрывающемся списке есть местоположения для выбора пользователем, которые имеют значения соответствующего местоположения-номера, которые при нажатии кнопки обновить базу данных. Последняя опция помечена как Check Out, и при нажатии на нее предполагается база данных обновляться в последний раз, а затем должен появиться красный текст с надписью "проверено".
проблема в том, что существует несколько наборов вышеуказанного процесса (это означает, что есть много кнопок регистрации, которые превращаются в selects, а затем читают Проверил, которые работают по отдельности). Поэтому мне нужен способ передать идентификатор каждого набора в базу данных одновременно с обновлением базы данных. Я думал о чем-то вроде скрытого поля под каждой кнопкой, которое было заполнено идентификатор, а затем, когда Регистрация кнопка была нажата, ajax отправит скрытое поле с ним?
вот мой html:
<button class="checkIn">Check In</button>
<form method='post' class='myForm' action=''>
<select name='locationSelect' class='locationSelect'>
<option value='1'>Exam Room 1</option>
<option value='2'>Exam Room 2</option>
<option value='3'>Exam Room 3</option>
<option value='4'>Exam Room 4</option>
<option value='CheckOut'>Check Out</option>
</select>
</form>
и вот jquery
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.locationSelect').hide();
$('.finished').hide();
});
$('.checkIn').click(function(){
$e = $(this);
$.ajax({
type: "POST",
url: "changeloc.php",
data: "checkIn="+$(this).val(),
success: function(){
$('.checkIn').css("display","none");
$('.locationSelect').show();
}
});
});
$('.locationSelect').change(function(){
$e = $(this);
$.ajax({
type: "POST",
url: "changeloc.php",
data: "locationSelect="+$(this).val(),
success: function(){
}
});
});
$('.locationSelect option[value="CheckOut"]').click(function(){
$e = $(this);
$.ajax({
type: "POST",
url: "changeloc.php",
data: "checkOut="+$(this).val(),
success: function(){
$('.locationSelect').css("display","none");
$('.finished').show();
alert('done');
},
error: function(request){
alert(request.responseText);
}
});
});
</script>
Я не уверен, что мое решение будет жизнеспособным, поэтому, пожалуйста, не стесняйтесь предлагать другие решения. Если вам нужны любые другие детали, то пожалуйста как раз спросите!
Спасибо за любую помощь!
5 ответов
чище отправлять данные как map
.. (Key : value )
пар при отправке на сервер.
вместо
data: "checkIn="+$(this).val(),
попробуйте отправить его таким образом
data: { "checkIn" : $(this).val() } ,
редактировать
для выполнения этой логике вы не нужно использовать скрытые поля ввода в первую очередь.. Я бы предпочел использовать данные HTML5 - * атрибуты чтобы сделать работу.. Это также проходит проверку HTML...
позволяет предположим, что кнопка и форма находятся друг под другом.. Затем вы можете дать кнопке атрибут данных с именем и выбрать-1 для соответствующего выбора..
HTML-код будет выглядеть примерно так..
<button class="checkIn" data-param="button-1">Check In</button>
<form method='post' class='myForm' action=''>
<select name='locationSelect' class='locationSelect' data-param="location-1">
<option value='1'>Exam Room 1</option>
<option value='2'>Exam Room 2</option>
<option value='3'>Exam Room 3</option>
<option value='4'>Exam Room 4</option>
<option value='CheckOut'>Check Out</option>
</select>
</form>
<div class="finished" >
Checked Out
</div>
<button class="checkIn" data-param="location-2">Check In</button>
<form method='post' class='myForm' action=''>
<select name='locationSelect' class='locationSelect' data-param="location-2">
<option value='1'>Exam Room 1</option>
<option value='2'>Exam Room 2</option>
<option value='3'>Exam Room 3</option>
<option value='4'>Exam Room 4</option>
<option value='CheckOut'>Check Out</option>
</select>
</form>
<div class="finished" >
Checked Out
</div>
.....
в JavaScript
$(document).ready(function() {
$('.locationSelect').hide(); // Hide all Selects on screen
$('.finished').hide(); // Hide all checked Out divs on screen
$('.checkIn').click(function() {
var $e = $(this);
var data = $e.data("param").split('-')[1] ;
// gets the id of button (1 for the first button)
// You can map this to the corresponding button in database...
$.ajax({
type: "POST",
url: "changeloc.php",
// Data used to set the values in Database
data: { "checkIn" : $(this).val(), "buttonid" : data},
success: function() {
// Hide the current Button clicked
$e.hide();
// Get the immediate form for the button
// find the select inside it and show...
$e.nextAll('form').first().find('.location').show();
}
});
});
$('.locationSelect').change(function() {
$e = $(this);
var data = $e.data("param").split('-')[1] ;
// gets the id of select (1 for the first select)
// You can map this to the corresponding select in database...
$.ajax({
type: "POST",
url: "changeloc.php",
data: { "locationSelect" : $(this).val(), "selectid" : data},
success: function() {
// Do something here
}
});
});
$('.locationSelect option[value="CheckOut"]').click(function() {
var $e = $(this);
var data = $e.closest('select').data("param").split('-')[1] ;
// gets the id of select (1 for the first select)
// You can map this to the corresponding select in database...
// from which checkout was processed
$.ajax({
type: "POST",
url: "changeloc.php",
data: { "checkOut" : $(this).val(), "selectid" : data},
success: function() {
// Get the immediate form for the option
// find the first finished div sibling of form
// and then show it..
$e.closest('form').nextAll('.finished').first().show();
// Hide the current select in which the option was selected
$e.closest('.locationSelect').hide();
alert('done');
},
error: function(request) {
alert(request.responseText);
}
});
});
});
Я написал большую часть логики в виде комментариев в коде..
Итак, из моего понимания того, что вы спрашиваете здесь, у вас есть несколько экземпляров этого HTML для разных экзаменационных комнат? Если это так, дайте кнопке или родительской оболочке идентификатор, который вы хотите, чтобы каким-то образом связать его со строкой в базе данных, которую вы пытаетесь обновить. Вам не нужно скрытое поле, просто дайте кнопке атрибут данных с ключом id, который вам нужен. Для этого примера давайте назовем его group_1
.
так оберните группу в вашем HTML-код:
<div class='group' id='group_1'>
<button class="checkIn">Check In</button>
<form method='post' class='myForm' action=''>
<select name='locationSelect' class='locationSelect'>
<option value='1'>Exam Room 1</option>
<option value='2'>Exam Room 2</option>
<option value='3'>Exam Room 3</option>
<option value='4'>Exam Room 4</option>
<option value='CheckOut'>Check Out</option>
</select>
</form>
</div>
на кнопке нажмите, возьмите родительские обертки ID:
$('.checkIn').click(function(){
var id = $(this).parent('.group').attr('id');
$.ajax({
type: "POST",
url: "changeloc.php",
data: "checkIn="+$(this).val()+"&group="+id,
success: function(){
$('.checkIn').css("display","none");
$('.locationSelect').show();
}
});
});
затем на стороне сервера обновите свою БД с помощью какой-то логики, которая определяет, какую группу вы обновляете, используя второе значение данных, отправленное в AJAX.
Я бы написал так:
post_data = $(this).val();
$.ajax({
type: "POST",
url: "changeloc.php",
data: "checkIn=" + post_data,
success: function(){
$('.checkIn').css("display","none");
$('.locationSelect').show();
}
});
Я постоянно работаю с динамическими формами и я настоятельно рекомендую вам воспользоваться данными атрибутами HTML-элементов.
пример HTML, сгенерированный из цикла в вашем PHP:
<button class="checkIn" data-group-id='{$group->id}'>Check In</button>
<select name='locationSelect' data-group-id='{$group->id}' class='locationSelect'>
<option value='1'>Exam Room 1</option>
<option value='2'>Exam Room 2</option>
<option value='3'>Exam Room 3</option>
<option value='4'>Exam Room 4</option>
<option value='CheckOut'>Check Out</option>
</select>
в JavaScript:
<script type="text/javascript">
$(function() {
$('.locationSelect').hide();
$('.finished').hide();
});
$('.checkIn').click(function(){
var group_id = $(this).data('group-id'),
$.post('changeloc.php', {checkIn: group_id}, function(){
$(this).hide();
$('.locationSelect[data-group-id="' + group_id + '"').show();
}
});
$('.locationSelect').change(function(){
$.post('changeloc.php', {locationSelect: $(this).val()}, function(){
// Do something here
}
});
$('.locationSelect').change(function(){
if ($(this).val() == 'CheckOut') {
var group_id = $(this).data('group-id');
$.post('changeloc.php', {checkOut: group_id}, function(data){
// If you're getting unexpected behavior do console.log(data);
$('.locationSelect[data-group-id="' + group_id + '"').hide();
$('.finished').show();
alert('done');
}
}
});
</script>
надеюсь, что это помогает! У меня такое чувство, что вы пишете raw PHP, если это так, я рекомендую вам проверить некоторые фреймворки OOP. (Личная любовь: laravel)
почему бы просто не дать каждому набору элементов формы имя массива?
<button name="btn_checkin[1]" class="checkIn">Check In</button>
<form method='post' name="myForm[1]" class='myForm' action=''>
<select name='locationSelect[1]' class='locationSelect'>
<option value='1'>Exam Room 1</option>
<option value='2'>Exam Room 2</option>
<option value='3'>Exam Room 3</option>
<option value='4'>Exam Room 4</option>
<option value='CheckOut'>Check Out</option>
</select>
</form>
Serverside у вас будет массив, например:
$valueOfLocationSelect1 = $_POST['locationSelect'][1];
Perhapes, что помогает