Question

我有几个表单元素，点击后更新数据库并消失。

首先，我有一个读取登记的按钮。单击它后，将更新数据库并显示下拉列表以代替按钮。在下拉列表中，有一些供用户选择的位置，这些位置具有相应位置编号的值，在单击更新数据库时。最后一个选项标记为Check Out，点击它后，数据库应该最后一次更新，然后出现红色文本说明Checked Out。

问题是，有多组上述过程（意味着有许多“检入”按钮，这些按钮会变成选择，然后读取已检出，这些按钮都单独工作）。所以我需要的是一种在更新数据库的同时将每个set的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>

我不确定我的解决方案是否可行，所以请随意提出其他解决方案。如果您需要任何其他细节，请询问！

感谢您的帮助！

Answer 1

发送到服务器时，以map .. (Key : value )对的形式发送数据更为清晰。

而不是这个

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

尝试以这种方式发送

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

修改

要执行此逻辑，您首先无需使用隐藏的输入字段。我更喜欢使用 HTML5 data- * attributes 来完成工作..这也传递了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); } }); }); });

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

Answer 2

因此，根据我对您在此处提出的要求的理解，您在不同的考场中有多个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中发送的第二个数据值确定要更新的组。

Answer 3

我会把它写成：

post_data = $(this).val();

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

Answer 4

我一直在使用动态表单，我强烈建议您利用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）

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

Serverside您将拥有一个数组，例如：

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

帮助

的Perhapes

通过ajax表单发送id

5 个答案: