【问题标题】:Problem with jquery ajax form on CodeigniterCodeigniter上的jquery ajax表单问题
【发布时间】:2010-04-07 14:28:03
【问题描述】:

每次我测试电子邮件都会正确发送。 (我在 PC 上测试过:IE6、IE7、IE8、Safari、Firefox、Chrome。MAC:Safari、Firefox、Chrome。)

在 jquery (javascript) 中完成的 _POST。然后,当我在浏览器中关闭 javascript 时,什么也没有发生,因为没有 _POST。

Nome: Jon Doe
Empresa: Star 
Cargo: Developer
Email:  jondoe@test.com
Telefone: 090909222988
Assunto:  Subject here..

但我不断收到来自客户的此类电子邮件:

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(电子邮件发件人):

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: site@test.com' . "\r\n" .
'Reply-To: no-reply' . "\r\n" .
'X-Mailer: PHP/' . phpversion();

        mail('email@test.com', $mensagem, $headers);

    }

【问题讨论】:

    标签: javascript jquery ajax forms codeigniter


    【解决方案1】:

    您需要为您的表单 action="http://www.myserver.com/index.php/pt/envia" 指定 ACTION 属性,因为您正在发布到您的contact_form.php,我猜这不是您的位置想发帖看看你的 AJAX 代码。

    第二次编辑:

    您还需要指定表单的 METHOD 属性。目前禁用 JavaScript,表单通过 GET 发送,您正在寻找 POST 变量。

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

    【讨论】:

    • contact_form.php 不是一个文件,它是“pt”控制器内部的一个名为“envia”的函数
    • 您缺少 method="post",默认情况下表单以 GET 形式发送。
    • 不,不需要在表单上指定“操作”。该帖子是通过$.ajax 调用发布的,显然那里提供了一个URL。他也不需要&lt;form&gt; 标签上的“方法”属性,因为同样,帖子是通过 ajax 进行的(并且明确指定了“类型”)。
    • @Pointy 他在禁用 JavaScript 时遇到了问题,这使得 FORM 仅依赖于 HTML,并且从未调用过他的花哨的 AJAX 代码。如果没有方法属性,则作为 GET 发送。当 CodeIgniter 路由页面时 GET 会丢失,并且也无法通过 $_POST 结构访问。首先阅读他的问题。
    • @Pointy 他收到了电子邮件,因为如果没有操作属性,它将提交到同一页面,我最初并不知道。 @CodeBurn 您正在收到电子邮件并且它是空的,因为如果您没有 method="post" 表单使用的默认方法将是 GET 并且您正在寻找电子邮件发送函数中的 POST 变量。请添加 method="post" 并在没有 javascript 的情况下测试您的脚本以查看它是否正常工作。
    【解决方案2】:

    试试这个代码:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-11-13
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-01-26
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多