0

メールを送信するフォームを作成したいのですが、新しいページをロードせず、同じページのいくつかの CSS 値を変更するだけです。

私はこのサイトを検索しており、いくつかのコードで遊んでいます。JavaScript (検証)、PHP (電子メールの処理と書式設定)、jQuery (電子メールの送信と CSS の変更) を使用してこれを実行しようとしましたが、まったく正しくありません。私はこれらの言語にかなり慣れていないので、少し難しいです。

現在、JavaScript を介してフォームを正しく検証し、検証しない限り送信しません。完全。また、素晴らしいメールを送信します。問題は、現在のページに留まるのではなく、PHP ページをロードすることです。エコー「ありがとう...」は、jQuery を介して HTML の div ではなく PHP ページに配置されます。また、PHP と jQuery のコードに戸惑っています。現在 PHP がメールを送信していますが、代わりに jQuery が送信することになっています。しかし、PHP から削除すると、メールは送信されません。

これらすべてのピースをまとめるのを手伝ってくれたら、きっとありがたいです!

HTML フォーム: 

                <form id='form' method='post' onsubmit="return validateForm()" action='sendemail.php'>
                    Name: <br />
                    <input type="text" id="name" name="name" />
                    <br />
                    Email: <br />
                    <input type="email" id="email" name="email" />
                    <br /><br />
                    Subject: <br />
                    <input type="text" id="subject" name="subject" />
                    <br />

                    Comments:</a> <br />
                    <textarea id="comments" name="comments" rows="10" cols="60"></textarea>
                    <br />

                    <input type="image" src="..." alt="Submit" name="myFormSubmitted" value="Submit" />        
                </form>
                <div id="formResponse" style="display: none;"></div>

JavaScript (検証):

<script type="text/javascript">
            function validateForm() {
                var validName = false;
                var validEmail = false;
                var validSubject = false;
                var validComments = false;

                //Perform validation here...

if (validName && validEmail && validSubject && validComments) {
return true;
} else {
return false;
}

PHP sendemail.php (フォームの処理、電子メールのフォーマット):

<?php
if(isset($_POST['myFormSubmitted'])) {
//Construct format here.....
// Blank message to start with so we can append to it.
    $message = '';

    // Construct the message
    $message .= <<<TEXT
        Name: {$_POST['name']}
        Email: {$_POST['email']}
        Subject: {$_POST['subject']}
        Comments: {$_POST['comments']}  
        {$checkString}
TEXT;
$to = 'sendToThisEmail@example.com';
$subject = $_POST['subject'];
$from = $_POST['name'];
$fromEmail = $_POST['email'];

    $header = 'From: ' . $from . '<' . $fromEmail . '>';

    //Send the email - shouldn't be here!
    mail($to, $subject, $message, $header);

    echo 'Thank you for your Email. We will get in touch with you very soon.';
}
?>

jQuery (メールの送信、CSS の変更):

$("#form").submit(function() {
    $.post('sendemail.php', {name: $('#name').val(), email: $('#email').val(), comments: $('#comments').val(), myFormSubmitted: 'yes'}, function(data) { //I don't understand this line
        $("#formResponse").html(data).fadeIn('100'); //Place echo in original page
        //Add more CSS changes here...
        $('#name, #email, #comments').val(''); // Clear the inputs - what does this do?
    }, 'text');
    return false;
});
            }
4

7 に答える 7

2

フォームが実際に投稿して PHP ページに移動しないようにするpreventDefault()には、jQuerysubmit()関数で次のようにする必要があります。

$("#form").submit(function(event) {
    event.preventDefault();
    if (validateForm) {
        $.post(
            'sendemail.php',
            {
                name: $('#name').val(),
                email: $('#email').val(),
                comments: $('#comments').val(),
                myFormSubmitted: 'yes'
            },
            function(data) { //I don't understand this line
                $("#formResponse").html(data).fadeIn('100'); //Place echo in original page
                //Add more CSS changes here...
                $('#name, #email, #comments').val(''); // Clear the inputs - what does this do?
            },
            'text'
         );
     } else {
         // form is not validated, perhaps do something to notify user here
     }
}

この onsubmit 関数を使用してフォーム検証も追加したことに注意してください。これにより、要素から onsubmit プロパティを削除できます<form>。

これにより、他のすべてが機能するようになります。

于 2012-12-06T20:09:28.353 に答える
1

onsubmitを呼び出す属性があるため、フォームが送信されますvalidateForm()。すべてが有効な場合、validateForm() は true を返します。その属性を削除し、jQuery submitEventHandler で関数を呼び出して、イベントがバブリングしないようにする必要があります。

$("#form").submit(function(e) {
    if (validateForm()) {
        $.post(
            'sendemail.php', 
            {
                name: $('#name').val(), 
                email: $('#email').val(), 
                comments: $('#comments').val(), 
                myFormSubmitted: 'yes'
            }, 
            function(data) {
                $("#formResponse").html(data).fadeIn('100');
                $('#name, #email, #comments').val(''); /* Clear the inputs */
            }, 
            'text'
        );
    }

    // LINES ADDED
    e.preventDefault();
    e.stopPropagation();

    return false;
});
于 2012-12-06T20:07:26.960 に答える
0

これはそのように行うことはできません：

フォームを作成した場合、送信された場合、送信はサーバーにのみ送信されます。これにより、ページがリロードされます。

1つの解決策は、フォームを名前付きiframeに送信することです。

<iframe height="1px" width="1px" name="hiddenSubmit" src="" />
<form id='form' method='post' onsubmit="return validateForm()" action='sendemail.php' target='hiddenSubmit'>[...]
于 2012-12-06T20:35:09.703 に答える
0

ピースを結合するには:

jQuery ライブラリを、それを使用するスクリプトの前にヘッドに追加します。<script src="...">

jQueryパーツをスクリプトとしてドキュメントのどこかに追加します。これ<head>には最高の場所です。コードを外部ドキュメントに保持することも役立ちます。

スクリプトがフォームの前に含まれている場合は、コードを で囲みます$(document).ready(function(){...})。そうでない場合は、将来のバグを防ぐためにとにかくそれを行うことができます。

パーツをスクリプトとして追加しJavascriptます。ほとんどの場合、パーツと同じscriptタグに追加しjQueryます。

ハンドラーが を呼び出すonsubmitため、フォームから属性を削除します。submitvalidateForm

this送信ハンドラー内では、送信されるフォームを参照します。これを有利に利用できます。

于 2012-12-06T20:18:03.600 に答える
0

フォームを送信する代わりに、「送信」ボタンをバインドして Ajax 呼び出しを PHP に送信します。PHP は必要なことを行い、制御とデータを JavaScript に返します。JavaScript は、そのデータに応じて追加のアクションを実行できます。

グーグル「アヤックス」。これがすべてを機能させるための鍵です。

于 2012-12-06T20:06:37.110 に答える
0

PHPスクリプトへの非同期ajax呼び出しを行う必要があります。具体的な詳細については、 http://api.jquery.com/jQuery.ajax/を参照してください。ただし、使用できるスニペットを次に示します (もちろん、いくつかの変更を加えて)。

$.ajax({
    url: "sendemail.php",
    type: 'post',
    success: function() {
        $(this).addClass("someclass");
    }
});
于 2012-12-06T20:10:57.950 に答える