10

我有几个表单元素,当点击更新数据库并消失时。

起初,我有一个显示签入的按钮。单击它后,数据库将更新,并显示一个下拉列表来代替按钮。在下拉列表中,有一些位置供用户选择,它们具有相应位置编号的值,单击更新数据库即可。最后一个选项被标记为签出,单击它后,数据库应该最后一次更新,然后应该出现红色文本说签出。

问题是,上述过程有多组(意味着有许多 Check In 按钮,它们变成选择然后读取Checked Out,它们都单独工作)。所以我需要一种在更新数据库的同时将每个集合的 id 传递给数据库的方法。我在想每个按钮下面的隐藏字段,它填充了 id,然后当单击Check In按钮时,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>

我不确定我的解决方案是否可行,因此请随时提出其他解决方案。如果您需要任何其他详细信息,请尽管询问!

感谢您的任何帮助!

4

5 回答 5

9

发送到服务器时,将数据以map..对的形式发送会更简洁。(Key : value )

而不是这个

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

尝试以这种方式发送

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

编辑

要执行此逻辑,您首先不需要使用隐藏的输入字段。我更喜欢使用HTML5 data-* 属性来完成工作。这也通过了 HTML 验证...

让我们假设按钮和表单在另一个之下。然后你可以给按钮一个名为button-1的数据属性 和对应选择的select-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);
            }
        });
    });
});​

我已将大部分逻辑编写为代码中的注释。

于 2012-10-25T19:55:20.133 回答
5

因此,根据我对您在此处提出的问题的理解,您在不同的考场中拥有该 HTML 的多个实例?如果是这种情况,请为按钮或父包装器提供您想要的 id,以便以某种方式将其与您尝试更新的数据库中的行相关联。您不需要隐藏字段,只需为按钮提供带有所需 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 中发送的第二个数据值确定您要更新的组。

于 2012-10-29T21:18:33.127 回答
4

我会把它写成:

post_data = $(this).val();

$.ajax({
    type: "POST",
    url: "changeloc.php",
    data: "checkIn=" + post_data,
    success: function(){
      $('.checkIn').css("display","none");
      $('.locationSelect').show();
    }
});
于 2012-10-29T18:07:16.453 回答
3

我一直在使用动态表单,我强烈建议您利用 HTML 元素的数据属性。

从 PHP 中的循环生成的示例 HTML:

<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 框架。(个人最爱:laravel)

于 2012-11-02T16:16:02.110 回答
0

为什么不简单地给每组表单元素一个数组名呢?

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

也许有帮助

于 2012-11-03T21:51:42.277 回答