PHP Codeigniter表单使用JQuery提交

I am new to PHP Codeigniter framework. I am designing a page in which I am using a link. On clicking the link it is calling a jquery function, which submits form through jquery. I have used codeigniter form validation methods for server side validation and for the timebeing I have disabled the client side validation.

我是PHP Codeigniter框架的新手。我正在设计一个我正在使用链接的页面。单击链接时,它调用一个jquery函数,该函数通过jquery提交表单。我已经使用codeigniter表单验证方法进行服务器端验证,并且我已经禁用了客户端验证。

The problem is that in this process when the form is submitted through jquery, the codeigniter form validation method is not working.

问题是,在此过程中,通过jquery提交表单时,codeigniter表单验证方法不起作用。

But if I am using a submit button to submit the form then the codeigniter form validation method works perfectly.

但是如果我使用提交按钮提交表单,则codeigniter表单验证方法可以正常工作。

Please advise me what to do if I need to submit the form through jquery and use the codeigniter form validation method.

如果我需要通过jquery提交表单并使用codeigniter表单验证方法,请告诉我该怎么办。

Please find the code below:

请找到以下代码:

<?php echo validation_errors(); ?>
<form name="login-form" id="login-form" method="post" action="<?php echo base_url();?>index.php/login/login_form" >
    <H2>Login</H2>
    <div id="login-box-name">
        Email:
    </div>
    <div id="login-box-field">
        <input name="user-name" id="user-name" class="form-login" title="Please Enter Correct User Name" value="" size="30" maxlength="2048" />
    </div>
    <div id="login-box-name">
        Password:
    </div>
    <div id="login-box-field">
        <input name="password" id="password" type="password" class="form-login" title="Please Enter Correct Password" value="" size="30" maxlength="2048" />
    </div>
    <br />
    <span class="login-box-options">
        <input type="checkbox" name="1" value="1" title="Want this computer to remember you!!"> Remember Me <a href="#" id="login-div-change">Forgot password?</a>
    </span>
    <br />
    <br />
    <a href="" id="login-submit">
        <img src="<?php echo base_url();?>assets/images/login-btn.png" width="110" height="40" style="margin-left:90px;" />
    </a>
    <input type="submit" name="submit" id="submit" value="Submit" />
</form>

jquery function to submit the form on clicking the "link":

jquery函数在单击“链接”时提交表单:


    $("#login-submit").click(function()
    {
    $('#login-form').submit();
    return false;
    });

Controller function:


    public function login_form()
    {

        $this->load->helper(array('form', 'url'));
        $this->load->library('form_validation');
        $data['title'] = 'Log In';

        $data['errorMessage'] = '';
        $this->form_validation->set_rules('user-name', 'Email', 'required');
        $this->form_validation->set_rules('password', 'Password', 'required');

        if ($this->form_validation->run() == FALSE)
        {
        $this->load->view('templates/header', $data);
        $this->load->view('login', $data);
        $this->load->view('templates/footer');
        }

        else
        {
        $this->load->view('templates/header', $data);
        $this->load->view('templates/menu');
        $this->load->view('index', $data);
        $this->load->view('templates/footer');
        }

    }

Here if I click on the "Submit button of the form, then the codeigniter validation works for user-name and password fields. But if I click the link with id="login-submit", then it calls the jquery function and the form get submitted. But the codeigniter validation does not work for user-name and password fields this time.

在这里,如果我点击表单的“提交”按钮,那么codeigniter验证适用于用户名和密码字段。但是如果我点击带有id =“login-submit”的链接,那么它会调用jquery函数和表单但是,这次codeigniter验证对用户名和密码字段不起作用。

I need to submit the form through the link and the codeigniter validation function should work for this.

我需要通过链接提交表单,并且codeigniter验证功能应该适用于此。

Thanks in Advance.....

提前致谢.....

2 个解决方案

#1

Use .preventDefault() instead of just returning false on the anchor click event.

使用.preventDefault()而不是仅在锚点击事件上返回false。

This has happened to me before and it seems to me that there is a conflict somewhere using .submit() inside a click event and returning false to stop the anchor's default behavior.

这在我之前发生过,在我看来,在click事件中使用.submit()并返回false以停止锚点的默认行为。

#2

The code above is working fine. Actually I made a silly mistake in my code. I used following code for jQuery and it is working now.

上面的代码工作正常。实际上我在代码中犯了一个愚蠢的错误。我使用了以下jQuery代码,它现在正在运行。


    $("#login-submit").click(function(e) {
        e.preventDefault();
        $('#login-form').submit();
    });

Thanks

#1