如何使用 HTML 复选框修改 Code Igniter 中的数据库？

Question

我正在尝试使用 code igniter 创建一个界面，用户可以在其中选中图像旁边的复选框，更改我们数据库中的值。

挑战在于，当用户选中复选框时，数据库中的值不会更改。

如果我手动更改数据库中的值，则界面上的复选框值也会更改。但是如果用户选中复选框，数据库不会改变。好费解！

代码和界面截图如下。函数 veto() 和 unveto() 似乎没有被调用。我已经发出警报，但没有被触发。

任何帮助或建议都会很有帮助，因为我不确定如何有效地解决这个问题。

interface

查看 javascript 后跟相关的 CI 控制器并查看下面的片段


    document.addEventListener('DOMContentLoaded',function(){
    
      // ********** PREVIEW *********************
    });
    //perform an ajax call to update the server DB
    function veto(previewId)
    {
       if(previewId === "") return;
       var baseURL = window.location.origin + "/myboxes";
       var controllerPath=baseURL + "/bobcatuser/previewFeedback";
       //console.log(controllerPath);
       // Update the server via ajax
       jQuery.ajax({
           type: 'POST',
           url:controllerPath,
           data: {
             previewId: previewId
           },
           dataType:'json',
           success: function(response){
              var previewVeto = document.getElementById("previewVeto");
              previewVeto.value = response.data[1];
           },
           error: function(){
               console.log("Error: could not record preview due to server response.");
           }
       });
       return false;
    }


  function previews()
  {
     $msg='';
     $this->session->set_userdata('msg',$msg);
     if($this->session->userdata('logged_in_user'))
     {
        $data['previews']=$this->package->getPreviews();
        $data['previewActive']=$this->package->getPreviewActive();
        $previewDeadline= date('M j, Y',strtotime($this->package->getPreviewDeadline()));
        $data['instructions'] =  str_replace('DEADLINE',$previewDeadline,$this->util->getMessage('previewInstructions'));
        $data['inactiveMessage'] =  str_replace('DEADLINE',$previewDeadline,$this->util->getMessage('inactivePreview'));
        $data['vetoPrompt'] =  $this->util->getMessage('previewVetoPrompt');

        //print_r($data);  
        $this->load->view('header_view');
        $menu_data['active']=$this->user->getActive(15);
        $this->load->view('menu_view',$menu_data);
        $this->load->view('user_previews',$data);
        $this->load->view('footer_view');
    }
    else
    {
      redirect('login', 'refresh');
    }
  }//end previews


       <section class="page-entry">
          <div class="container padding-32">
             <div class="row">
                <div class="col-12 col-lg-6">
                   <h2 class="page-title">Order Preview</h2>
                   <div class="hr show-tablet"></div>
                </div><!-- closing title column div -->
             </div><!-- close row -->
          </div><!-- close container -->
       </section>
       <section class="content">
          <div class="container">
             <div class="spacer-h-30"></div>
                <div class="row">
                   <?php foreach($previews as $thisPreview){ print_r($thisPreview->preview_id); ?>
                   <form class="form-custom">
                     <div class="col-12 col-md-4">
                      <div class="item">
                         <div class="item__header">
                            <?php if($thisPreview->veto) { ?>
                            <input type="checkbox" id="veto" value="1" onclick="veto()" checked>
                            <?php }else{ ?>
                            <input type="checkbox" id="unveto" value="0" onclick="unveto()" >
                            <?php } ?>
                            <!--span class="myicon myicon-save"></span-->
                         </div><!-- item__header -->
                         <div class="item__image">
                            <img src=<?php echo $thisPreview->image_link ?> alt="">
                         </div><!-- item__image -->
                         <div class="item__info">
                            <h3 class="item__title"><?php echo $thisPreview->title ?> </h3>
                            <p class="item__person"><?php echo $thisPreview->customer_name ?></p>
                         </div><!-- item_info -->
                      </div><!-- item -->
                   </div><!-- col-12 -->
                   </form>
                   <?php } ?>
                </div><!-- row -->
          </div><!-- container -->
       </section>
    </main>
    </body>

Answer 1

从复选框更新服务器的方法是 ajax 调用。您的原始代码缺少提交按钮和复选框中的日期。

 added 'vetodata' to ajax call in function veto()
 added document.form[0].submit(); to function veto()

看到修改和工作！ javascript 和 'view' 代码 -- 控制器没有变化

function veto(previewId)
{
   if(previewId === "") return;
   var baseURL = window.location.origin + "/myboxes";
   var controllerPath=baseURL + "/bobcatuser/previewFeedback";
   console.log(controllerPath);
   // Update the server via ajax
   jQuery.ajax({
       type: 'POST',
       url:controllerPath,
       data: {
         previewId: previewId,
         vetodata: "1"
       },
       dataType:'json',
       success: function(response){
          var previewVeto = document.getElementByName("previewVeto");
          previewVeto.value = response.data[1];
          document.form[0].submit();
       },
       error: function(){
           console.log("Error: could not record preview due to server response.");
       }
   });
   return false;
}

  <section class="page-entry">
      <div class="container padding-32">
         <div class="row">
            <div class="col-12 col-lg-6">
               <a href="#" class="back-link">
                  <i class="back-link__icon">
                     <svg class="svg-icon-back"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-icon-back"></use></svg>
                  </i>
                  <span>To Incoming Orders</span>
               </a>
               <h2 class="page-title">Order Preview</h2>
               <div class="hr show-tablet"></div>
            <div class="col-12 col-lg-6">
               <h2 class="block-title">Instructions</h2>
               <p class="regular-text"><?php if($active === TRUE) {echo $instructions;} else {echo $inactiveMessage;} ?></p>
            </div><!-- close instruction col div -->
         </div><!-- close row -->
      </div><!-- close container -->
   </section>
   <section class="content">
      <div class="container">
         <div class="spacer-h-30"></div>
            <div class="row">
               <?php foreach($previews as $thisPreview){
                  $preview_id = $thisPreview->preview_id;
                  $preview_name = "preview_".$preview_id ?>
                  <div class="col-12 col-md-4">
                  <div class="item">
                     <div class="item__header">
                        <input class="largerCheckbox" <?php echo $thisPreview->veto ? "checked" : ""; ?> type="checkbox" id="previewVeto"
                        <?php if(!$active) echo "disabled"; ?>
                        onclick="veto('<?php echo $active ? $thisPreview->preview_id : ""; ?>')">
                     </div><!-- item__header -->
                     <div class="item__image">
                        <img src=<?php echo $thisPreview->image_link ?> alt="">
                     </div><!-- item__image -->
                     <div class="item__info">
                        <h3 class="item__title"><?php echo $thisPreview->title ?> </h3>
                        <p class="item__person"><?php echo $thisPreview->customer_name ?></p>
                     </div><!-- item_info -->
                  </div><!-- item -->
               </div><!-- col-12 -->
               <?php } ?>
            </div><!-- row -->

如何使用 HTML 复选框修改 Code Igniter 中的数据库？

How to use HTML checkboxes to modifiy a database in Code Igniter?

javascript

php

checkbox

codeigniter

onclick