1

ページがリロードされないようにしようとしていますが、フォームを送信するときに「登録に成功しました」という小さなメッセージをフォームのどこかに表示したいと考えています。false を返すことでこれを行うことができますが、ユーザーからの入力はデータベースに投稿されません。

前もって感謝します

これが私のコードです：

        <script>

    function validate(form) {
        fail  = validateName(form.name.value)
        fail += validateEmail(form.email.value)
        fail += validateCity(form.city.value)
        if (fail == "") { 
   alert("You have been successfully registered."); return true }
        else { 
   document.getElementById('errors').innerHTML = fail;}
   return false
}

        function validateName(field) {
            if (field == "") return "No name was entered.<br/>"
            else if (field.length < 3) return "Name must be at least 3 characters.<br/>"
            else if (!/[a-zA-Z ]/.test(field)) return "Name can only have alphabetical characters.<br/>"
            return ""
            }
        function validateEmail(field) {
            if (field == "") return "No email was entered.<br/>"
            else if (!((field.indexOf(".") > 0) && (field.indexOf("@") > 0)) || /[^a-zA-Z0-9.@_-]/.test(field)) return "The email address is invalid.<br/>"
            return ""
            }
        function validateCity(field) {
            if (field == "") return "No city was entered.<br/>"
            else if (field.length < 3) return "City must be at least 3 characters.<br/>"
            else if (!/[a-zA-Z ]*$/.test(field)) return "City can only have alphabetical characters.<br/>"
            return ""
            }

    </script>


<form action="<?php echo $editFormAction; ?>" name="subscribe" onSubmit="return validate(this)" id="subscribe" method="POST" autocomplete="off">
<div id="errors"></div>
<input name="name" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" id="name" placeholder="Your name"/>


<input name="email" required id="email" type="email" title="Please enter your email address" placeholder="Your email address"/>

<input name="city" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" id="city" placeholder="Your city"/>

<div id="buttons">
            <input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">

            <input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Submit this!">

            <br style="clear:both;">
        </div>
<input type="hidden" name="MM_insert" value="subscribe">
  </form>

!( https://docs.google.com/file/d/0B69C1JAAohvcYmIyOFdZRGlPRFk/edit?usp=sharing )

4

3 に答える 3

1

以前の投稿者が示したように、フォームを非同期で送信するには、Ajax 関数を作成する必要があります。フォーム ハンドラーは、ページの div に追加できるメッセージを返します。次に例を示します。

$(function() {

    $('#submitbtn').click(function(event) {
        event.preventDefault();
        var form = $(this).closest('form'),
            action = form.attr('action');
        $.post(action, form.serialize(), function(data) {
            $('#form-message').html(data);
        })
    });

});

OP の返信に基づく更新:
私が投稿したコードは、完全なソリューションではなく、Ajax の使用方法の例です。完全なソリューションにするために、元のコードと私が投稿したコードを組み合わせて、フォームが検証ルーチンに合格した場合にのみフォーム送信がトリガーされるようにすることができます。検証ルーチンは event.preventDefault() の後に来るため、フォームがすぐに送信されなくなります。

エラーメッセージの配列を作成します。必須フィールドが欠落するたびに、配列にエラーを追加できます。検証ルーチンの最後に、配列のサイズを確認できます。空の場合、つまりエラーがない場合は、フォームを送信します。1 つ以上のエラーが含まれている場合は、フォームを送信できません。代わりに、エラーを画面に出力します。

私のコード例では、バックエンド フォーム ハンドラーがユーザーに表示するステータス メッセージを含むデータを返すことを提案しました。例：「ご登録ありがとうございます！」または「エラーが発生しました。もう一度お試しください。」ステータス メッセージは、「form-message」の ID を持つ div に追加されます。その機能を作成するには、return ステートメントをバックエンド フォーム ハンドラーに追加し、同様の div 要素をマークアップに追加する必要があります。

于 2013-10-16T04:28:11.603 に答える
0

送信中は、使用して返すformことができますAJAXfalse

AJAXすべてのform値をサーバーに渡すことができますscript

これはあなたがしなければならないことです、

<form id="formID" onsubmit="return mformPost('your_php_action.php', '#formID');">
    <input type="text" name="test" id="test" value=""/>
</form>

のAJAX

function mformPost(destinationUrl, formID) {

    var formData = $(formID).serialize(); // serialize your form data
    $.ajax({
        type: 'POST',
        url: destinationUrl,
        data: formData,
        cache: true,
        async:false,
        error: function(error) {
            alert(error.responseText + error.responseStatus);
        },
        success: function(data){ // return data from your php file
            if(data){
                alert('Successfully registered');
            }

        }
    });
    return false;
}
于 2013-10-16T04:21:13.933 に答える
0

ページをリロードしないようにする場合は、送信アクションを含むフォームを使用しないでください。代わりに AJAX を使用して別の PHP スクリプトにデータを送信し、コールバック関数でブラウザーに通知またはポップアップを起動させます。

jQuery のポスト関数を使用すると、次のようになります。

$("#submitbtn").click(function() { 
    $.post("yourphpscript.php", {name: $("#name").val(), email: $("#email").val(), city: $("#city").val() }, 
    function(){
        $("#submitbtn").after("<p>Successfully registered.</p>");        
    });
});
于 2013-10-16T04:27:37.687 に答える