2016-02-18 135 views
5

我读过几篇文章,其中包括thisthis,但我似乎无法在提交后清除输入字段。什么是最基本的/基本的方式来做到这一点?如何重置输入字段? jQuery

目前我有这样的:

$(document).ready(function(){ 
    $('form[name=checkListForm]').on('submit', function() { 
      // prevent the form from submitting 
      event.preventDefault(); 
      var toAdd = $(this).find('input[name=checkListItem]').val(); 
      $('.list').append("<div class='item'>" + toAdd + "</div>") 
      $('input[name=checkListItem').reset(); 
     }); 
}); 

我的HTML是:

<!DOCTYPE html> 
<html > 
    <head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="stylesheet.css">  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script type="text/javascript" src="script.js"></script> 
    </head> 
    <body> 
    <h2>To Do</h2> 
    <form name="checkListForm"> 
     <input type="text" name="checkListItem" /> 
     <button type="submit" id="button">Add!</button> 
    </form> 
    <br/> 
    <div class="list"></div> 
    </body> 
</html> 
+0

一行代码来处理所有的字段'$(formselector)[0] .reset段();' –

回答

11

相反的复位,使用这段代码只是设置一个空白值输入字段:

$('input[name=checkListItem').val(''); 

为了重置特定形式的所有输入,您还可以使用以下代码(使用:input选择器):

$('form :input').val(''); 
+0

谢谢,这工作。作为一个侧面的问题,你知道为什么选择器应该是'input [name = checkListItem'而不是'form [name = checkListForm'? – AlanH

+0

@AlanH:因为你想将输入的值设置为空白,而不是表单的。 – Przemek

+0

@AlanH:这是因为'input'选择器基本上选择了一个表单控件,它有一个可以设置的值,而''('form')''基本上意味着你选择了一个html元素本身而不是表单控件,因为'$('form')'不具有不同于'input'选择器的value属性,请参阅我最近编辑的答案。 – stark

0

这应该工作,(我自己测试过)。

$(document).ready(function(){ 
    $('form[name=checkListForm]').on('submit', function() { 
      //other code 
      $('input[name=checkListItem]').val("") 
     }); 
}); 
0

这一个为我工作;很少修改。我用function(e)e.preventDefault()和使用$('input[name=checkListItem').val('');,而不是重置()的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script> 

    $(document).ready(function(){ 
     $('form[name=checkListForm]').on('submit', function(e) { 
       // prevent the form from submitting 
       e.preventDefault(); 
       var toAdd = $(this).find('input[name=checkListItem]').val(); 
       $('.list').append("<div class='item'>" + toAdd + "</div>") 


       $('input[name=checkListItem').val(''); 
      }); 
    }); 
</script> 

<h2>To Do</h2> 
<form name="checkListForm"> 
    <input type="text" name="checkListItem" /> 
    <button type="submit" id="button">Add!</button> 
</form> 
<br/> 
<div class="list"></div> 
0

我们可以提交后写。

document.getElementById("myform").reset();