如何防止引导模式关闭表单提交使用代码点火器

How to prevent bootstrap modal to close on form submit using codeigniter?

本文关键字：表单提交 代码 点火器 何防止 模式      更新时间：2023-09-26

如果输入不符合表单验证规则，我在引导模式表单中显示警告消息时遇到一些问题。无论表单是否有效，我都被卡住了，我想在模态表单的顶部显示错误。

控制器：Users.php

function create_user() {
 // set validation rules
  $this->form_validation->set_rules('first_name', 'Firstname', 'trim|required|min_length[4]');
  $this->form_validation->set_rules('last_name', 'Lastname', 'trim|required');
  // set validation errors
  $this->form_validation->set_message('required', '%s field is required');
  $this->form_validation->set_message('min_length[4]', '%s min_length');
if ($this->form_validation->run() == FALSE) {
  echo "something";
} else {
  echo "something";
}

  $data = array(
    'first_name' => $this->input->post('first_name'),
    'last_name' => $this->input->post('last_name'),
    'phone' => $this->input->post('phone'),
    'email' => $this->input->post('email')
    );
  $output = $this->user_model->put_user($data);
  if (!$output === TRUE) {
    echo "data saved succesfully";
    // redirect('users', 'refresh');
  } else {
    redirect('users', 'refresh');
  }
}

查看：userList.php

<div class="modal-body">
 <?php echo form_open("users/create_user", $attributes);?>
 <?php echo validation_errors(); ?>
 <div id="error" class="alert alert-info"></div>
 <div class='error_msg'></div>             
   <div class="form-group">
    <label for="first_name" class="col-sm-3 control-label">First Name</label>
      <div class="col-sm-9">
       <?php echo form_input(['id' => 'first_name', 'name' => 'first_name', 
       'class' => 'form-control', 'placeholder' => 'Firstname',
       'value' => set_value('first_name')]); ?>
      </div>
      </div>
      <div class="form-group">
       <label for="last_name" class="col-sm-3 control-label">Last Name</label>
       <div class="col-sm-9">
        <?php echo form_input(['id' => 'last_name', 'name' => 'last_name', 
        'class' => 'form-control', 'required' => 'required', 'placeholder' => 'Lastname', 'value' => $this->input->post('last_name')]); ?>
        </div>
       </div>
      <div class="form-group">
       <label for="phone" class="col-sm-3 control-label">Contact No.</label>
        <div class="col-sm-9">
         <?php echo form_input(['id' => 'phone', 'name' => 'phone', 
         'class' => 'form-control', 'required' => 'required', 'placeholder' => 'Phone', 'value' => $this->input->post('phone')]); ?>
        </div>
       </div>
       <div class="form-group">
        <label for="email" class="col-sm-3 control-label">Email</label>
         <div class="col-sm-9">
          <?php echo form_input(['id' => 'email', 'name' => 'email', 'type' => 'email', 'class' => 'form-control', 'required' => 'required', 'placeholder' => 'Email', 'value' => $this->input->post('email')]); ?>
         </div>
        </div>
       <div class="form-group">
       <label for="password" class="col-sm-3 control-label">Password</label>
        <div class="col-sm-9">
         <?php echo form_input(['id' => 'password', 'name' => 'firs_tname', 'type' => 'password', 'class' => 'form-control', 'required' => 'required', 'placeholder' => 'Password', 'value' => $this->input->post('password')]); ?>
        </div>
       </div>
       <div class="form-group">
        <div class="col-sm-offset-3 col-sm-9">
         <button type="submit" class="btn btn-default create-user">Create</button>
        </div>
       </div>   
     <?php echo form_close();?>
</div>

JQuery:

$(function() {
        $('#create_user').on('submit', function(event) {
            event.preventDefault();
            $.ajax({
                url: "<?php echo site_url('users/create_user') ?>",
                type: "POST",
                data: {"first_name" : <?php echo $this->input('first_name) ?>}, 
                dataType: "json",
                contentType: "application/json"
            }).done(function(msg) {
                $("#error").text(msg);
            });
        });
    };

我尝试了jquery prevent default，但它似乎对我不起作用，或者我在编写代码时有一些错误。任何帮助都将不胜感激。

您的提交函数似乎没有执行。表单的默认行为是执行，而jQuery代码将被忽略。

更改按钮，使其不再是提交按钮，并给它一个id。

<button type="button" id="btn-submit" class="btn btn-default create-user">Create</button>

然后更改您的方法，使其在您单击按钮时触发。

$(function() {
    $(document).on('click', '#btn-submit' function(event) {
        event.preventDefault();
        $.ajax({
            url: "<?php echo site_url('users/create_user') ?>",
            type: "POST",
            data: {"first_name" : <?php echo $this->input('first_name') ?>}, 
            dataType: "json",
            contentType: "application/json"
        }).done(function(msg) {
            $("#error").text(msg);
        });
    });
};

这应该会让你朝着正确的方向前进。

如果您的表单有一个id，那么您的代码应该使用以下更改

$(function() {
    $('#create_user').on('submit', function(event) 
    {
        event.preventDefault();
        event.stopImmediatePropagation();
        alert("test");
        $.ajax({
            url: "<?php echo site_url('users/create_user') ?>",
            type: "POST",
            data: $("#create_user").serialize(), 
            success : function(msg)
            {
                $("#error").text(msg);
            }
        });
    });
};

你的功能中有一个警报-如果你点击提交按钮，你必须看到这个警报框-如果没有，你知道你的功能不工作

相关文章：