清除表单的文本区域和输入

Question

我有一个表格，

<form class="form-inline" role="form" method="post">
<div class="table-responsive">
<table>
<tr class="tr_top">
<td class="td_top"><textarea class="form-control" rows="4" name="msg" placeholder="Your message here." onfocus='this.select()'><?php
('encode.php');
require ('decode.php');

if (isset($_POST['encode'])) {
echo $encstring;
} elseif (isset($_POST['decode'])) {
echo $decstring;
} ?>
</textarea></td>
</tr>

<tr class="tr_mid">
<td class="td_mid">
<input type=text class="form-control input_mid" name="offset" value="<?php if (isset($_POST['encode']) || isset($_POST['decode'])) { echo htmlspecialchars($_POST['offset']);} ?>" placeholder="Enter a number." pattern="[0-9]{0,3}" oninvalid="setCustomValidity('Please enter a number between 1 and 999.')"></td>
</tr>
<tr class="tr_bottom">
<td class="td_bottom">
<input class="input_bottom btn btn-default" type="submit" name="encode" value="Encode">
<input class="input_bottom btn btn-default" type="submit" name="decode" value="Decode">
<input class="input_bottom btn btn-default" type="button" value="Clear" onclick='this.form.elements.msg.value=""'</td>
</tr>
</table>
</div><!-- close table-responsive -->
</form>

在哪里，当单击值为“清除”的输入时，我希望它清除表单的文本区域和输入字段（分别为 name="msg" 和 name="offset"）。就目前而言，现在这段代码：

value="Clear" onclick='this.form.elements.msg.value=""'

仅清除 textarea 字段。我怎样才能让两者都清除？我知道这样做是硬编码的，当我将其更改为 onclick='this.form.elements.offset.value=""' 时，它适用于输入。如何让它同时清除两者？

Answer 1

$('button').on('click', function() {    
$('.form-control').val('');
});

尝试一下，其中 button 是您的“清除”按钮 id 值。

我认为这也可以

$('input[value="Clear"]').on('click', function() {    
$('.form-control').val('');
});

或者，如果您更愿意选择 HTML 解决方案：

<input type="reset" value="Reset">

这将清除表单中的所有输入字段

编辑：将 javascript 加载到您的文件中：

...other stuff..
//load jquery if you haven't...
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
//then the code you want to use...
<script>
$(document).ready(function() {
$('input[value="Clear"]').on('click', function() {    
    $('.form-control').val('');
    });
});
</script>
</body>
</html>