Problem with jquery ajax form on Codeigniter

Question

Everytime I test the email is send correctly. (I have tested in PC: IE6, IE7, IE8, Safari, Firefox, Chrome. MAC: Safari, Firefox, Chrome.)

The _POST done in jquery (javascript). Then when I turn off javascript in my browser nothing happens, because nothing is _POSTed.

Nome: Jon Doe
Empresa: Star 
Cargo: Developer
Email:  [email protected]
Telefone: 090909222988
Assunto:  Subject here..

But I keep recieving emails like this from costumers:

Nome:
Empresa:
Cargo:
Email:
Telefone:
Assunto:

CONTACT_FORM.PHP

    <form name="frm" id="frm">                
    <div  class="campoFormulario nomeDeCampo texto textocinzaescuro" >Nome<font style="color:#EE3063;">*</font></div>
    <div  class="campoFormulario inputDeCampo" ><input class="texto textocinzaescuro"  size="31" name="Cnome" id="Cnome" value=""/></div>


    <div  class="campoFormulario nomeDeCampo texto textocinzaescuro" >Empresa<font style="color:#EE3063;">*</font></div>
    <div  class="campoFormulario inputDeCampo" ><input class="texto textocinzaescuro"  size="31"  name="CEmpresa"  id="CEmpresa" value=""/></div>

    <div  class="campoFormulario nomeDeCampo texto textocinzaescuro" >Cargo</div>
    <div  class="campoFormulario inputDeCampo" ><input class="texto textocinzaescuro"  size="31"  name="CCargo" id="CCargo" value=""/></div>

    <div  class="campoFormulario nomeDeCampo texto textocinzaescuro" >Email<font style="color:#EE3063;">*</font></div>
    <div  class="campoFormulario inputDeCampo" ><input class="texto textocinzaescuro"  size="31"  name="CEmail" id="CEmail" value=""/></div>


    <div  class="campoFormulario nomeDeCampo texto textocinzaescuro" >Telefone</div>
    <div  class="campoFormulario inputDeCampo" ><input class="texto textocinzaescuro"  size="31"  name="CTelefone" id="CTelefone" value=""/></div>

    <div  class="campoFormulario nomeDeCampo texto textocinzaescuro" >Assunto<font style="color:#EE3063;">*</font></div>
    <div  class="campoFormulario inputDeCampo" ><textarea class="texto textocinzaescuro"  name="CAssunto" id="CAssunto" rows="2" cols="28"></textarea></div>

    <div  class="campoFormulario nomeDeCampo texto textocinzaescuro" >&nbsp;</div>
    <div  class="campoFormulario inputDeCampo" style="text-align:right;" ><input id="Cbutton" class="texto textocinzaescuro"  type="submit" name="submit" value="Enviar" /></div>
    </form>





<script type="text/javascript">

$(function() {
    $("#Cbutton").click(function() {

      if(validarForm()){
           var Cnome = $("input#Cnome").val(); 
           var CEmpresa = $("input#CEmpresa").val(); 
           var CEmail = $("input#CEmail").val();
           var CCargo = $("input#CCargo").val(); 
           var CTelefone = $("input#CTelefone").val(); 
           var CAssunto = $("textarea#CAssunto").val(); 


          var dataString = 'nome='+ Cnome + '&Empresa=' + CEmpresa + '&Email=' + CEmail + '&Cargo=' + CCargo + '&Telefone=' + CTelefone + '&Assunto=' + CAssunto;
          //alert (dataString);return false;

          $.ajax({
        type: "POST",
        url: "http://www.myserver.com/index.php/pt/envia", 
        data: dataString,
        success: function() {
          $('#frm').remove();
          $('#blocoform').append("<br />Obrigado. <img id='checkmark' src='http://www.myserver.com/public/images/estrutura/ok.gif' /><br />Será contactado brevemente.<br /><br /><br /><br /><br /><br />")
          .hide()
          .fadeIn(1500);

        }
          });
     } 
     return false; 

    });


  });

function validarForm(){
    var error = 0;

    if(!validateNome(document.getElementById("Cnome"))){ error = 1 ;}            
    if(!validateNome(document.getElementById("CEmpresa"))){ error = 1 ;}           
    if(!validateEmail(document.getElementById("CEmail"))){ error = 1 ;}            
        if(!validateNome(document.getElementById("CAssunto"))){ error = 1 ;}            

     if(error == 0){
        //frm.submit();
            return true;
     }else{
            alert('Preencha os campos correctamente.');
            return false;
         }
    }

function validateNome(fld){
        if( fld.value.length == 0  ){
        fld.style.backgroundColor = '#FFFFCC';
        //alert('Descrição é um campo obrigatório.');
        return false;
        }else {
           fld.style.background = 'White';
       return true;
        }
}

function trim(s)
{
  return s.replace(/^\s+|\s+$/, '');
}

function validateEmail(fld) {
    var tfld = trim(fld.value);                       
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
    var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;

    if (fld.value == "") {
        fld.style.background = '#FFFFCC';
            //alert('Email é um campo obrigatório.');
        return false;
    } else if (!emailFilter.test(tfld)) {
            //alert('Email inválido.');
        fld.style.background = '#FFFFCC';
        return false;
    } else if (fld.value.match(illegalChars)) {
        fld.style.background = '#FFFFCC';
            //alert('Email inválido.');
        return false;
    } else {
        fld.style.background = 'White';
       return true;
    }
}
</script>

FUNCTION ENVIA (email sender):

function envia()
    {
        $this->load->helper(array('form', 'url'));

        $nome = $_POST['nome'];
        $empresa = $_POST['Empresa'];
        $cargo = $_POST['Cargo'];
        $email = $_POST['Email'];
        $telefone = $_POST['Telefone'];
        $assunto = $_POST['Assunto'];

        $mensagem =     "   Nome:".$nome."
    Empresa:".$empresa."
    Cargo:".$cargo."
    Email:".$email."
    Telefone:".$telefone."
    Assunto:".$assunto."";

    $headers = 'From: [email protected]' . "\r\n" .
'Reply-To: no-reply' . "\r\n" .
'X-Mailer: PHP/' . phpversion();

        mail('[email protected]', $mensagem, $headers);

    }

Ivo Sabev · Accepted Answer · 2010-04-07 20:54:52Z

3

You need to specify ACTION attribute to your form action="http://www.myserver.com/index.php/pt/envia" , because you are posting to your contact_form.php which I guess is not where you want to post looking at your AJAX code.

2nd edit:

You also need to specify the METHOD attribute of the form. Currently with disabled JavaScript the form is sent via GET and you are looking for POST variables.

<form name="frm" id="frm" method="post">

edited Apr 7, 2010 at 20:54

answered Apr 7, 2010 at 15:00

Ivo Sabev

5,2401 gold badge29 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Bonfocchi Over a year ago

contact_form.php is not a file, it's a function called "envia" inside the "pt" controler

Ivo Sabev Over a year ago

You are lacking the method="post", by default forms are sent as GET.

Pointy Over a year ago

No, there's no need to specify the "action" on the form. The post is made via the $.ajax call, and there's clearly a URL supplied there. He also doesn't need the "method" attribute on the <form> tag because, again, the post is being made via ajax (and the "type" is clearly specified).

Ivo Sabev Over a year ago

@Pointy he is experiencing the problem when he disables the JavaScript which makes the FORM rely only on HTML and none of his fancy AJAX code is ever called. If there is no method attribute it is sent as GET. The GET is lost when CodeIgniter routes the page and is also not accesible via the $_POST structure. Read his question first.

Ivo Sabev Over a year ago

@Pointy he gets the email because if there is no action attribute it will submit to the same page, which I was not initially aware of. @CodeBurn you are getting the email and it is empty, because if you do not have method="post" the default method used by the form will be GET and you are looking for POST variables in your email send function. Please add the method="post" and test your script without javascript to see that it is working correct.

|

Kris van der Mast · Accepted Answer · 2012-08-13 15:20:08Z

1

Try this code:

var add_member_form=document.getElementById('frm'); 
$.ajax({type:'POST', url: add_member_form.action, data:$('#frm').serialize(),
        success: function(response) {           
            alert(response);
        }
});

edited Aug 13, 2012 at 15:20

Kris van der Mast

16.6k8 gold badges41 silver badges65 bronze badges

answered Aug 13, 2012 at 14:48

krishna singh

1,0831 gold badge12 silver badges15 bronze badges

Collectives™ on Stack Overflow

Problem with jquery ajax form on Codeigniter

2 Answers 2

13 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related