У меня был рабочий код, который мог бы reset мою форму, когда я нажимаю кнопку reset. Однако после того, как мой код становится дольше, я понимаю, что он больше не работает.
<div id="labels">
<table class="config">
<thead>
<tr>
<th colspan="4"; style= "padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Control Buttons Configuration</th>
</tr>
<tr>
<th>Index</th>
<th>Switch</th>
<th>Response Number</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<form id="configform" name= "input" action="#" method="get">
<tr><td style="text-align: center">1</td>
<td><img src= "static/switch.png" height="100px" width="108px"></td>
<td id="small"><input style="background: white; color: black;" type="text" value="" id="number_one"></td>
<td><input style="background: white; color: black;" type="text" id="label_one"></td>
</tr>
<tr>
<td style="text-align: center">2</td>
<td><img src= "static/switch.png" height="100px" width="108px"></td>
<td id="small"><input style="background: white; color: black;" type="text" id = "number_two" value=""></td>
<td><input style="background: white; color: black;" type="text" id = "label_two"></td>
</tr>
<tr>
<td style="text-align: center">3</td>
<td><img src= "static/switch.png" height="100px" width="108px"></td>
<td id="small"><input style="background: white; color: black;" type="text" id="number_three" value=""></td>
<td><input style="background: white; color: black;" type="text" id="label_three"></td>
</tr>
<tr>
<td style="text-align: center">4</td>
<td><img src= "static/switch.png" height="100px" width="108px"></td>
<td id="small"><input style="background: white; color: black;" type="text" id="number_four" value=""></td>
<td><input style="background: white; color: black;" type="text" id="label_three"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="configsubmit" value="Submit"></td>
</tr>
<tr>
<td><input type="reset" id="configreset" value="Reset"></td>
</tr>
</form>
</tbody>
</table>
</div>
И мой jQuery:
$('#configreset').click(function(){
$('#configform')[0].reset();
});
Есть ли какой-то источник, который я должен включить в мои коды для того, чтобы метод .reset() работал? Раньше я использовал:
<script src="static/jquery.min.js">
</script>
<script src="static/jquery.mobile-1.2.0.min.js">
</script>
и работал метод .reset().
В настоящее время я использую
<script src="static/jquery-1.9.1.min.js"></script>
<script src="static/jquery-migrate-1.1.1.min.js"></script>
<script src="static/jquery.mobile-1.3.1.min.js"></script>
Может ли это быть одной из причин?
Я наконец решил проблему!!
@RobG был прав относительно тега form и тега table. тег form должен быть размещен вне таблицы. с этим
<td><input type="reset" id="configreset" value="Reset"></td>
работает без необходимости jquery или чего-то еще. просто нажмите кнопку и тадаа ~ вся форма reset;) блестящая!
вы можете попробовать использовать trigger() Ссылка Ссылка
$('#form_id').trigger("reset");
$('#configreset').click(function(){
$('#configform')[0].reset();
});
Поместите его в скрипт JS. Работали по назначению.
Таким образом, ни одна из вышеупомянутых проблем не виновата здесь. Может быть, у вас проблема с конфликтом? Выполняется ли клик?
Изменить: (потому что я грустный мешок без надлежащей способности комментирования). Это не проблема непосредственно с вашим кодом. Он отлично работает, когда вы вынимаете его из контекста используемой вами страницы, поэтому вместо того, чтобы быть чем-то с конкретными данными jQuery/javascript и атрибутами формы, это должно быть что-то еще. Я бы начал делить пополам код вокруг него и попытаться найти, где он происходит. Я имею в виду, просто "убедитесь", я полагаю, вы могли бы...
console.log($('#configform')[0]);
в функции щелчка и убедитесь, что он нацелен на правильную форму...
и если это так, это должно быть то, что не указано здесь.
edit part 2: Одна вещь, которую вы могли бы попробовать (если она не нацеливалась на нее правильно), используется вместо "input: reset" вместо того, что вы используете... Кроме того, я бы предложил, потому что это не цель, которая неправильно работает, чтобы выяснить, на что нацелен фактический клик. Просто откройте инструменты firebug/developer, whathave you, бросьте в
console.log($('#configreset'))
и посмотреть, что всплывает. и тогда мы можем идти оттуда.
В соответствии с этим сообщением здесь, jQuery не имеет метода reset(); но родной JavaScript делает. Итак, преобразуйте элемент jQuery в объект JavaScript, используя:
$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
Это одна из тех вещей, которые на самом деле проще сделать в javascript, чем jQuery. jQuery не имеет метода reset, но элемент формы HTML делает, поэтому вы можете reset все поля в форме, подобной этой:
document.getElementById('configform').reset();
Если вы сделаете это через jQuery (как видно из других ответов здесь: $('#configform')[0].reset()), [0] получает тот же самый элемент формы DOM, который вы получите непосредственно через document.getElementById. Последний подход является одновременно более эффективным и простым (поскольку с помощью подхода jQuery вы сначала получаете коллекцию, а затем должны извлекать из нее элемент, тогда как с помощью javascript с помощью ванилин вы просто получаете элемент напрямую).
Кнопка reset вообще не нуждается ни в каком script (или имени или id):
<input type="reset">
и все готово. Но если вы действительно должны использовать script, обратите внимание, что каждый элемент управления формы имеет свойство формы, которое ссылается на его форму, чтобы вы могли:
<input type="button" onclick="this.form.reset();">
Но кнопка reset - гораздо лучший выбор.
Используя функцию jquery .closest(элемент) и .find(...).
Получение элемента parent и поиск дочернего.
Наконец, выполните нужную функцию.
$("#form").closest('form').find("input[type=text], textarea").val("");
Я использую этот простой код:
//reset form
$("#mybutton").click(function(){
$("#myform").find('input:text, input:password, input:file, select, textarea').val('');
$("#myform").find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
});
Вы можете просто добавить тип ввода = reset с id = resetform, подобным этому
<html>
<form>
<input type = 'reset' id = 'resetform' value = 'reset'/>
<!--Other items in the form can be placed here-->
</form>
</html>
то с помощью jquery вы просто используете функцию .click() для элемента с id = resetform следующим образом
<script>
$('#resetform').click();
</script>
и сбрасывает форму Примечание. Вы также можете скрыть кнопку reset с id = resetform с помощью css
<style>
#resetform
{
display:none;
}
</style>
Первая строка сбросит входные данные формы
$('#AddRowform').trigger("reset");
$('#AddRowform select').trigger("change");
Второй сбросит select2
С помощью этой функции сброса jQuery возможен быстрый сброс полей формы.
когда вы получите успешный ответ, стреляйте ниже кода.
$(selector)[0].reset();
<button type="reset">Reset</reset>
Проще всего я могу подумать, что это надежный. Место в теге формы.
Вот простое решение с Jquery. Это работает во всем мире. Посмотрите на код.
$('document').on("click", ".clear", function(){
$(this).closest('form').trigger("reset");
})
Добавить чистый класс для кнопки в каждой форме, вам нужно сбросить его. Например:
<button class="button clear" type="reset">Clear</button>
Вы можете использовать следующее.
@using (Html.BeginForm("MyAction", "MyController", new { area = "MyArea" }, FormMethod.Post, new { @class = "" }))
{
<div class="col-md-6">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
@Html.LabelFor(m => m.MyData, new { @class = "col-form-label" })
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
@Html.TextBoxFor(m => m.MyData, new { @class = "form-control" })
</div>
</div>
<div class="col-md-6">
<div class="">
<button class="btn btn-primary" type="submit">Send</button>
<button class="btn btn-danger" type="reset"> Clear</button>
</div>
</div>
}
Затем очистите форму:
$('.btn:reset').click(function (ev) {
ev.preventDefault();
$(this).closest('form').find("input").each(function(i, v) {
$(this).val("");
});
});
Ваш код должен работать. Убедитесь, что существует static/jquery-1.9.1.min.js. Кроме того, вы можете попробовать вернуться к static/jquery.min.js. Если это устраняет проблему, то вы выявили проблему.
reset(){
this.companyForm["enable"] = true;
jQuery('has-success').each(function () {
jQuery(this).removeClass('has-success');
});
jQuery('.has-error').each(function () {
jQuery(this).removeClass('has-error');
});
jQuery('.has-feedback').each(function () {
jQuery(this).removeClass('has-feedback');
});
jQuery('.help-block').each(function () {
jQuery(this).hide();
});
jQuery('.form-control-feedback').each(function () {
jQuery(this).hide();
});
}