提交后如何清除文字栏位值

Question

Hey guys does someone of you know how to delete the text field after I click submit? 大家好，我单击提交后知道如何删除文本字段吗？

I have a button "senden" and after I click on this button the value of the text fields above should be deleted and the check box must be unchecked again. 我有一个“ senden”按钮，单击此按钮后，上面的文本字段的值应删除，并且必须再次取消选中该复选框。

I tried some tutorials but it didn' work. 我尝试了一些教程，但是没有用。

Here is my code, if someone wants to help me 这是我的代码，如果有人想帮助我

Answer 1

Try again with jQuery: 使用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);

});

EDIT: 编辑：

In order your checkbox to work, set an id , for example: 为了使您的复选框正常工作，请设置一个id ，例如：

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

Afterwards target the checkbox with: 然后，将复选框定位为：

 $('#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);

 });

Answer 2

Kindly, run the snippet in this answer and see if it meets your requirement. 请运行此答案中的代码片段，看看它是否满足您的要求。 You will find the changes I have done to your code delimited by CHANGES comment in the HTML and JavaScript code. 在HTML和JavaScript代码中，您会发现我对您的代码所做的更改（由CHANGES注释分隔）。

I hope it does and here are my observations: 希望如此，这是我的观察：

Every input that you you want to be submitted (in a standard form submission) must be inside the form ie between the opening <form> and the closing </form> . 您要提交的每个输入（以标准表单提交）必须在form内部，即在开始<form>和结束</form> 。 Thus, I took the liberty of moving the checkbox inside the form. 因此，我自由地将复选框移到了表单内。 Kindly ensure this does not break your existing code. 请确保这不会破坏您现有的代码。
I found client-side validation in your JavaScript code and added the input-clearing code at the end of the success case. 我在您的JavaScript代码中找到了客户端验证，并在成功案例的末尾添加了输入清除代码。 To make the selection of input elements general (and currently limited to textbox and checkbox), I have added the form ID and a general input selector with type, as follows: 为了使输入元素的选择更为通用（目前仅限于文本框和复选框），我添加了表单ID和具有类型的通用输入选择器，如下所示：
// clear the input fields if the form has been processed $('#send input[type="text"]').val(''); $('#send input[type="checkbox"]').prop('checked', false);

 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"; } } } }

 .chkText{ float:left; } .fehlermeldung{ display: none; }

 <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>

Answer 3

Try this one: 试试这个：

 $('#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(); });

 <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>

Answer 4

  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"; } } } }

  .chkText{ float:left; } .fehlermeldung{ display: none; }

 <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>

提交后如何清除文字栏位值

问题描述

4 个解决方案

解决方案1
1 已采纳 2016-11-26 11:15:34

解决方案2
0

解决方案3
0 2016-11-26 11:44:09

解决方案4
0 2016-11-26 12:18:24

提交后如何清除文字栏位值

问题描述

4 个解决方案

解决方案1 1 已采纳 2016-11-26 11:15:34

解决方案2 0

解决方案3 0 2016-11-26 11:44:09

解决方案4 0 2016-11-26 12:18:24

解决方案1
1 已采纳 2016-11-26 11:15:34

解决方案2
0

解决方案3
0 2016-11-26 11:44:09

解决方案4
0 2016-11-26 12:18:24