0

登録フォームを改良しており、jQuery を使用してフォームを簡素化しようとしています。

Teachersサイトへのユーザーは、 のいずれか、Donorsまたは両方 である可能性があります。Teachers必要のないフィールドがDonorsあり、その逆もあります。そのため、フォームにすべてのフィールドを詰め込み、教育レベルを尋ねることで海外のユーザーを混乱させるのではなく、ドロップダウン リストを実装して、ユーザーが自分の役割を選択できるようにし、固有の必須フィールドがappend()メソッドを介して表示されるようにしました。

これは私がこれまでに構築したフォームです。

<g:formRemote name="register" url="[controller:'user', action:'register']" onSuccess="showFields()">
    <dl>
        <dt>User name</dt>
        <dd><g:textField name="username" value ="${user?.username }"/></dd>

        <dt>Password</dt>
        <dd><g:passwordField name="password" value = "${user?.password }"/></dd>

        <dt>Repeat Password</dt>
        <dd><g:passwordField name="passwordRepeat" value = "${user?.passwordRepeat }" /></dd>

        <dt>Account Type</dt>
        <dd>
            <g:select name="role" from="${['Teacher', 'Donor', 'Both'] }"/>
        </dd>
    </dl>



    <input type="submit" value="Register" />
</g:formRemote>

そしてスクリプトは

<script type="text/javascript">
    $('#role').change(function(){
        var user = $('#role option:selected').text();

        alert(user);

        if (user == 'Teacher'){

        } else if (user == 'Donor'){

        } else {

        }

    });
</script>

firebug を使用して、選択リストに id があることを確認しましたroleが、関数は起動していません。実際、私がどのような選択をしても、完全に無視されます。

なぜこうなった？

4

2 に答える 2

3

問題は、DOM がロードされる前にスクリプトが実行されることです。したがって、イベントハンドラーをバインドしようとすると、要素が存在しません。

したがって、ドキュメント準備完了イベント内に完全な関数をラップする必要があります。これは、完全な DOM がロードされた後に変更イベントハンドラーをバインドしようとします。

$(document).ready(function (){
    $('#role').change(function(){
        var user = $('#role option:selected').text();

        alert(user);

        if (user == 'Teacher'){

        } else if (user == 'Donor'){

        } else {

        }
    });
});

または、ページの下部にスクリプトを追加するだけです。おすすめではありませんが参考までに…

于 2012-04-16T21:46:23.677 に答える
1

あなたがする必要があります：

$("[name='role']").change(function () {

を使用して id プロパティを選択して#nameいます。上記のコードを使用して、役割の name 属性を持つ要素を選択しています。

于 2012-04-16T20:35:59.140 に答える