Question

我做了一个简单的测试用例，假设在textarea中取值并将其放入带有id＆＃34; submit-output＆＃34;的div中。没有刷新，但由于某种原因，它不起作用。

点击提交按钮似乎没有调用postMessage（）函数，甚至在我最后返回false时重新加载页面。

有人可以告诉我为什么提交按钮使用默认行为吗？

<html lang="en">  
    <head>  
        <meta charset="utf-8">
        <title>Test Case</title>
    </head>
    <body>

    <div id="submit-output">[No output]</div>
    <form id="post-form">
            <textarea name="post" rows="2" cols="50"></textarea>
        <input type=submit value="Submit" id="submitbutton" onclick="postMessage()">
    </form>

    <script src="http://code.jquery.com/jquery.js"></script>
    <script>
        $(document).ready(function() {
            function postMessage(){
                $('#post-form').submit(function(){
                    console.log("submit");
                    $('submit-output').html($('#post-form').children('.post').val());
                    console.log("submitted");
                    elem.children('.post').val("");
                    return false;
                });
            }
        });
    </script>
    </body>
</html>

Answer 1

你不需要onclick =＆＃34; postMessage（）＆＃34;在输入标记中，删除它并删除postMessage（）函数。还要添加event.preventDefault（）;像这样：

<html lang="en">  
    <head>  
        <meta charset="utf-8">
        <title>Test Case</title>
    </head>
    <body>

    <div id="submit-output">[No output]</div>
    <form id="post-form">
            <textarea name="post" rows="2" cols="50"></textarea>
        <input type=submit value="Submit" id="submitbutton">
    </form>

    <script src="http://code.jquery.com/jquery.js"></script>
    <script>
        $(document).ready(function() {
            $('#post-form').submit(function(event){
                event.preventDefault();
                console.log("submit");
                $('#submit-output').html($('#post-form').children('.post').val());
                console.log("submitted");
                return false;
            });
        });
    </script>
    </body>
</html>

Answer 2

你不应该使用＆＃34;点击＆＃34;提交按钮的事件，只有＆＃34;提交＆＃34;形式的事件。

此外，$（＆＃39; submit-output＆＃39;）命令将尝试查找具有此名称的TAG，而不是ID，您应该使用$（＆＃34;＃submit-output＆＃34; ）而不是。

其他重要的事情：您需要使用e.preventDefault（）来阻止发布表单的事件。

代码工作：

<div id="submit-output">[No output]</div>
<form id="post-form">
    <textarea id="txtInput" name="post" rows="2" cols="50"></textarea>
    <input type="submit" value="Submit" id="submitbutton" />
</form>

使用Javascript：

$(document).ready(function() {
    $("#post-form").submit(function(e) {
        e.preventDefault();
        $("#submit-output").html($("#txtInput").val());
        $("#txtInput").val("");
    });
});

DEMO FIDDLE

Answer 3

`

测试用例

<div id="submit-output">[No output]</div>
<form id="post-form">
        <textarea name="post" rows="2" cols="50"></textarea>
    <input type=submit value="Submit" id="submitbutton" >
</form>

<script src="http://code.jquery.com/jquery.js"></script>
<script>
    $(document).ready(function() {
        function postMessage(){
           console.log("submit");
          $('#submit-output').html($('#post-form').children('.post').val());
          console.log("submitted");
          elem.children('.post').val("");
          return false;

        }
      $('#post-form').submit(postMessage);
    });
</script>
</body>

` 试试这个

提交按钮.submit恢复为默认行为

3 个答案: