У меня был рабочий код, который мог сбросить мою форму при нажатии на кнопку сброса. Однако после того, как мой код стал длиннее, я понял, что он больше не работает.
<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>
Может ли это быть одной из причин?
$('#configreset').click(function(){
$('#configform')[0].reset();
});
Вставил его в JS fiddle. Работает, как и предполагалось.
Итак, ни одна из вышеупомянутых проблем здесь не виновата. Может быть, у вас проблема с конфликтующими идентификаторами? Выполняется ли клик на самом деле?
Edit: (потому что я 'грустный мешок без должной способности комментировать) Это 'не проблема непосредственно с вашим кодом. Он работает нормально, когда вы вынимаете его из контекста страницы, которую вы используете в данный момент, так что вместо того, чтобы это было что-то с конкретным jQuery/javascript & приписанными данными формы, это должно быть что-то другое. Я бы начал вырезать код вокруг этого и попытался найти, где это происходит. Я имею в виду, чтобы 'убедиться', я полагаю, вы могли бы...
console.log($('#configform')[0]);
в функции click и убедиться, что она нацелена на нужную форму...
и если это так, то это должно быть что-то, чего здесь нет.
Часть 2: Одна вещь, которую вы можете попробовать (если она не нацелена правильно), это использовать "input:reset" вместо того, что вы используете... Также, я'бы предложил, поскольку это'не цель, которая'работает неправильно, выяснить, на что нацелен фактический клик. Просто откройте firebug/developer tools и т.д., вставьте
console.log($('#configreset'))
и посмотрите, что появится. А потом мы сможем продолжить.
Судя по этому посту здесь, jQuery имеет никакого сброса()
метод, но родной JavaScript делает. Таким образом, преобразования элемента jQuery для JavaScript-объекта с помощью :
$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
Это одна из тех вещей, что'ов на самом деле проще сделать в ванили на JavaScript, чем в jQuery. библиотека jQuery не'Т есть "сброс" способ, но HTML-элемент формы, так что вы можете сбросить все поля в форме такой:
document.getElementById('configform').reset();
Если вы сделаете это через jQuery (как показано в другие ответы здесь: $('#configform')[0].сброс()
), у [0]
- это выборка одной и той же форме элемент DOM, который вы получите сразу через документ.метода getElementById`. Последний подход является более эффективным и проще, хотя (так как с помощью jQuery подход, вы сначала соберите, а потом уже извлечь элемент из него, а с ванильным JavaScript, вы просто получить элемент напрямую).
Кнопке сброса вообще не нужен скрипт (или имя, или id):
<input type="reset">
и готово. Но если вам действительно нужно использовать скрипт, обратите внимание, что каждый элемент управления формой имеет свойство form, которое ссылается на форму, в которой он находится, так что вы можете сделать:
<input type="button" onclick="this.form.reset();">
Но кнопка сброса - гораздо лучший выбор.
Я'вэ, наконец, решить проблему!!
@RobG был прав о теге форма
и тег стол
. в Форма
теге должны быть вынесены за пределы таблицы. с этого
<td><input type="reset" id="configreset" value="Reset"></td>
работает без jQuery или что-нибудь еще. просто кликните по кнопке и нажмите~ вся форма обнуляется ;) гениально!
С помощью функции jQuery .ближайший(элемент) и .найти(...).
Получение родителей элемент и ищет ребенка.
И, наконец, делать функции, необходимые.
$("#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');
});
Первая линия будет сброшена форма входа
$('form#myform').trigger("reset"); //Line1
$('form#myform select').trigger("change"); //Line2
Второй сбросит select2
Дополнительная комплектация: вы можете пользователя это, если у вас есть различные типы зарегистрированы с разных событий
$('form#myform select, form input[type=checkbox]').trigger("change"); //Line2
Быстрый сброс полей формы можно с помощью jQuery функция сброса.
когда вы получили ответ, и тогда успех огонь ниже код.
$("селектор") [0].сброс();
Вы можете просто добавить тип ввода = сброс с 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>
Вот простое решение с jQuery. Это работает во всем мире. Взгляните на код.
$('document').on("click", ".clear", function(){
$(this).closest('form').trigger("reset");
})
Добавить в класс для кнопки в любой форме, что вам нужно сбросить его. Например:
<button class="button clear" type="reset">Clear</button>
<button type="reset">Reset</reset>
Простой способ я могу думать, что является надежной. Место в теге form.
Вы можете использовать следующие.
@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("");
});
});