首页 > 解决方案 > 如何在不输入文本字段的情况下使用 $_POST

问题描述

我将使用伪代码和片段来总结我的目标,以便轻松展示我想要完成的任务:

表列:

       <td data-target="scheduled">

         <?php
           if ($row['scheduled'] == 1) {
          ?>

          <a href="#" data-role="update" data-id="<?php echo $row['id'] ;?>">YES</a>

         <?php
           } else if ($row['scheduled'] == 0) {
           ?>
          <a href="#" data-role="update" data-id="<?php echo $row['id'] ;?>">NO</a>
         <?php
           }
          ?>
       </td>

这是一个表格列,其中按钮取决于值 1(是)和 0(否)

预定的

模态:

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>UPDATE SCHEDULED?</label>
          <input type="text" id="scheduled" class="form-control">
        </div>
        <input type="hidden" id="userId" class="form-control">

      </div>
      <div class="modal-footer">
        <a href="#" id="save" class="btn btn-primary pull-right">Update</a>
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

每当单击“是”或“否”按钮时,都会弹出此模式

模态的

现在我可以将文本字段更改为 1 或 0,以便输出显示相应的结果。

我正在尝试获取“$scheduled = $_POST['scheduled'];” 单击时自动获取输入,如果列为 0,$_POST 将变为 1,如果列为 1,则 $_POST 将变为 0。

阿贾克斯:

<script>
  $(document).ready(function(){

      $(document).on('click','a[data-role=update]',function(){
            var id  = $(this).data('id');
            var scheduled  = $('#'+id).children('td[data-target=scheduled]').text();

            $('#scheduled').val(scheduled);
            $('#userId').val(id);
            $('#myModal').modal('toggle');
      });


       $('#save').click(function(){
          var id  = $('#userId').val();
          var scheduled = $('#scheduled').val();

          $.ajax({
              url      : 'connection.php',
              method   : 'post',
              data     : {scheduled: scheduled , id: id},
              success  : function(response){

                             $('#'+id).children('td[data-target=scheduled]').text(scheduled);
                             $('#myModal').modal('toggle');

                         }
          });
       });
  });
</script>

这是当前的 ajax 代码,它在其中获取文本字段中的值。

SQL:

if(isset($_POST['id'])){

    $id = $_POST['id'];
    $scheduled = $_POST['scheduled'];

    $result  = mysqli_query($connection , "UPDATE user SET scheduled = '$scheduled' WHERE id='$id'");
}
?>

借助 ajax 更新列的 SQL 代码。

用伪代码总结:(不会有文本字段的手动输入,只是一个直接用 ajax 进行更新的按钮)

模态:

 if ($row['scheduled'] == 1) {
    textfield input is 0
} else if ($row['scheduled'] == 0) {
    textfield input is 1
}

我认为,如果我可以让我的模态中的 if 语句正常工作,ajax 和 SQL 将在更新时完成其余的工作,我将获得一个响应按钮来更改文本(是或否)。

将不胜感激任何帮助。

标签: phphtmlsqlajax

解决方案


由于问题使用了伪代码片段,因此使用伪代码片段来回答似乎是合适的——它应该,可能会有所帮助。

切换项目的状态非常容易,dataset属性的使用对任务等有很大帮助,我看到您已经在使用它们,所以这应该很容易。如果一个项目1的状态是切换状态,那么它就是1 minus current state

一个例子

    <a href='#' data-scheduled=1 data-id=303 data-role='update'>Yes</a>
    <a href='#' data-scheduled=1 data-id=404 data-role='update'>Yes</a>
    <a href='#' data-scheduled=1 data-id=505 data-role='update'>Yes</a>

<script>
    let links=Array.prototype.slice.call( document.querySelectorAll('a[data-scheduled]') );
    let matrix={
        1:'YES',
        0:'NO'
    }
        links.forEach( a=>{
            a.addEventListener('click', e=>{
                /* Toggle the state of the link */
                e.target.dataset.scheduled = 1 - parseInt( e.target.dataset.scheduled );
                e.target.textContent=matrix[ e.target.dataset.scheduled ];
                alert( 'send ajax request using '+e.target.dataset.scheduled+' as the value for button/link of id '+e.target.dataset.id )
            })
        })
</script>

单击每个链接会将数据集属性更改scheduled为 1 或 0 - 使用该值查找文本矩阵用于相应地设置链接的文本。该示例将使用 analert但您此时需要发送一个 ajax 请求。

在初始页面加载时,您将data-scheduled根据数据库值设置 的值,以便初始状态不一定总是 1。我敢肯定,您可以确定如何适当地更改逻辑以在页面加载时设置任一链接YESNO为每个链接设置。 ..$text=$row['scheduled']==1 ? 'YES' : 'NO';

希望能帮助到你。

完整示例:

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>toggle state</title>
        <style>
            body{font-family:calibri,verdana,arial;}
            *{box-sizing:border-box;}
            [data-scheduled]{margin:0.5rem;padding:0.25rem;border:1px solid rgba(133,133,133,0.25);}
            [data-scheduled="0"]{background:rgba(255,0,0,0.1)}
            [data-scheduled="1"]{background:rgba(0,255,0,0.1)}
        </style>
        <script>
            document.addEventListener('DOMContentLoaded', e=>{
                let links=Array.prototype.slice.call( document.querySelectorAll('a[data-scheduled]') );
                let matrix={
                    1:'YES',
                    0:'NO'
                }
                links.forEach( a=>{
                    a.addEventListener('click', e=>{
                        e.preventDefault();
                        e.target.dataset.scheduled = 1 - parseInt( e.target.dataset.scheduled );
                        e.target.textContent=matrix[ e.target.dataset.scheduled ];
                        console.info('send ajax request using '+e.target.dataset.scheduled+' as the value ( or "'+matrix[ e.target.dataset.scheduled ]+'" )for button/link of id '+e.target.dataset.id);
                    })
                })
            });
        </script>
    </head>
    <body>
        <?php
            for( $i=1; $i <= 25; $i++ ){

                $scheduled=rand(0,1);
                $text=$scheduled==1 ? 'YES' : 'NO';

                printf(
                    '<a href="#" data-scheduled=%d data-id=%d data-role="update">%s</a>',
                    $scheduled,
                    $i,
                    $text
                );
            }
        ?>
    </body>
</html>

推荐阅读