如何在表单提交后清除所有输入

时间:2014-09-28 16:25:48

标签: javascript jquery

我想在结果成功时清除所有输入值。

我尝试过从Jquery取消绑定但没有得到任何结果

所以任何建议都会很棒

<html>
    <head>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
    </head>
    <body>
        <div id="Result"></div>
        <form id="Form" action="File.php" autocomplete="off">
            <input type="text" name="Name" />
            <br/>
            <input type="text" name="Pass" />
            <br/>
            <input type="button" id="Submit" value="Run Code" />
        </form>
        <script>
            $(document).ready(function()
            {
                $("#Submit").click(function()
                {
                    $("#Form").submit(function(e)
                    {
                        $.ajax(
                        {
                            url: $(this).attr("action"),
                            type: "POST",
                            data: $(this).serializeArray(),
                            success: function(data, textStatus, jqXHR) 
                            {
                                $("#Result").html(data);
                            }
                        });

                        e.preventDefault();
                    });

                    $("#Form").submit();
                });
            });
        </script>
    </body>
</html>

请随时询问更多详情

2 个答案:

答案 0 :(得分:1)

您可以使用

清除所有输入
$("input[type='text']").val('');

您正在另一个事件处理程序中绑定一个事件处理程序。每次单击该按钮时,都会在表单上附加一个新的处理程序。因此,点击次数n后,您将发送najax次请求,您可以看到here

理想情况下,您的代码应为

 $(document).ready(function () {

   $("#Submit").click(function () {
     $("#Form").submit();
   });

   $("#Form").submit(function (e) {
     e.preventDefault();
     $.ajax({
         url: $(this).attr("action"),
         type: "POST",
         data: $(this).serializeArray(),
         success: function (data, textStatus, jqXHR) {
             $("input[type='text']").val(''); // reset the input values
             $("#Result").html(data);
         }
     });
   });
});

Demo

旁注:您只需使用submit按钮,而不是手动触发表单提交,例如this

答案 1 :(得分:-1)

你走了:

$(document).find('input').each(function(){
   $(this).val('');
});

有关详情:http://api.jquery.com/val/