PHP Codeigniter form submit using JQuery - php

Question

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.
The problem is that in this process when the form is submitted through jquery, the codeigniter form validation method is not working.
But if I am using a submit button to submit the form then the codeigniter form validation method works perfectly.
Please advise me what to do if I need to submit the form through jquery and use the codeigniter form validation method.
Please find the code below:
Login Form:
<?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 Forgot password?
</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":
$("#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.
I need to submit the form through the link and the codeigniter validation function should work for this.
Thanks in Advance.....

Answer 1

Use .preventDefault() instead of just returning false on the anchor click event.
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.

Answer 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.
$("#login-submit").click(function(e) {
e.preventDefault();
$('#login-form').submit();
});
Thanks

Answer 3

it happens because it calls the function all the time when clicking on the button. you need to stop that.
$("#login-submit").click(function(e){
e.preventDefault();
$('#login-form').submit();
});