如何在提交后清除文本字段值

时间：2016-11-26 11:04:19

标签： javascript jquery html css

嘿伙计们，当我点击提交后，有人知道如何删除文本字段吗？

我有一个按钮＆＃34; senden＆＃34;点击此按钮后，应删除上面文本字段的值，并且必须再次取消选中复选框。

我尝试过一些教程，但它并没有这样做。工作

这是我的代码，如果有人想帮助我

4 个答案:

答案 0 :(得分：1)

使用jQuery重试：

$('#submit').click(function() {
     //Other code here

     //And end your function with this:
     $("#name").val("");
     $("#ort").val("");
     $("#datum").val("");
     $("input [name='Favorit']").prop("checked", false);

});

修改

要使您的复选框生效，请设置id，例如：

<input type="checkbox" name="Favorit" id="Favorit" value="Favorit">Favorit </input>

然后将复选框定位为：

 $('#submit').click(function() {
 //Other code here

 //And end your function with this (after you gave the checkbox `id`):
 $("#name").val("");
 $("#ort").val("");
 $("#datum").val("");
 $("#Favorit").prop("checked", false);

 });

答案 1 :(得分：0)

请输入此答案中的代码段，看它是否符合您的要求。您将在HTML和JavaScript代码中找到CHANGES注释分隔的代码所做的更改。

我希望确实如此，这是我的观察：

  1. 您要提交的每个输入（在标准表单提交中）必须位于form内，即在开始<form>和结束</form>之间。因此，我冒昧地移动表单内的复选框。请确保这不会破坏您现有的代码。

  2. 我在您的JavaScript代码中找到了客户端验证，并在成功案例结束时添加了输入清除代码。为了使输入元素的选择一般（并且目前仅限于文本框和复选框），我添加了表单ID和带有类型的通用输入选择器，如下所示：

    // clear the input fields if the form has been processed $('#send input[type="text"]').val(''); $('#send input[type="checkbox"]').prop('checked', false);

    3. ＆＃13;
    ＆＃13; 
    window.onload = function() {
  var allArtists = [];


  $('#submit').click(function() {
    var $rowTemplate = $('<tr><td data-id="id"></td><td data-id="name"></td><td data-id="geburtsort"></td><td data-id="geburtsdatum"></td><td data-id="favorite"></td></tr>');

    var artistName = $("#name").val();
    var ort = $("#ort").val();
    var datum = $("#datum").val();
    var favourite = $("[name=Favorit]").is(':checked');
	

  if(artistName!= "" && ort != "" && datum != ""){
	  $('.fehlermeldung').hide();
    allArtists.push([artistName, ort, datum]);

    var rowId = allArtists.length;

    $rowTemplate.find('[data-id=id]').text(rowId);
    $rowTemplate.find('[data-id=name]').text(artistName);
    $rowTemplate.find('[data-id=geburtsort]').text(ort);
    $rowTemplate.find('[data-id=geburtsdatum]').text(datum);
    var checked = favourite ? "checked" : "";
  
    $rowTemplate.find('[data-id=favorite]').html('<div class="chkText">'+favourite+'</div>').append($('<input type="checkbox" id="fave" ' + checked + '>'));
  
    $("#table tbody").append($rowTemplate);
// CHANGES START
// clear the input fields if the form has been processed
$('#send input[type="text"]').val('');
$('#send input[type="checkbox"]').prop('checked', false);
// CHANGES END

  }else{
	  $('.fehlermeldung').show();
  }

  });
  $("#table").on('change','input[type=checkbox]',function(){
  $(this).prev('div').text($(this).is(":checked"));
});
  
};



function myFunction() {
    var input, filter, table, tr, td, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("table");
    tr = table.getElementsByTagName("tr");

    // Loop through all table rows, and hide those who don't match the search query
    for (i = 0; i < tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[1];
      if (td) {
        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  }
    ＆＃13; 
    .chkText{
  float:left;
  }
 .fehlermeldung{
	 display: none;
 }
    ＆＃13; 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Artist</title>
</head>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="css/style.css">
<body>
<div id="layout">
<h1>Künstler hinzufügen</h1>
<form id="send">
    <label>Add artists</label>
    <br>
    <input id="name" type="text" placeholder="Name des Künstlers" />
    <br>

    <label>Ort</label>
    <br>
    <input id="ort" type="text" placeholder="Woher stammt der Künstler" />
    <br>

    <label>Geburtsdatum</label>
    <br>
    <input id="datum" type="text" placeholder="Wann ist der Künstler geboren?" />
    <br>
<!-- CHANGES START - moving the checkbox inside form -->
    <input type="checkbox" name="Favorit" value="Favorit">Favorit </input>
<!-- CHANGES END -->

</form>

<!-- CHANGES START - removing checkbox from outside the form -->
<!--
<p>
    <input type="checkbox" name="Favorit" value="Favorit">Favorit </input>
<p>
-->
<!-- CHANGES END -->

    <input type="button" id="submit" name="senden" value="Senden">
	<div class="fehlermeldung">
	<label id="fehler" style="color: #962d2d"> Bitte füllen Sie alle Zeilen aus!</label>
	</div>
<!-- CHANGES START -->
<br />
<!-- CHANGES END -->
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="     Search for names..">

<table id="table">
    <tbody>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Geburtsort</th>
        <th>Geburtsdatum</th>
		<div>
        <th>Favorit</th>
		</div>
    </tr>
    </tbody>


</table>
</div>
</body>
</html>
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 2 :(得分：0)

试试这个：

＆＃13;
＆＃13; 
$('#submit').click(function() {

  //your codes  

  $("form#send").find('input:text').val('');

  // I reccomend to move all input from the same group inside <form> tag.
  //in this case, <button id=submit> and <input type=checkbox> should be
  //moved within form#send
  
  //$("form#send").find('input:checkbox').prop('checked',false);
  //or
  $("input:checkbox[name='Favorit']").prop('checked', false);

  //set the focus
$("#send").find('input:text')[0].focus();
});
＆＃13; 
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<form id="send">
  <label>Add artists</label>
  <br>
  <input id="name" type="text" placeholder="Name des Künstlers" />
  <br>

  <label>Ort</label>
  <br>
  <input id="ort" type="text" placeholder="Woher stammt der Künstler" />
  <br>

  <label>Geburtsdatum</label>
  <br>
  <input id="datum" type="text" placeholder="Wann ist der Künstler geboren?" />
  <br>
  <!--better to keep this inside form-->
  <p>
    <input type="checkbox" name="Favorit" value="Favorit">Favorit</input>
  </p>
  <input type="button" id="submit" name="senden" value="Senden">

</form>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

＆＃13;
＆＃13; 
  window.onload = function() {
    var allArtists = [];


  $('#submit').click(function() {
    var $rowTemplate = $('<tr><td data-id="id"></td><td data-id="name"></td><td data-id="geburtsort"></td><td data-id="geburtsdatum"></td><td data-id="favorite"></td></tr>');

    var artistName = $("#name").val();
    var ort = $("#ort").val();
    var datum = $("#datum").val();
    var favourite = $("[name=Favorit]").is(':checked');


  if(artistName!= "" && ort != "" && datum != ""){
      $('.fehlermeldung').hide();
    allArtists.push([artistName, ort, datum]);

    var rowId = allArtists.length;

    $rowTemplate.find('[data-id=id]').text(rowId);
    $rowTemplate.find('[data-id=name]').text(artistName);
    $rowTemplate.find('[data-id=geburtsort]').text(ort);
    $rowTemplate.find('[data-id=geburtsdatum]').text(datum);
    var checked = favourite ? "checked" : "";

    $rowTemplate.find('[data-id=favorite]').html('<div class="chkText">'+favourite+'</div>').append($('<input type="checkbox" id="fave" ' + checked + '>'));

     $("#table tbody").append($rowTemplate);
     //And end your function with this (after you gave the checkbox `id`):
     $("#name").val("");
     $("#ort").val("");
     $("#datum").val("");
     $("#Favorit").prop("checked", false);

  }else{
      $('.fehlermeldung').show();
  }
  });
  $("#table").on('change','input[type=checkbox]',function(){
  $(this).prev('div').text($(this).is(":checked"));
});

};



function myFunction() {
    var input, filter, table, tr, td, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("table");
    tr = table.getElementsByTagName("tr");

    // Loop through all table rows, and hide those who don't match the search query
    for (i = 0; i < tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[1];
      if (td) {
        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  }
＆＃13; 
 .chkText{
          float:left;
          }
         .fehlermeldung{
             display: none;
         }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="layout">
<h1>Künstler hinzufügen</h1>
<form id="send">
    <label>Add artists</label>
    <br>
    <input id="name" type="text" placeholder="Name des Künstlers" />
    <br>

    <label>Ort</label>
    <br>
    <input id="ort" type="text" placeholder="Woher stammt der Künstler" />
    <br>

    <label>Geburtsdatum</label>
    <br>
    <input id="datum" type="text" placeholder="Wann ist der Künstler geboren?" />
    <br>
</form>

<p>
    <input type="checkbox" name="Favorit" value="Favorit">Favorit </input>
<p>

    <input type="button" id="submit" name="senden" value="Senden">
    <div class="fehlermeldung">
    <label id="fehler" style="color: #962d2d"> Bitte füllen Sie alle Zeilen aus!</label>
    </div>

    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="     Search for names..">

<table id="table">
    <tbody>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Geburtsort</th>
        <th>Geburtsdatum</th>
        <div>
        <th>Favorit</th>
        </div>
    </tr>
    </tbody>


</table>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题