Как сбросить форму с помощью jQuery with.метод 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>
может ли это возможно, это одна из причин?
13 ответов
вы можете попробовать использовать trigger ()Ссылка
$('#form_id').trigger("reset");
$('#configreset').click(function(){
$('#configform')[0].reset();
});
поместите его в JS fiddle. Сработало как задумано.
Итак, ни одна из вышеупомянутых проблем здесь не виновата. Может, у вас проблемы с идентификацией? Действительно ли клик выполняется?
Edit: (потому что я грустный Мешок без надлежащего комментирования) это не проблема непосредственно с вашим кодом. Он отлично работает, когда вы берете его из контекста страницы, которую вы используете в настоящее время, поэтому, вместо того, чтобы быть чем-то с конкретными данными формы jQuery/javascript & attributed, это должно быть что-то другое. Я бы начал рассекать код вокруг него и попытаться найти, где это происходит. Я имею в виду, просто чтобы убедиться, я полагаю, вы могли бы...
console.log($('#configform')[0]);
в функции click и убедитесь, что он нацелен на правильную форму...
и если это так, это должно быть что-то, чего здесь нет.
редактировать часть 2: Одна вещь, которую вы можете попробовать (если это не так таргетинг на него правильно) используется "вход:перезагрузки" вместо того, что вы используете... кроме того, я бы предложил, потому что это не цель, которая неправильно работает, чтобы узнать, на что нацелен фактический клик. Просто откройте firebug / developer tools, что вы, бросьте в
console.log($('#configreset'))
и посмотреть, что всплывает. и тогда мы сможем уйти оттуда.
согласно этому сообщению здесь, в jQuery нет reset()
метод; но родной JavaScript делает. Итак, преобразуйте элемент jQuery в объект JavaScript, используя:
$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
Это одна из тех вещей, которые на самом деле проще сделать в ванильном Javascript, чем jQuery. у jQuery нет reset
метод, но элемент формы HTML делает, поэтому вы можете сбросить все поля в такой форме:
document.getElementById('configform').reset();
если вы сделаете это через jQuery (как видно из других ответов здесь:$('#configform')[0].reset()
), то [0]
извлекает тот же элемент формы DOM, который вы получите непосредственно через document.getElementById
. Последний подход является более эффективным и простым, хотя (так как с jQuery подход вы сначала получаете коллекцию, а затем должны извлечь из нее элемент, тогда как с ванильным Javascript вы просто получаете элемент напрямую).
кнопка сброса не требует никакого скрипта вообще (или имя или идентификатор):
<input type="reset">
и вы сделали. Но если вы действительно должны использовать скрипт, обратите внимание, что каждый элемент управления формы имеет форма свойство, которое ссылается на форму, в которой оно находится, поэтому вы можете сделать:
<input type="button" onclick="this.form.reset();">
но кнопка сброса-гораздо лучший выбор.
Я, наконец, решить эту проблему!!
@RobG был прав насчет form
tag and table
тег. на form
бирка должна быть помещена вне таблицы. С
<td><input type="reset" id="configreset" value="Reset"></td>
работает без необходимости jquery или чего-либо еще. просто нажмите на кнопку и tadaa~ вся форма сбрасывается;) блестящий!
С помощью 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');
});
вы можете просто добавить тип ввода = reset с id = resetform, как это
<html>
<form>
<input type = 'reset' id = 'resetform' value = 'reset'/>
<!--Other items in the form can be placed here-->
</form>
</html>
тогда с jquery вы просто используете .нажмите () функция на элементе с id = resetform следующим образом
<script>
$('#resetform').click();
</script>
и форма обнуляется Примечание: Вы также можете скрыть кнопку сброса с id = resetform, используя css
<style>
#resetform
{
display:none;
}
</style>
<button type="reset">Reset</reset>
самый простой способ, которым я могу думать, что это надежно. Поместите в тег формы.
ваш код должен работать. Убедитесь . Кроме того, вы можете попробовать вернуться к static/jquery.min.js
. Если это устраняет проблему, то вы точно определили проблему.
вот простое решение с Jquery. Он работает глобально. Взгляните на код.
$('document').on("click", ".clear", function(){
$(this).closest('form').trigger("reset");
})
добавьте четкий класс к кнопке в каждой форме, которую вам нужно сбросить. Например:
<button class="button clear" type="reset">Clear</button>
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();
});
}