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>

コントローラ

class Contact extends 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 に答える