1

MOUSE CLICK と ENTER からもフォームを送信しています。

Ajax呼び出しは、私がすでにデータベースにある指定があるかどうかをチェックしています。そうでない場合、ユーザーはフォームを送信できます。そうでない場合、送信ボタンは無効になります

Jクエリ

function check_designation(e){

    text = $('#req1').val();
    data = "data=" + text;          
    text_length = text.length           

    if(text_length == 0)
    {
        $('#result_span').html('');
    }       

    if(text_length > 3 ){
        $.ajax({
            url: "designation_ajax.php",
            type: "POST",
            data: data,    
            cache: false,
            success: function (response) {
                if ($.trim(response) == "access") { 
                    $("#result_span").html('<div class="green">' + text + ' is available '+'</div>');
                    $('#create_desg').removeAttr('disabled');
                }
                else if ($.trim(response) == "no access") {                                                         
                    $("#result_span").html('<div class="red">' + text + ' is already in use'+'</div>'); 
                    $('#create_desg').attr('disabled','disabled');                                                      
                }

                else { 

                    alert('Sorry, unexpected error. Please try again later.');

                }
            }      
        }); 
    }
    else{
        $("#result_span").html('');     

    }

    return true;        
}

HTMLフォーム

<form id="formID" class="formular" method="POST" action="" onsubmit="formSubmit()" >
  <fieldset>
    <legend>Create Desination</legend>
    <label> Designation<br clear="all" />
      <input autocomplete="off" onkeyup="check_designation(event)" value="" class="validate[required,minSize[4]] text-input float_left" type="text" name="name" id="req1" />
      <span id="result_span"></span>
    </label>
    <br clear="all" />
    <input id="create_desg" value="Submit" type="button" />
  </fieldset>
</form>

問題：：：：

今何が起こるか DISABLE ボタンは解決策ではありません...テーブルにすでに DESIGNATION がある場合..送信ボタンは無効になりますが、ENTER によって送信され、ページをリロードしたくありません。ENTERを押すとAJAXが機能しません

4

1 に答える 1

4

onsubmitデフォルト アクションをキャンセルするには、ハンドラーから false を返す必要があります。しかし、私はおそらくあなたのコードを少しきれいにして、控えめにsubmitイベントにサブスクライブします:

<form id="formID" class="formular" method="POST" action="">
    <fieldset>
        <legend>Create Desination</legend>
        <label>
            Designation<br clear="all" />
            <input autocomplete="off" value="" class="validate[required,minSize[4]] text-input float_left" type="text" name="name" id="req1" />
            <span id="result_span"></span>
        </label>
        <br clear="all" />
        <input id="create_desg" value="Submit" type="button" />
    </fieldset>
</form>

onkeyup入力フィールドから意図的にイベントを削除したことに気付くでしょう。このフィールド内でユーザーがキーを押すたびに AJAX リクエストでサーバーを攻撃しても、サーバーには何の役にも立ちません。これを実装したい場合は、AJAX リクエストを送信する前に、何らかの入力が蓄積されて調整されるのを待つことをお勧めします。

その後：

$(function() {
    $('#formID').submit(function() {
        var text = $('#req1').val();
        if(text.length == 0) {
            $('#result_span').html('');
        }       

        if(text.length > 3) {
            $.ajax({
                url: 'designation_ajax.php',
                type: 'POST',
                data: { data: text },
                cache: false,
                success: function (response) {
                    if ($.trim(response) == 'access') { 
                        $('#result_span').html('<div class="green">' + text + ' is available '+'</div>');
                        $('#create_desg').removeAttr('disabled');
                    }
                    else if ($.trim(response) == 'no access') {
                        $("#result_span").html('<div class="red">' + text + ' is already in use'+'</div>'); 
                        $('#create_desg').attr('disabled', 'disabled');
                    } else { 
                        alert('Sorry, unexpected error. Please try again later.');
                    }
                }      
            }); 
        } else {
            $('#result_span').html('');     
        }

        // return false to prevent the default action
        return false;
    });
});

また、コールバックで解析およびトリミングしている一部の文字列designation_ajax.phpの代わりに、スクリプトが JSON を返すようにします。accessno accesssuccess

于 2012-04-13T17:04:50.147 に答える