1

ユーザーがボタンを押すと、すべてが正常に機能します。しかし、Enterキーを押すと、ページがリロードされます。私は何が間違っているのですか？

これが私の完全なコードです：

<!doctype html>
<html>
<head>
    <title>Fun!</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <link rel="stylesheet" href="" media="print" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

    <style type="text/css">
        body {
            font-family: arial;
        }
    </style>

    <script type="text/javascript">
        function get() {
            $.post('data.php', { name: form.name.value }, 
                function(output) {
                    $('#age').html(output).show();
                }
            );
        }
    </script>
</head>

<body>
    <div class="container">
        <form action="" name="form" method="post">
            <input type="text" name="name" /> <input type="button" value="Get" onClick="get();" />
        </form><br />

        <div id="age" style="display: none;">Result</div>
    </div>
</body>
</html>

ありがとう。

4

2 に答える 2

3

ボタンのイベントを設定しonclickていますが、これはクリックではないため、Enter キーを押しても機能しません。

脱いonclickで追加

onsubmit="event.preventDefault();get();return false;"

に<form>。

event.preventDefault(); prevents フォームの送信 (Defaultアクション)。

return false;は古いバージョンの Internet Explorer 用です。サポートされていないためe.preventDefault();です。最新のブラウザは無視しreturn false;ます。

于 2012-07-09T00:44:39.743 に答える
0

ユーザーが Enter キーを押すと、フォームが送信されます。ボタンonsubmitのイベントを使用するのではなく、フォームのイベントを探す必要があります。onclick

<form ... onsubmit="get();">
    ...
</form>

ここで、ページが実際に送信されないようにする必要もあります (AJAX を使用したため)。return false;関数の最後に追加しますget()。

メソッドでjQueryを使用してイベントを割り当てることをお勧めします（とにかく使用しているため）on()。

于 2012-07-09T00:46:42.893 に答える