将模态内的表单数据传递到表单外部的控制器按钮中，而无需 JavaScript

Question

我正在使用Codeigniter框架，现在，我有一个模态，里面有一个表单。现在在我的模态页脚中，我为它输入了提交表单。它已经在模态之外了。现在为什么它没有在我的控制器中提交？我在控制器中放了一个var_dump，让它在提交时回显，我在没有 javascript 的情况下发送它。

这是我的模态形式：

<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Add Category</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<form id="frm_category" class="form-horizontal" method="POST" action="Admin_controls/insertCategory">  
<div class="form-group">
<label for="cat_name">Category: </label>
<input type="text" class="form-control" name="cat_name">
</div>
<div class="form-group">
<label for="cat_desc">Description: </label>
<input type="text" class="form-control" name="cat_desc">
</div>
</form>    
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" value="submit" form="frm_category">Add</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>

这是我的控制器：

public function insertCategory() {
$data = array (
'Category_name' => $this->input->post('cat_name'),
'Category_desc' => $this->input->post('cat_desc')
);
var_dump($data);
}

Answer 1

您应该将submit button放在</form>之前。 您需要javascript提交表格的其他明智之处

您可以使用以下代码

<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Add Category</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<form id="frm_category" class="form-horizontal" method="POST" action="Admin_controls/insertCategory">  
<div class="form-group">
<label for="cat_name">Category: </label>
<input type="text" class="form-control" name="cat_name">
</div>
<div class="form-group">
<label for="cat_desc">Description: </label>
<input type="text" class="form-control" name="cat_desc">
</div>
</form>    
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" value="submit" onclick="myFunction()">Add</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
<script>
function myFunction() {
document.getElementById("frm_category").submit();
}
</script>

Answer 2

• 您应该更改要提交的按钮类型。因此，它可以提交表单。
• 提交按钮应位于表单标记内

• 我已经修改了您的模态代码。我希望它会起作用

  × 添加类别 类别： 描述： 加 关闭

Answer 3

如果要插入数据，则应按照以下步骤操作：

1. 要POST或GET您应该在<form>标记的一侧添加该操作属性。
2. 现在，对于post，您需要将控制器的地址输入<form action = "<?= base_url('your_controller/your_function') ?>" method="post">。

3. 现在在控制器端：

   public function your_function(){
   // By using this you can get all posted data at once
   $your_post_data = $this->input->post();
   // By using this you get the post data seperatedly
   $your_post_data = $this->input->post('user_name'); // your form input name
   //Now for sending data to the model for database querys
   $this->load->model ('your_model');
   $data = $this->your_model->your_model_function($your_post_data);
   }
   

4. 如果您不想每次都加载模型，则可以将模型添加到__construct

   public function __construct() {
   parent::__construct ();
   $this->load->model ('your_model');
   // So now on you just need to call the model name in your function.
   }
   public function your_function(){
   // By using this you can get all posted data at once
   $your_post_data = $this->input->post();
   // By using this you get the post data seperatedly
   $your_post_data = $this->input->post('user_name'); // your form input name
   $data = $this->your_model->your_model_function($your_post_data); 
   }
   

5. 现在在模型内部：(我给出插入示例(

   public function your_model_function($your_post_data ){
   $this->db->insert_batch('your_table_name', $your_post_data );
   //If you want to understing of query execuation
   // for thie you need to enable the log from config.php form config folde.
   //Remove comment from log_message after emeble the log message
   //log_message('debug', 'Last Insert query: ' . print_r($this->db->last_query(), TRUE).' Inserted Data: '.print_r($your_post_data, TRUE));
   if($this->db->affected_rows() > 0){
   return TRUE;
   } else {
   return FALSE;
   }
   }
   

有关查询的模式详细信息，请访问此 CI 文档

您的代码应该是：

<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Add Category</h4>
</div>
<form id="frm_category" class="form-horizontal" method="POST" action="<?= base_utl('Admin_controls/insertCategory') ?>"> 
<div class="modal-body">
<div class="container-fluid">
<div class="form-group">
<label for="cat_name">Category: </label>
<input type="text" class="form-control" name="cat_name">
</div>
<div class="form-group">
<label for="cat_desc">Description: </label>
<input type="text" class="form-control" name="cat_desc">
</div>                  
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" value="submit" form="frm_category">Add</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>

您的控制器应为：

public function insertCategory() {
// You should have to validate befor insert
$this->load->model ('your_model');
$your_post_data = $this->input->post();
$insert_status = $this->your_model->your_model_function($your_post_data); 
if($insert_status == TRUE){
//return to your view or load the view
$this->load->view ('your_view_directory');
} else {
// Send Error Message
}

要进行验证，请访问此 CI 文档