HTMLフォーム送信でJavaScriptコードを実行する

StackOverflow https://stackoverflow.com/questions/1604238

質問

ねえ、私は私のウェブサイトに人々をログインするために使用されるHTMLフォームを使用しています、私はそれがAJAX（jQuery）を使用するようにそれを構築していますが、私はいくつかの問題を抱えています。

JavaScriptは次のとおりです。

function validateLoginDetails() {
    $('[name=loginUser]').click(function() {
        $("#mainWrap").css({ width:"600px", height:"200px" });
        $("#interfaceScreen").load("modules/web/loginForm.php?username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
    });
}

これはhtmlフォームです：

<form id="formLogin" name="loginUser" method="post">
    Username<br /><input id="username" name="username" type="text" maxlength="30" style="width:160px; border:solid 1px #444444;" /><br /><br />
    Password<br /><input id="password" name="password" type="password" maxlength="50" style="width:160px; border:solid 1px #444444;" /><br /><br />
    <input id="submit" type="submit" value="Play" style="width:100px; background:#FFFFFF; border:solid 1px #444444;" />
</form>

問題は、フォームを送信するとコードが実行されるが、以前の状態に戻ると、奇妙に聞こえるかもしれませんが、divサイズを変更してから元に戻すとすぐにわかるのでわかります元のサイズ。

アイデアはありますか

編集：たとえば、以下のリンクを使用してコードを実行すると、正常に機能します。

<a href="#" name="loginUser">Clicky</a>
役に立ちましたか？

解決

AJAX呼び出しを行った後、実際のフォームポストを実行しないように、ハンドラーからfalseを返す必要があります。

これが私がすることです。

$(function() {
     $('#formLogin').submit( function() {
         $('#mainWrap').css( { width: '600px', height: '200px' });
         $.post( 'modules/web/loginForm.php',
                 $(this).serialize(),
                 function(data) {
                     $('#interfaceScreen').html(data);
                 }
         );
         return false;
     });
});

URL（ユーザー名とパスワードを含む）がWebログに公開されないように、投稿を使用していることに注意してください。また、フォームを含むページがhttps経由でロードされたため、投稿も保護されると想定しています。

他のヒント

tvanfossonが正しい道を進んでいると確信しています。 return関数をクリック関数に移動するか、イベントをキャンセルしてみてください。

$('[name=loginUser]').click(function() {
    //do stuff
    return false;
});

or

$('[name=loginUser]').click(function(e) {
    e.cancel();
});

フォームの送信を扱う場合は、.click（）イベントハンドラーではなく、.form（）イベントハンドラーを実際に選択する必要があります。前者では、フォームが他の方法で送信された場合、チェックは引き続き実行されますが、クリックはアクションを実行する1つの要素に依存します。また、このイベントでfalseまたはpreventDefault（）を返す必要があるため、関数は実際に正しく起動します。

もう1つ（これは提供したコードサンプリングに基づいて非常に重要/重要ではないかもしれません）は、呼び出す必要がある関数でそのイベントハンドラーをバインドしていることです。そうです（下記参照）？

個人的にこのようにコードを修正します：

$(document).ready(function() {
    $('#formLogin').submit(function() {
        $("#mainWrap").css({ width:"600px", height:"200px" });
        $("#interfaceScreen").load("modules/web/loginForm.php?username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
        return false;
    });
});

まず、.phpファイルがエラーではなくコンテンツを返していることを確認しましたか？ （ $ load を使用して）コンテンツを挿入する場合、（ロードから）予想されるコンテンツが正常に返されるまで、divでCSSコマンドをトリガーしないでください。コールバックを使用します。また、フォーム固有の関数である .submit（）を使用して、フォームタグおよび/またはidへの直接参照を使用して、物事を高速化することをお勧めします（jqueryは、DOMで多くのことを検索しません） ）。

< style >

.loadReg{ width:[yourBeginWidth]; height:[yourBeginHeight];}

.loadSuccess{ width:600px; height:200px;}

< / style >

function validateLoginDetails() {
  $('#formLogin').submit(function() {
    // using load(url,{data:toPOST},callback(if successful));

    $("#interfaceScreen").load("modules/web/loginForm.php?",
    {"username": encodeURIComponent(username), "password": encodeURIComponent(password)},
    function(){$("#mainWrap").toggleClass('loadSuccess');} 
    );// end load

  });// end submit

  return false;
}

これはさらに効率的で目立たなくなる可能性がありますが、認識可能なままにしておきたいと考えました。他の人は正しいです...あなたのDivが元のサイズに戻っている場合...それはページがリロードすることが許可されているためです...その場合、最初のDIV幅/高さはブラウザによって適用されます...代替の幅/高さはjquery onsubmitによってのみ適用されるため。

要約：

  1. 送信イベントをフォームに直接割り当てる
  2. 値のペアを渡す $ load ビルトイン機能は、オブジェクト {name：val}
    3. です。
  3. CSSを控えめな状態に移行するか、コードに埋もれる
  4. 成功した場合にCSSをトリガー
  5. ページの再読み込みとリセットの停止
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top