Javascript issue re form reset

Question

I've got an issue with a small javascript form that submits perfectly, brings up the success message but fails to reset the form. The data remains visible, until you manually refresh the page.

The code is:

jQuery(document).ready(function(){

    $('#contactform').submit(function(){

        var action = $(this).attr('action');

        $("#message").slideUp(750,function() {
        $('#message').hide();

        $('#submit')
            .after('<img src="images/ajax-loader.gif" class="loader" />')
            .attr('disabled','disabled');

        $.post(action, {
            name: $('#name').val(),
            email: $('#email').val(),
            phone: $('#phone').val(),
            subject: $('#subject').val(),
            comments: $('#comments').val(),
            verify: $('#verify').val()
        },
            function(data){
                document.getElementById('message').innerHTML = data;
                $('#message').slideDown('slow');
                $('#contactform img.loader').fadeOut('slow',function(){$(this).remove()});
                $('#submit').removeAttr('disabled');
                if(data.match('success') != null);

            }
        );

        });

        return false;

    });

});

I wondered if I can add in a reset command but as my java is limited I'm not sure where? Would appreciate any pointers or advice. Thanks in advance.

http://stackoverflow.com/questions/680241/resetting-a-multi-stage-form-with-jquery — NullPointerException, Apr 10 '13 at 20:44
Thanks for the reply. I've got a contact.php file, js form.css and the relevant code in the index.html. Form's working perfectly, sending fine but its the data you fill in, submit, success message appears, roll over the area - message disappears only to show the data you entered in the form. Not clearing upon send. — user2267855, Apr 10 '13 at 21:13
I have this line in my html file which I know is the submit button: — user2267855, Apr 10 '13 at 21:14
So you need fire a javascript method once you recieved the response from server to clear or reset the form. look at the link that I posted in last comment — NullPointerException, Apr 10 '13 at 21:16

score 2 · Answer 1 · answered Apr 10 '13 at 20:46

2

You could add this inside the if (data.match...), as follows:

if (data.match("success") != null){
   $('#contactform')[0].reset();
}

answered Apr 10 '13 at 20:46

tomor

1,765
2
16
21

Thanks...missed that totally! Will try it now. Really appreciate the help. – user2267855 Apr 10 '13 at 21:20
Hi. Have just tried the suggestion but I'm afraid it didn't work. Could there be something else to add? Maybe in the contact.php file or the code on the index.html do you think? – user2267855 Apr 10 '13 at 21:25
You want to have the fields filled on refresh? I'm sorry but I do not quite understand what you're asking. – tomor Apr 10 '13 at 21:57
Tomor it's ok. Really appreciate all the help tonight. I'm almost there! At least the form is now clearing down which is much better than it was. Thank you. – user2267855 Apr 10 '13 at 21:59

Menelaos · Answer 2 · 2013-04-10T21:47:38.743

0

You need to manually clear/reset the form. As you using JQuery to send the request, it is not like form action that changes your browser location.

Just call RESET once the data has been successfully sent.

For more on that see: http://www.w3schools.com/jsref/met_form_reset.asp

If on the other hand you want to reset your form values to defaults you specify you can create a function such as:

function resetFormValues() 
{ 
$('#name').val('name'); 
$('#email').val('email'); 
etc..
}

and call resetFormValues(); from within your code such as:

if (data.match("success") != null){
   resetFormValues();
}

edited Apr 10 '13 at 21:47

answered Apr 10 '13 at 20:47

Menelaos

23,508
18
90
155

Had a look at the W3 article...still a little confused as to which line to add where. Would I need to add anything to my contact.php, js form.css files as well as the index.html file? – user2267855 Apr 10 '13 at 21:17
No, you don't need to add anything to the php. As Tomor said you need to add the reset() directly in your Javascript/Jquery code. – Menelaos Apr 10 '13 at 21:24
function(data){ document.getElementById('message').innerHTML = data; $('#message').slideDown('slow'); $('#contactform img.loader').fadeOut('slow',function(){$(this).remove()}); $('#submit').removeAttr('disabled'); if (data.match("success") != null){ $('#contactform')[0].reset(); } } – user2267855 Apr 10 '13 at 21:30
Does your server returning data = success. Try to put alert for data and an alert inside the if to see if that reset is being called or not. – NullPointerException Apr 10 '13 at 21:33
Almost there!! Just realised the error I made pasting the code in using quote marks. Sorry guys. The only question I have left...if I have text in the fields ie Name, Tel etc. Is it possible for them to be visible after the form is reset? With the new code change it resets the form perfectly but now removes the text field 'suggestions ie name etc'. – user2267855 Apr 10 '13 at 21:35
So you didn't wanted to clear the form rather reset to some default values ? – NullPointerException Apr 10 '13 at 21:39
Sorry. My java / code skills are improving but I guess i didn't think too well about the reset or reset to default. Yes, your're correct. If I can reset to the default form that would be ideal but the help you've given has been great. – user2267855 Apr 10 '13 at 21:43
You need to make a custom method that sets all the values to the defaults you want. So e.g. function resetFormValues() { $('#name').val('name'); $('#email').val('email'); } – Menelaos Apr 10 '13 at 21:43
1

The you have to provide some default values to your form fields and rest is same. Here is the [link](http://jsfiddle.net/Fr4L6/) that I created to show how to reset to default values. – NullPointerException Apr 10 '13 at 21:47
Thanks. So for my form like this: function resetFormValues() { $('#name').val('name'); $('#email').val('email'); $('#phone').val('phone'); $('#subject').val('subject'); $('#comments').val('comments'); $('#verify').val('verify'); } – user2267855 Apr 10 '13 at 21:52
Yes, that would work as well, though as I saw from GC if you have set your default value= within your HTML you can simply call reset. Have a look at the link he sent. – Menelaos Apr 10 '13 at 21:53
Would that then replace the line: $('#contactform')[0].reset(); – user2267855 Apr 10 '13 at 21:53
you could replace $('#contactform')[0].reset(); with resetFormValues(); as long as the function definition is included. You also also set value= for the HTML and then $('#contactform')[0].reset(); would work. – Menelaos Apr 10 '13 at 21:55
OK. Just want to say a big thanks for all the help! Really appreciated. – user2267855 Apr 10 '13 at 21:58

Javascript issue re form reset

2 Answers2