CODEWITHSUNDEEP
phphtml
Jaspreet Kaur
Jaspreet Kaur

Reputation: 123

Reset button not working in html (php)

I have placed my input type reset button inside form but its still not working. 

<form method='post' action='process/update_news_action.php' >
<tr>
   <td colspan='2' class="col-md-4">Update News Content</td>
</tr>
<tr >
   <td colspan='2' class="col-md-8"><textarea name="news" id="text"><?php echo  $rows["news"] ;  ?></textarea></td>
</tr>
<tr>
   <td class="col-md-4"><input name='submit' type="submit" value='Publish' class="btn btn-success" /></td>
   <td class="col-md-4"><input name='reset' type="reset" value='Reset' class="btn btn-primary" /></td>
</tr>
</form>

I have also tried <button type="reset" value="Reset">Reset</button>

Upvotes: 7

Views: 31338

Answers (8)

Markus AO
Markus AO

Reputation: 4889

If you're expecting the reset button to empty out the form, that's not the way reset works. It will reset the form fields to what they were when the page was loaded. In this case, you have pre-filled content in your form, so clicking reset will simply undo any user changes since the page-load.

To reset all form fields to blank/nothing, you will need javascript. First get the form DOM object, then iterate over all the input types you want to reset, and set each field.value = '' (input text types / textarea), or modify attributes (for select, radio, checkbox etc.) to deselect and so on. Turn that into a function (there's probably a ready piece somewhere out there, I seem to have lost mine), and attach it to your reset button's click event -- or your form's reset event.

Edit: On a quick search, here's a basic example of how to clear a form to empty values.

Edit: If you're not concerned over anything but text fields, here's a simple way to do this. We add a "reset" event listener to the form, and when it fires, all fields are set to empty string.

function setFormCleanReset(formId) {
    let formEl = document.querySelector(formId);
    
    // Add event listener for reset event
    formEl.addEventListener('reset', function(e) {
    
        // Iterate all non-hidden fields, set values to ''
        for(const fieldEl of formEl.querySelectorAll('input:not([type=hidden])')) {

            // @todo check input type and handle "select" etc.
            fieldEl.setAttribute('value', '');
        }
    });
}
// usage: setFormCleanReset('my_form_id');

Upvotes: 28

Martin Sereday
Martin Sereday

Reputation: 47

I have a form submitting variables to another PHP file. In the second file, there is a button that leads back to the first file for eventual correction od submitted values. The values are retained in the form by $_POST. The "Reset" button works only when the form is used the first time (empty). After submitting and return from the second PHP file, the "Reset" doesn't do anything, no values are cleared. The button seems to be fully inactive.

<button title="<?php echo $lang['reset-button-hint']; ?>" alt="TOOLTIP 1" type="reset" name="reset"><?php echo $lang['reset-button']; ?></button>

Upvotes: 0

Tamilselvan S
Tamilselvan S

Reputation: 23

Excuse Me! You are using default value in input attribute. Remove default value from it. Then type anything then click rest it will make your text box empty.

Upvotes: 0

sanjay
sanjay

Reputation: 226

@Jaspreet Kaur You need to add form tag outside the table. Please check my previous comment for it.

Upvotes: -1

Shanu k k
Shanu k k

Reputation: 1285

can you please try without echo anything inside textarea

try this

<form method='post' action='process/update_news_action.php' > 

                                                <tr>
                                                <td colspan='2' class="col-md-4">Update News Content</td>

                                                </tr>
                                                <tr >
                                                    <td colspan='2' class="col-md-8"><textarea name="news" id="text"></textarea></td>
                                                </tr>
                                                 <tr>
                                                    <td class="col-md-4"><input name='submit' type="submit" value='Publish' class="btn btn-success" />   </td> 
                                                <td class="col-md-4"><input name='reset' type="reset" value='Reset' class="btn btn-primary" />   </td> 
                                                </tr>

                                        </form>

I think reset button is working fine.

Upvotes: 0

Chonchol Mahmud
Chonchol Mahmud

Reputation: 2735

I think you forgot to insert form tag in your html. It should be work if you insert button code into <form>..button code here..</form>.Something like this: 

<form>
   <input type="text">
   <td class="col-md-4">
      <input name='reset' type="reset" value='Reset' class="btn btn-primary" />     
   </td>
</form>

Upvotes: 3

sanjay
sanjay

Reputation: 226

You just need to put your reset button inside form. In following code I have taken one input box also an an example. I hope it helps.

<form>
	<input type="text" />
   	 <table>
        <td class="col-md-4">
        <input name='reset' type="reset" value='Reset' class="btn btn-primary" /> 
        </td>
   	 </table>
</form>

Upvotes: 0

GraveyardQueen
GraveyardQueen

Reputation: 769

You should place the <input type="reset"> in a form like this,it will definitely work

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Tring Reset</title>
<style>
</style>
</head>
<body>
<form>
<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<input type=reset></input>
</form>
</body>
</html>

Upvotes: 0

Related Questions