Отправка 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, что помогает