Submit form with Javascript

[eluser]ibnclaudius[/eluser]
I want to login the user without refreshing the page.

So here's is my js:

Code:

$(function() {
$("#submit-login").click(function() {
  var email = $("#input-email").val();
  var password = $("#input-password").val();
  var dataString = 'action='+ action + '&email;=' + email + '&password;=' + password;
  
$.ajax({
  type: "POST",
  url: "form/login",
  data: dataString,
  
  success: function() {
    
   }
});
}
  
  return false;
});
});

He will run this class/method:

Code:

public function login()
{
if ($this->input->server('REQUEST_METHOD') === 'POST')
{
  $data = array('email' => $this->input->post('email'),
    'password' => $this->encrypt->sha1($this->input->post('password'))
  );

  if ($this->mb_auth_lib->login($data))
  {
   echo 'TRUE';
  }
  else
  {
   echo 'FALSE';
  }
}
else
{
  echo 'FALSE';
}
}

If success, how can I read the content of the class/method and proceed if TRUE or FALSE?

[eluser]Aken[/eluser]

Code:

success: function(response) {

  if (response == 'TRUE') {
    // Successful login
  } else {
    // Unsuccessful
  }

}

[eluser]CroNiX[/eluser]
Additionally, you don't have to manually build your data parameters if you are submitting a form. jQuery has a $.serialize() function that grabs the whole form.

Code:

$.ajax({
  type: "POST",
  url: "form/login",
  data: $('#form_id').serialize(),
  
  success: function() {
    
   }
});

[eluser]ibnclaudius[/eluser]
The response function is not working.

The js:

Code:

$(function() {
$("#submit-login").click(function() {
  document.getElementById('submit-login').disabled = true;
  
  var email = $("#input-email").val();
  var password = $("#input-password").val();
  var regexEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
  
  if (email == "" && password == "")
  {
   $("#input-email").select().focus();
  
   $("#input-email").addClass("error");
   $("#input-password").addClass("error");
  
   $('#errors-email').html("<span class='error'>Digite seu e-mail.</span>");
   $('#errors-password').html("<span class='error'>Digite sua senha.</span>");
  
   document.getElementById('submit-login').disabled = false;
  
   return false;
  }
  else if (email == "")
  {
   $("#input-email").select().focus();
  
   $("#input-email").addClass("error");
   $("#input-password").removeClass("error");
  
   $('#errors-email').html("<span class='error'>Digite seu e-mail.</span>");
   $('#errors-password').html('');
  
   document.getElementById('submit-login').disabled = false;
  
   return false;
  }
  else if (password == "")
  {
   $("#input-password").select().focus();
  
   $("#input-password").addClass("error");
   $("#input-email").removeClass("error");
  
   $('#errors-password').html("<span class='error'>Digite sua senha.</span>");
   $('#errors-email').html('');
  
   document.getElementById('submit-login').disabled = false;
  
   return false;
  }
  else if (!regexEmail.test(email))
  {
   $("#input-email").addClass("error");
   $("#input-password").removeClass("error");
  
   $('#errors-email').html("<span class='error'>E-mail inválido. Tente novamente.</span>");
   $('#errors-password').html('');
  
   document.getElementById('submit-login').disabled = false;
  
   return false;
  }
  else
  {
   $.ajax({
    type: "POST",
    url: "form/login",
    data: $('#form-login').serialize(),
    
    success: function(response) {
     if (response == 'TRUE') {
      document.getElementById('submit-login').disabled = true;
     } else {
      document.getElementById('submit-login').disabled = true;
     }
    }
   });
  }
});
});

The class/method:

Code:

<?php

class Form extends CI_Controller
{
public function __construct()
{
  parent::__construct();
  
  $this->load->library(array('form_validation', 'mb_auth_lib', 'encrypt'));
  $this->load->helper(array('url','form'));
  
  $this->output->enable_profiler(true);
}

public function index()
{
  redirect('/entrar', 'location');
}

public function login()
{
  if ($this->input->server('REQUEST_METHOD') === 'POST')
  {
   $data = array('email' => $this->input->post('email'),
     'password' => $this->encrypt->sha1($this->input->post('password'))
   );
  
   if ($this->mb_auth_lib->login($data))
   {
    echo 'TRUE';
   }
   else
   {
    echo 'FALSE';
   }
  }
  else
  {
   echo 'FALSE';
  }
}
}

The form:

Code:

<form id="form-login" method="post" action="" >
    <h3>Bem-vindo, escola!</h3>
    <div class="row">
     <label>E-mail</label>
     &lt;input id="input-email" type="text" name="email" value="&lt;?php echo set_value('email'); ?&gt;" /&gt;
     <div id="errors-email"></div>
    </div>
    <div class="row">
     <label>Senha</label>
     &lt;input id="input-password" type="text" name="password" value="&lt;?php echo set_value('password'); ?&gt;" /&gt;
     <div id="errors-password"></div>
    </div>
    <div class="actions">
     <a href="&lt;?php echo site_url(); ?&gt;/esqueci">Esqueceu sua senha?</a>
     <button id="submit-login" type="submit" class="blue" >Entrar</button>
    </div>
   &lt;/form&gt;

[eluser]CroNiX[/eluser]
Are you using firebug or anything to check to see that the request is going to the correct url and that you are actually receiving data back? Your url in your ajax query is relative, which can be problematic and should be avoided.

Also, your js is wrapped in an anonymous function. Whats the purpose of the $ in front of it? I've never seen that. Usually its

Code:

(function($){})(jQuery);

like they show here so it passes the $ (jquery) to your anonymous function.

[eluser]CroNiX[/eluser]
Also, you only have a success callback in your ajax. What happens if there is an error? You're not handling that.

[eluser]ibnclaudius[/eluser]

Are you using firebug or anything to check to see that the request is going to the correct url and that you are actually receiving data back?

No, how can I do that? I've already installed the add-on on Firefox.

Your URL in your Ajax query is relative, which can be problematic and should be avoided.

What should I use instead?

Also, your js is wrapped in an anonymous function. Whats the purpose of the $ in front of it? I’ve never seen that. Usually its(function($){})(jQuery);

The js don't run correctly when I try like this:

Code:

(function($){
$("#submit-login").click(function() {
  document.getElementById('submit-login').disabled = true;
  
  var email = $("#input-email").val();
  var password = $("#input-password").val();
  var regexEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
  
  if (email == "" && password == "")
  {
   $("#input-email").select().focus();
  
   $("#input-email").addClass("error");
   $("#input-password").addClass("error");
  
   $('#errors-email').html("<span class='error'>Digite seu e-mail.</span>");
   $('#errors-password').html("<span class='error'>Digite sua senha.</span>");
  
   document.getElementById('submit-login').disabled = false;
  
   return false;
  }
  else if (email == "")
  {
   $("#input-email").select().focus();
  
   $("#input-email").addClass("error");
   $("#input-password").removeClass("error");
  
   $('#errors-email').html("<span class='error'>Digite seu e-mail.</span>");
   $('#errors-password').html('');
  
   document.getElementById('submit-login').disabled = false;
  
   return false;
  }
  else if (password == "")
  {
   $("#input-password").select().focus();
  
   $("#input-password").addClass("error");
   $("#input-email").removeClass("error");
  
   $('#errors-password').html("<span class='error'>Digite sua senha.</span>");
   $('#errors-email').html('');
  
   document.getElementById('submit-login').disabled = false;
  
   return false;
  }
  else if (!regexEmail.test(email))
  {
   $("#input-email").addClass("error");
   $("#input-password").removeClass("error");
  
   $('#errors-email').html("<span class='error'>E-mail inválido. Tente novamente.</span>");
   $('#errors-password').html('');
  
   document.getElementById('submit-login').disabled = false;
  
   return false;
  }
  else
  {
   $.ajax({
    type: "POST",
    url: "form/login",
    data: $('#form-login').serialize(),
    
    success: function(response) {
     if (response == 'TRUE') {
      [removed] = "http://www.google.com/";
     } else {
      $("#input-email").addClass("error");
      $("#input-password").addClass("error");
      
      $('#errors-email').html('');
      $('#errors-password').html("<span class='error'>O e-mail e/ou a senha está incorreto. Tente novamente.</span>");
      
      document.getElementById('submit-login').disabled = false;
      
      return false;
     }
    }
   });
  }
});
})(jQuery);

Also, you only have a success callback in your ajax. What happens if there is an error? You’re not handling that.

How can I handle that?

Sorry for the noob questions, I'm new to Javascript, jQuery and Ajax..

[eluser]ibnclaudius[/eluser]
I've noticed that the POST URL is wrong.

Check my files tree:

-application
--controllers
---form.php
-assets
--js
---myjs.js
-system

How can I direct thw URL correctly?

[eluser]limit[/eluser]
Did you try using base_url() and then the path to your controller function?

Code:

$.post('<?=base_url()?>index.php/form/login', { data: $('#form').serialize() },...

Also, when I did something similar to this I converted the data back into an array. However, I was handling a ton of variables from the form.

Code:

$ajaxdata = $this -> input -> post('data');
parse_str($ajaxdata, $output);
$output = $output;

I could then just call $output['variable'];

[eluser]ibnclaudius[/eluser]
I tried this, but nothing happened.

Code:

$.post('http://localhost/mysite/form/login', { data: $('#form-login').serialize() }, function(result) {
     if (result == 'TRUE') {
      [removed] = "http://www.google.com/";
     }
     else
     {
      $('#errors-password').html('not true');
      loading.style.display = 'none';
     }
    }
   );