javascript - 如何控制 CodeIgniter 中单击按钮时的发布表单数据

Question

之前我自己发布了这个问题的答案，相信我已经找到了解决方案。然而，就在今天早上，我发现我错了。这只是部分解决了。因此，我决定删除该答案并完全编辑这篇文章。

在我的 CodeIgniter 应用程序中，我有以下 View 页面 - meal_add.php，并且那里有一个表单。该表单下方有一个提交按钮。表单方法应该是“post”。如果我单击提交按钮，数据将保存在数据库中。代码如下:

<form action="javascript:checkTime();" method="post">
            <fieldset>
                <legend id="add_employee_legend">Add Meal Information</legend>
                <div>
                    <label id= "emp_id_add_label">Employee ID:</label>
                    <input type="text" name="emp_id" id = "employee_id_add" placeholder="Employee ID" required="1"/>
                </div>
                <br>
                <div>
                    <label id= "is_guest_add_label">Guests?</label>
                    <input type="checkbox" name ="is_guest_checkbox" class ="guestcheck" checked="checked" value="1" onchange="valueChanged()"/>
                </div>
                <br>
                <div id = "guestnum">
                    <label id= "num_of_guest_add_label">No. of Guests:</label>
                    <input type="text" name="num_of_guest" id = "num_of_guest_add" placeholder='0'/>
                </div>
                <div>
                    <label id= "remarks_add_label">Remarks:</label>
                    <textarea rows="1" cols="20" style="margin-left: 35px"></textarea>
                </div>
                <input type="submit" name="submit" id = "meal_info_submit" value="Save Meal Information"/>
                <button id = "cancel_button" onclick="location.href='<?php echo base_url();?>index.php/admin_logins/meal'">Cancel</button>
            </fieldset>    
        </form>

现在，我想在单击提交按钮时进行特定条件检查。根据检查结果，我将允许提交数据和重定向页面。所以我的 JavaScript 函数如下:

    <script>
    function checkTime()
    {
        var today = new Date();
        var hour = today.getHours();
        if(hour < '12')
        {
            location.href='<?php echo base_url();?>index.php/meals/insert_meal_db';
        }
        else
        {
            alert("You can't place an order after 12 pm.");
            location.href='<?php echo base_url();?>index.php/admin_logins/meal';
        }
    }
    </script>

这个位工作正常 - 每当我尝试在中午 12 点之后提交数据时，都会出现一条警告消息，提示我无法在中午 12 点之后下订单，停止我的数据提交并重定向到另一个页面。然而，当下午 12 点之前时，数据应该通过点击提交，即表单方法应该是 post。但似乎数据没有在点击时提交，表单方法 "post" 根本不起作用。我得到的只是数据库中的纯 0。

我的 Controller 插入方法 -

public function insert_meal_db()
{
    date_default_timezone_set('Asia/Dacca');
    $mdata['emp_id'] = $this->input->post('emp_id');
    $mdata['is_guest'] = $this->input->post('is_guest');
    $mdata['num_of_guest'] = $this->input->post('num_of_guest');
    $mdata['remarks'] = $this->input->post('remarks');
    if($mdata['num_of_guest'] == 0)
    {
        $mdata['bill'] = 35.00;
    }

    else
    {
        $mdata['bill'] = 35.00 + (35.00 * $mdata['num_of_guest']);

    }
    $res = $this->meal_model->insert_meal($mdata);
    if($res)
    {   
        $this->session->set_flashdata('message','Meal information added successfully');
        header('location:'.base_url()."index.php/meals/".$this->index());

    }
}

请注意，$mdata['bill'] 不是来自 $this->input->post()，它来自计算。因此，我根据计算在数据库中获取 $mdata['bill']` 的数据，而不是 0。但对于其他列，我得到纯 0。

我的模型插入方法-

  //To add a new meal to the database
  public function insert_meal($data)
  {
      return $this->db->insert('meal', $data);
  }   

我的表名称是meal，数据库是MySQL，表结构如下:

       Column Name                       Data Type
          id                               int PK 
        emp_id                      varchar(15) NOT NULL
       is_guest                        int NOT NULL
      num_of_guest                         int 
        bill                           int NOT NULL
       remarks                             text

有趣的是 - 虽然我的 emp_id 列是 VARCHAR NOT NULL 列，但保存的数据是 0。

Answer 1

为了在提交表单之前检查验证，您需要执行以下任务:

<form id="form" onSubmit="return checkSubmit();" action="#">

JavaScript 表单验证使用:

  function checkSubmit(){       
    if (validationCorrect()) {
         $('#form').submit();
    }
}  

希望你明白了。