2011年7月29日金曜日

うざいアレを消す

最近は雨が続いて困ります。
基本、自転車での移動ですし洗濯もできません。

今日の本題はこれです。

よくあるフォームの登録画面ですね。
これを送信した後、更新するとこのうざいヤツが出ます。
今日はこれを出ないようにしました。
<html>
    <body>
    <head>
<script type="text/javascript" src="js/jquery-1.6.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.form.js" charset="utf-8"></script>
<script>
$(document).ready(function() {
    $("#form1").submit(function(){
        if($("input:text[name='name']").val() == ""){
            alert("名前を入力してください");
        }
        else if(!$("input:radio[name='gender']").is(":checked")){
            alert("種類を選択してください");
        }
        else{
            var options = {
                success: function(response){
                    if(response == "success"){
                        $("#registMsg").empty().append("登録を完了しました。")
                    }
                    else{
                        $("#registMsg").empty().append("登録済みのアカウント名です。")
                    }
                }
            }
            $(this).ajaxSubmit(options);
        }
        return false;
    });
});
</script>
</head>
        <form action="" method="post" id="form1">
            <p>名前<input type="text" name="name"/></p>
            <p><input type="radio" name="gender" value="male"/>男性
            <input type="radio" name="gender" value="female"/>女性</p>
            <input type="submit" value="登録">
        </form>
        <p id="registMsg"></p>
    </body>
</html> 

使ったのはjQuery Form Pluginです。
これのajaxSubmit()を使いました。
jQueryでformのsubmit時の動作を定義します。
例では値の空チェックとかやってます。
ajaxSubmitがちゃんと行われた後の動作をオプションで指定し、
呼び出します。
登録用のphpにprintとかでレスポンス用のメッセージを出力します。
それで判定に応じた結果を返します。
最後はreturn false;です。
これをしないと通常のsubmitを行ってしまいますので気を付けてください。

0 件のコメント:

コメントを投稿