0

使用 CI 和电子邮件类完成 php 表单后,我能够接收包含用户数据的 html 电子邮件——很棒。现在,除了 CI 验证之外,我还想包括具有很好的淡入或淡出效果的客户端验证 (AJAX),并且在关闭 javascript 的情况下仍然运行 CI 验证。

这里包含的代码是我迄今为止从各种来源取得的成果,我知道这并不完整,但甚至不确定我是否走在正确的轨道上?到目前为止,我所拥有的表单仍然可以正常工作,并且我认为它仍在运行 CI 验证脚本并且没有发生任何影响。

如果有人能指导我到目前为止我出错的地方以及如果可能的话下一步要采取什么步骤,我会很感激?这是支持我的问题的代码:

看法

<div id="contact">
<?php
//This is loaded in the view as it wont be used in the other pages
$this->load->helper('form');

echo form_open('contact/send_email');

//success message if passed validation checks
echo $success;

// empty div for error messages (php)
if(validation_errors() != ""){
    echo '<h3>Please correct the following errors:</h3>'; 
    echo '<div id="errors">';
    echo validation_errors();
    echo '</div>';
}

echo form_label('Name: ', 'name');
    $data = array (
        'name' => 'name',
        'id' => 'name',
        'value' => set_value('name')
    );
echo form_input($data);


echo form_label('Email: ', 'email');
    $data = array (
        'name' => 'email',
        'id' => 'email',
        'value' =>set_value('email')
    );
echo form_input($data);


echo form_label('Message: ', 'message');
    $data = array (
        'name' => 'message',
        'id' => 'message',
        'value' =>set_value('message')
    );
echo form_textarea($data);
?>

<br />

<?php
echo form_submit('submit', 'Send');

echo form_close();
?>

------------AJAX--------

$(function() {
    $('form').click(function() {

        // get the form values
        var form_data = {
            name: $('name').val(),
            email: $('email').val(),
            message: $('message').val()
        };

        // send the form data to the controller
        $.ajax({
            url: "<?php echo site_url('contact/send_email'); ?>",
            type: "post",
            data: form_data,
            success: function(msg) 
            {
            if(msg.validate)
                    {
                    $('form').prepend('<p>Message sent!</p>');
                    $('p').delay(3000).fadeOut(500);
                    }
                    else
                     $('form').prepend('<div id="errors">Message Error</div>');
                     $('p').delay(3000).fadeOut(500);
                }
            });
            // prevents from refreshing the page
            return false;   
        });
    });
    </script>

控制器

类联系人扩展 CI_Controller {

function __construct() {
    parent::__construct();
}

public function index()
{   
    $data['success'] = '';
    $data['page_title'] = 'Contact';
    $data['content'] = 'contact';
    $this->load->view('template', $data);
   }

public function send_email (){
    $this->load->library('form_validation');

    [SET RULES ARE LOCATED HERE]

    [ERROR DELIMITERS HERE]

    if ($this->form_validation->run() === FALSE) {
        $data['success'] = '';
        $data['page_title'] = 'Contact';
        $data['content'] = 'contact';
        $this->load->view('template', $data);   

    }else{
        $data['success'] = 'The email has successfully been sent';
        $data['name'] = $this->input->post('name');
        $data['email'] = $this->input->post('email');
        $data['message'] = $this->input->post('message');

        $html_email = $this->load->view('html_email', $data, true);

        //load the email class
        $this->load->library('email');

        $this->email->from(set_value('email'), set_value('name'));
        $this->email->to('-----EMAIL----');
        $this->email->subject('Message from Website');
        $this->email->message($html_email);

        $this->email->send();

        $data['page_title'] = 'Contact';
        $data['content'] = 'contact';   
        $this->load->view('template', $data);

        return null;
    }
}

}

4

1 回答 1

1

让我尝试在这个社区发布我的第一个答案:
1. 这是 jQuery 文件,所以你应该使用 .submit() 方法来处理表单提交

  $('form').submit(function() { 

但是如果你想使用点击,你应该用'提交'按钮绑定它

  $('input[type="submit"]').click(function() {

2.您可以使用 .serialize() 方法,而不是将所有表单数据收集在数组中

 data: $('form').serialize(),

3. 在你的控制器中,为什么要加载视图?它是 Ajax 调用,因此常用方法是返回 JSON 响应,具体取决于您的结果:

 if ($this->form_validation->run() === TRUE) {
    $data['success'] = 'The email has successfully been sent';
    $data['name'] = $this->input->post('name');
    $data['email'] = $this->input->post('email');
    $data['message'] = $this->input->post('message');

    $html_email = $this->load->view('html_email', $data, true);

    //load the email class
    $this->load->library('email');

    $this->email->from(set_value('email'), set_value('name'));
    $this->email->to('-----EMAIL----');
    $this->email->subject('Message from Website');
    $this->email->message($html_email);

    $this->email->send();

    $response->validate = true;

    echo json_encode($response);
}

在这种情况下,我消除了 FALSE,因为您已经检查了回调函数的结果:

success: function(msg) 
        {
        if(msg.validate)
                {
                $('form').prepend('<p>Message sent!</p>');
                $('p').delay(3000).fadeOut(500);
                }
                else
                 $('form').prepend('<div id="errors">Message Error</div>');
                 $('p').delay(3000).fadeOut(500);
            }
        });

虽然这是 2012 年的问题,但希望这对偶然发现这个问题的人有所帮助。

于 2013-03-11T08:53:36.503 回答