リセットボタンをクリックするとフォームがリセットされるコードを持っていました。しかし、コードが長くなってから、もう動かないことに気づきました。
<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フィドルに入れた。意図したとおりに動きました。
つまり、前述の問題のどれにも非はありません。もしかしたら、IDが衝突しているのでは?クリックは実際に実行されていますか?
編集:(私は適切なコメント機能を持たない哀れな人間なので)あなたのコードに直接問題があるわけではありません。そのため、特定のjQuery/javascriptや属性付きフォームデータに問題があるのではなく、何か他の原因があるはずです。だから、特定のjQuery/javascriptとアトリビュートされたフォーム・データが原因なのではなく、他の何かが原因なんだ。つまり、念のため...
console.log($('#configform')[0]);
をクリック関数に追加して、正しいフォームをターゲットにしていることを確認してください。
もしそうなら、ここに載っていないものでなければなりません。
編集その2: (もし正しくターゲットされていないのであれば)あなたが使っているものの代わりに"input:reset"を使ってみるのも一つの方法です。また、ターゲットが正しく機能していないので、実際のクリックが何をターゲットにしているのかを調べることをお勧めします。firebug/デベロッパーツールなどを開いて、次のように入力してください。
console.log($('#configreset'))
そして何が出てくるか見てください。
これは、jQueryよりもバニラJavascriptで実際に行う方が簡単なことの1つです。 jQueryには「リセット」メソッドはありませんが、HTMLフォーム要素にはメソッドがあるため、次のようなフォームですべてのフィールドをリセットできます。
document.getElementById('configform').reset();
jQueryを介してこれを行う場合(ここの他の回答: $( '#configform')[0] .reset()
)、[0]
は、直接取得するのと同じ形式のDOM要素を取得しています。 document.getElementById
を介して。 後者のアプローチはより効率的でシンプルですが(jQueryアプローチでは最初にコレクションを取得し、次にそこから要素を取得する必要があるため、バニラJavascriptでは要素を直接取得するだけです)。
私はこの単純なコードを使用します。
//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
2つ目はselect2をリセットします。
オプション:異なるイベントに登録されている異なるタイプがある場合は、これをユーザーが利用できます。
$('form#myform select, form input[type=checkbox]').trigger("change"); //Line2
このようなid =リセット形式で入力type =リセットを追加できます。
<html>
<form>
<input type = 'reset' id = 'resetform' value = 'reset'/>
<!--Other items in the form can be placed here-->
</form>
</html>
次に、jqueryでは、次のようにid = resetformを使用して、要素の.click()関数を使用します。
<script>
$('#resetform').click();
</script>
フォームがリセットされます。 注:cssを使用して、id = resetformでリセットボタンを非表示にすることもできます。
<style>
#resetform
{
display:none;
}
</style>
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("");
});
});