Отправка идентификатора через формы ajax

Ответ 1

Чистое отправляет данные в виде пар map.. (Key : value ) при отправке на сервер.

Вместо этого

data: "checkIn="+$(this).val(),

Попробуйте отправить его таким образом

data: { "checkIn" :  $(this).val() } ,

ИЗМЕНИТЬ

Для выполнения этой логики вы не должны использовать скрытые поля ввода. Я бы предпочел использовать HTML5 data- * attributes, чтобы выполнить эту работу. Это также передает проверку HTML...

Предположим, что кнопка и форма одна ниже другой. Затем вы можете дать кнопке атрибут данных button-1 и select-1 для соответствующий select..

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);
            }
        });
    });
});​

Я написал большую часть логики в качестве комментариев в коде.

Ответ 2

Итак, из моего понимания того, что вы спрашиваете здесь, у вас есть несколько экземпляров этого HTML для разных экзаменационных комнат? Если это так, дайте либо кнопку, либо родительскую оболочку идентификатор, который вы хотите, который каким-то образом связывает его с строкой в ​​базе данных, которую вы пытаетесь обновить. Вам не нужно скрытое поле, просто дайте кнопке атрибут данных с ключевым ключом, который вам нужен. Для этого примера позвоним ему 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>

Нажав кнопку, возьмите идентификатор родительских оберток:

$('.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.

Ответ 3

Я бы написал его как:

post_data = $(this).val();

$.ajax({
    type: "POST",
    url: "changeloc.php",
    data: "checkIn=" + post_data,
    success: function(){
      $('.checkIn').css("display","none");
      $('.locationSelect').show();
    }
});

Ответ 4

Я постоянно работаю с динамическими формами, и я настоятельно рекомендую вам воспользоваться атрибутами данных для элементов 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>

Надеюсь, это поможет! У меня есть ощущение, что вы пишете сырой PHP, если это так, я рекомендую вам проверить некоторые рамки OOP. (Личный fave: laravel)

Ответ 5

Почему бы просто не дать каждому набору форм-элементов имя массива?   

<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>

Теперь серверы будут иметь массив, например:   

$valueOfLocationSelect1 = $_POST['locationSelect'][1];

Перфорации, которые помогают