jQuery function clear form and set back to onLoad status

Question

For my jq driven form I am looking for a function that clears my form and set it back to the original stage as it was on page load but without refreshing the entire page. I use placeholder text and I have created a standard reset button. In webkit browsers it works fine. If the reset button is hit, the form returns to the original state, showing the placeholder text BUT in IE (currently using 8) the form get cleared but the placeholder text is not comming back. Any idea how I can clear the form but getting back my placeholder text (I am using the placeholder.js plugin for that)? I tried the following but it doesn´t work:

$("#refresh").click(function() {
    $('#name, #email, #betreff, #nachricht').val('');
});

Any help out there?

EDIT
Link to the placeholder plugin:http://github.com/mathiasbynens/Placeholder-jQuery-Plugin

...and yes, I am talking about foing it now with the help of jquery because it can´t be done with a standard html reset button. I mean it can but not in IE. IE clears the form and does not show the placeholder text again. Webkit browser are working fine with that standard reset button, showing the placeholder text again. Now I am looking for a solution to have it the same way in all browsers.

Answer 1

$("#refresh").click(function() {
    $('#name').val($('#name').attr('placeholder'));
    $('#email').val($('#email').attr('placeholder'));
    $('#betreff').val($('#betreff').attr('placeholder'));
    $('#nachricht').val($('#nachricht').attr('placeholder'));
});

Is this working ? (I can't test from here) If it works, you may want to use shortcuts with input and some selectors.

Answer 2

Make the id="refresh" just a standard button as to not clear the entire form. You will have to manually "reset" the form elements that use the placeholder via the function below:

$("#refresh").click(function() {
    $('#name, #email, #betreff, #nachricht').val('').placeholder();
});

You will have to clear the non-placeholder elements using val('');

You can also try a more general approach which is to select all related form elements with the placholder attribute (assuming you did so in your HTML or before this script runs):

$("#refresh").click(function() {
    $("input[placeholder],textarea[placeholder]").val('').placeholder();
});

This should replace all the input/textarea elements so any other elements you will have to add to the selector.