0

次のJQuery「フォーム」は機能します（ajaxを介してデータを送受信します）が、

 <div id="formContact">

タグにするformと、機能しません。どうしてこれなの？

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Testing - Test</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <script type="text/javascript" src="systemJavascript/jquery-1.4.4.min.js"></script>
        <style type="text/css">

            #result {
                margin: 10px;
                background: #eee;
                padding: 10px;
                height: 40px;
                overflow: auto;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $('#resultArea').html('click button');
                $('button#formButton').click(function() {
                    console.log('we only get here if form is a DIV element, not a FORM element');
                    $('button#formButton').blur();
                    $('#firstName').focus();
                    $.post(
                    'testAjaxProcess2.php',
                    {
                        firstName: $('#firstName').val(),
                        lastName: $('#lastName').val()
                    },
                    function( jsonString )
                    {
                        var data = $.parseJSON(jsonString);
                        $('div#resultArea').html(data['message']);
                    });
                });
            });

        </script>
    </head>
    <body>
        <h2>Form</h2>
        <div id="formContact">
            <div>First Name:<input type="text" id="firstName"/></div>
            <div>Last Name:<input type="text" id="lastName"/></div>            
            <div><button id="formButton">Send</button></div>
        </div>
        <h2>Result</h2>
        <div id="resultArea">
        </div>
    </body>
</html>
4

1 に答える 1

5

最良の推測-デフォルトでは、abuttonはフォームの送信ボタンとして機能します。これを停止するために、クリックハンドラーのデフォルトのアクションを防止したい：

$('button#formButton').click(function(e) { // assign event object
  e.preventDefault( ); // Stop the form being submitted.
  console.log('we only get here if form is a DIV element, not a FORM element');
});

編集：私はこれをjsfiddleで確認しました：http：//jsfiddle.net/Y2MdZ/

于 2012-11-16T13:16:42.047 に答える