CODEWITHSUNDEEP
phphtmlformsreset
drup
drup

Reputation: 1157

How to reset a form to default results on click of reset button

I have a form to submit values to a DB query string. I need to add one reset button to form which rest clear the form and revert the results to default.

<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>

This is my form. Can any one help me to add a rest button with functionality.

Upvotes: 1

Views: 3837

Answers (4)

Shailesh Katarmal
Shailesh Katarmal

Reputation: 2785

You can achieve this using input type reset button.

<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>

Upvotes: 0

Sumanta736
Sumanta736

Reputation: 705

You can do with Jquery:


$(".reset").bind("click", function() {
 $("input[type=text], textarea").val("");
});

Upvotes: 1

Priyanka
Priyanka

Reputation: 345

Use this code to reset yout form

    <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>

try this...

Upvotes: 0

ichadhr
ichadhr

Reputation: 644

You can do with Javascript:

document.getElementById("myForm").reset();

complete:

<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>

Upvotes: 0

Related Questions