CODEWITHSUNDEEP
phphtmlforms
jannatul alia
jannatul alia

Reputation: 31

Clear HTML form that has its reset Value

Ive a form that have certain input text. all of them has their own reset value.. for example ... 

<input type="text" 
       name="<?php echo $row['FieldName'];?>"
       id="<?php echo $row['FieldName'];?>" 
       class="required" 
       style="font:12px Verdana ; width:250px;" 
       value="<?php echo $row2[$nameROW]?>" />
<?php }

thus when i use normal RESET function..it will not clear up my form. because of its reset value has been set already...

so how can i totally CLEAR not RESET the form??

Upvotes: 1

Views: 3212

Answers (4)

somnath
somnath

Reputation: 1335

use the following jQuery to set specified field to blank:

$("#btn_reset").click(function(){
     $("input:text[id=xxx]").val("");
});

Use the following jQuery to set all fields values to blank:

$("#btn_reset").click(function(){
    $(":input").val("");
});

In the above examples, #btn_reset is the ID of the Reset button. You will also need to place the above script inside your script tag inside the normal $(document).ready() function's handler of your page. of course, the above will require you to include the jQuery library first in the top of the page. If you have any questions please let me know.

Here is the complete HTML file that works:

<HTML>
    <HEAD>
        <TITLE></TITLE>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $("#btn_reset").click(function() {
                $("input:text[id=xxx]").val("");
            });
        });
    </script>
    </HEAD>
    <BODY>
        <form>
            <input type="text" name="xxx" id="xxx" value="default"  />
            <input type="button" value="Reset" id="btn_reset" />
        </form>
    </BODY>
</HTML>

Please note you need change the button type from reset to button as otherwise after jQuery sets the value then the reset button behavior will again set the value to the default value which we dont want.

Upvotes: 0

Ja͢ck
Ja͢ck

Reputation: 173522

This is an easy to use (pure js) function that you can use to reset any form by id or name:

// License: WTFPL
function clearForm(id)
{
    // find form by its id or name
    var form = document.getElementById(id) || document[id] || id;

    // cycle through elements
    for (var i = 0, item; item = form.elements[i]; ++i) {
        switch (item.type) {
            case 'select-one':
                item.selectedIndex = 0;
                break;

            case 'select-multiple':
                for (var j = 0, option; option = item.options[j]; ++j) {
                    option.selected = false;
                }
                break;

            case 'checkbox':
            case 'radio':
                item.checked = false;
                break;

            default:
                item.value = '';
        }
    }​​​​​​
}

To call it:

clearForm('id or name of your form');

Upvotes: 1

Sampson
Sampson

Reputation: 268324

If you want to avoid fields being reset to their initial values, you'll need to actually cycle through all of the input fields, textfields, and select elements, individually setting their values to an empty string, checked properties to false, etc.

You can see an example of what this might look like online at http://www.electrictoolbox.com/javascript-clear-form/, or what a jQuery solution (which is a bit more concise) would look like at http://www.electrictoolbox.com/jquery-clear-form/.

Upvotes: 1

Brett
Brett

Reputation: 3316

Jonathan is correct but it is incomplete. Here is the full solution:

for ( i = 0; i < document.myForm.elements.length; i++ )
  document.myForm.elements[i].fieldName.value = "";

Please let us know if you need further help. This iterates through every item in the form and then blanks them. Let us know if you need more help.

Upvotes: 0

Related Questions