Question

使用CI和电子邮件类完成php表单后，我能够收到包含用户数据的HTML电子邮件 - 很棒。现在，除了CI验证，我想包括客户端验证（AJAX）与一个很好的fadeIn或fadeOut效果，并仍然运行CI验证，以防javascript关闭。

此处包含的代码是我迄今为止从各种来源获得的代码，我知道这不完整但不确定我是否在正确的轨道上？到目前为止，我所拥有的表单仍然可以正常工作，我认为它仍在运行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>

CONTROLLER

类联系人扩展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;
    }
}

}

Answer 1

让我试着在这个社区发表我的第一个答案：
1.这是jQuery文件，因此您应该使用.submit（）方法来处理表单提交

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

但是如果你想使用click，你应该用'submit'按钮

绑定它

  $('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年的问题，但希望能帮助那些偶然发现这个问题的人。

Codeigniter AJAX电子邮件验证

1 个答案: