3

この大規模な Web アプリの単純化された例では、ユーザー名、名、姓、および登録ボタン というフィールドを持つ単純な登録フォームを考えてみましょうtype="button"。

<form action="" method="post" id="cns_form">
    <table id="companyTable"><tr>
        <td width="200">
            First name*:<br />
            <input type="text" id="first_name" name="first_name">
        </td>
        <td width="200">
            Last name*:<br />
            <input type="text" id="last_name" name="last_name">
        </td>
    </tr></table>
    <input type="button" value="Register" id="register" >
</form>
<div id="alert" title="Alert"></div>

ユーザー名フィールドの入力が完了すると、jQuery はデータベースの ajax 検索を起動して、そのユーザー名が既に存在するかどうかを確認します。これと同じ検索は、1 回のクリックでもトリガー されますRegister(この単純化された例から削除された理由により)。

問題: ユーザー名フィールドを離れると、すべてがうまく機能します。ただし、 をクリックした後Register、AJAX 検索の結果を取得し、ユーザー名が既に存在する場合にフォームの送信を停止する方法がわかりません。私はあらゆる種類のことを試しましたが、コードをこの状態に戻したので、読者が支援するのが最も簡単です.

たとえば、この質問から提案された解決策を統合しようとしましたが、自分の状況に適用できませんでした... async:falseajax 関数内で設定しようとしました... また、checkForm 関数内から checkUsername(uname) を呼び出してみました。しかし、それもうまくいきませんでした。少しの援助？

jQuery document.ready:

$(function(){
    $('#username').blur(function() {
        var uname = $.trim($(this).val());
        checkUsername(uname);
    }); //END BLUR username

    $('#register').click(function() {
        var uname = $.trim($( '#username').val());
        checkUsername(uname);
        checkForm();
    });
}); //END document.ready

AJAX 呼び出し:

function checkUsername(uname) {
        if (uname != '') {
            $.ajax({
                type: "POST",
                url: 'ajax/ax_all_ajax_fns.php',
                data: 'request=does_this_username_already_exist&username=' + uname,
                async: false,
                success:function(data){
//alert('Returned AJAX data: '+data);
                    if (data != 0) {
                        var existing_user = data.split('|');
                        var fn = existing_user[0];
                        var ln = existing_user[1];
                        focus_control = 'username';
                        $( '#alert' ).html( 'That username is already in use by ' + fn +' '+ ln +'. Please choose another.' );
                        $( '#alert' ).dialog( 'open' );
                    } //EndIf data<>0
                } //End success
            }); //End $.ajax
        } //End If this.val <> ""
}

checkForm 関数:

function checkForm() {
    var un = $.trim($( '#username').val());
    var fn = $( '#first_name').val();
    var ln = $( '#last_name').val()

    if (un=='' || fn=='' || ln=='') {
        $( '#alert' ).dialog({
            height: 200,
            width: 300,
        });
        $( '#alert' ).html( 'Fields marked with an asterisk are required.' );
        $( '#alert' ).dialog( 'open' );
    } else {
        $("#cns_form").submit();
    }
}
4

3 に答える 3

4

人は自分の質問に答えるとき、喜んだり泣いたりしますが、こうなります。解決策は、checkUsername() 関数を入力パラメータとして checkForm() 関数に送信し、checkUserName() 関数が checkForm() 内でチェックできる値を返すようにすることでした。

したがって、$('#register').click関数を次のように変更する必要があります。

$('#register').click(function() {
    var uname = $.trim($( '#username').val());
    checkForm(checkUsername(uname)); //<===========================
});

THEN checkUsername() 関数、したがって:

function checkUsername(uname) {
        var returnVal = 0; //<=================================
        if (uname != '') {
            $.ajax({
                type: "POST",
                url: 'ajax/ax_all_ajax_fns.php',
                data: 'request=does_this_username_already_exist&username=' + uname,
                async: false,
                success:function(data){
//alert('Returned AJAX data: '+data);
                    if (data != 0) {
                        var existing_user = data.split('|');
                        var fn = existing_user[0];
                        var ln = existing_user[1];
                        focus_control = 'username';
                        $( '#alert' ).html( 'That username is already in use by ' + fn +' '+ ln +'. Please choose another.' );
                        $( '#alert' ).dialog( 'open' );
                        returnVal = 0; //<============================
                    } //EndIf data<>0
                } //End success
            }); //End $.ajax
        } //End If this.val <> ""
    return returnVal; //<==============================
}

AND checkform() 関数は次のようになります。

function checkForm(exists) { //<============================
alert('sub checkForm(). value of exists: ' + exists);
    if (exists==9) { //<================================
        $( '#alert' ).html( 'That username is already in use' + existing +'. Please choose another.' );
        $( '#alert' ).dialog( 'open' );
    }else{ //<==========================================
        var un = $.trim($( '#username').val());
        var fn = $( '#first_name').val();
        var ln = $( '#last_name').val()

        if (un=='' || fn=='' || ln=='') {
            $( '#alert' ).dialog({
                height: 200,
                width: 300,
            });
            $( '#alert' ).html( 'Fields marked with an asterisk are required.' );
            $( '#alert' ).dialog( 'open' );
        } else {
            $("#cns_form").submit();
        }
    } //<===================================================
}

この有益な投稿をしてくれた Felix Kling に感謝し、称賛します。

于 2013-02-07T00:26:18.857 に答える
2

return false関数呼び出しを HTML フォーム マークアップに入れることができます。

<form>
    <bunchOfElements />
    <button onclick="checkUserName(); return false">Check Name </button>
</form>

また、次を使用して関数をボタンのクリック イベントにバインドすることもできます。

$(document).ready(function(){
    $("#buttonID").bind('click', function(){ 
        //do your thing
        checkForm();
    });
});
于 2013-02-06T21:11:07.400 に答える
1

#registerreturn falseボタンクリック関数の最後のすぐ下にを置きますcheckForm()。ボタンは引き続きフォーム送信を起動します。javascript関数で処理する場合。

于 2013-02-06T21:02:32.403 に答える