[英]How to reset a form to default results on click of reset button
我有一种将值提交到数据库查询字符串的表单。 我需要向表单添加一个重置按钮,其余的清除表单并将结果恢复为默认值。
<form action="" method="post" id="report-page-form-form" class="clearfix">
<?php
$start_date = (isset($_POST['start-date']) ? 'value='.$_POST['start-date'] : 'placeholder="YYYY-MM-DD"');
$end_date = (isset($_POST['end-date']) ? 'value='.$_POST['end-date'] : 'placeholder="YYYY-MM-DD"');
?>
<div class="date-input-report clearfix">
<label>Start Date:</label>
<input type="text" name="start-date" <?php echo $start_date; ?> id="start" readonly>
</div>
<div class="date-input-report clearfix">
<label>End Date:</label>
<input type="text" name="end-date" id="end" <?php echo $end_date; ?> readonly>
</div>
<input class="form-submit" type="submit" value="Filter">
</form>
这是我的表格。 谁能帮我添加带有功能的休息按钮。
You can do with Jquery:
$(".reset").bind("click", function() {
$("input[type=text], textarea").val("");
});
使用此代码重置您的表格
<form action="" method="post" id="report-page-form-form" class="clearfix">
<?php
$start_date = (isset($_POST['start-date']) ? 'value='.$_POST['start-date'] : 'placeholder="YYYY-MM-DD"');
$end_date = (isset($_POST['end-date']) ? 'value='.$_POST['end-date'] : 'placeholder="YYYY-MM-DD"');
?>
<div class="date-input-report clearfix">
<label>Start Date:</label>
<input type="text" name="start-date" <?php if(isset($_POST['reset'])) echo 'placeholder="YYYY-MM-DD"'; else echo $start_date; ?> id="start" readonly>
</div>
<div class="date-input-report clearfix">
<label>End Date:</label>
<input type="text" name="end-date" id="end" <?php if(isset($_POST['reset'])) echo 'placeholder="YYYY-MM-DD"'; else echo $end_date; ?> readonly>
</div>
<input class="form-submit" type="submit" value="Filter">
<input class="form-submit" type="submit" name="reset" value="Filter">
</form>
尝试这个...
您可以使用Javascript:
document.getElementById("myForm").reset();
完成:
<form action="" method="post" id="report-page-form-form" class="clearfix">
<?php
$start_date = (isset($_POST['start-date']) ? 'value='.$_POST['start-date'] : 'placeholder="YYYY-MM-DD"');
$end_date = (isset($_POST['end-date']) ? 'value='.$_POST['end-date'] : 'placeholder="YYYY-MM-DD"');
?>
<div class="date-input-report clearfix">
<label>Start Date:</label>
<input type="text" name="start-date" <?php echo $start_date; ?> id="start" readonly>
</div>
<div class="date-input-report clearfix">
<label>End Date:</label>
<input type="text" name="end-date" id="end" <?php echo $end_date; ?> readonly>
</div>
<input class="form-submit" type="submit" value="Filter">
<input type="button" onclick="clearForm()" value="clear form">
</form>
<script>
function clearForm() {
document.getElementById("report-page-form-form").reset();
}
</script>
您可以使用输入类型重置按钮实现此目的。
<form name="form" method="post">
<input type="text" name="text1" placeholder="Name" action="" >
<input type="submit" value="Submit" name="submit" />
<input type="reset" name="reset" value="Reset Form" />
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.