form is not refreshing after ajax submit and jquery validate

Question

I have a form which I am submitting to my database, the form includes Jquery Validate plugin and ajax to submit.

The issue I am having is that after I click submit the form does not clear, it updates to database etc but I am just trying to clear the form and css highlight on the input field so someone could add a new record. Any help please?

CODE:

$(document).ready(function () {
    $.validator.addMethod("time", function (value, element) {
        return this.optional(element) || /^(([0-1]?[0-9])|([2][0-3])):([0-5]?[0-9])(:([0-5]?[0-9]))?$/i.test(value);
    }, "Please enter a valid time.");

    $("#newform").validate({

        //validation
        debug: false,
        rules: {
            Name: {
                required: true,
                minlength: 3,
            },

            Surname: {
                required: true,
            },

        },

        submitHandler: function (form) {
            $.post('process.php', $("#newform").serialize(), function (data) {
                $('#results').html(data);
                $('#newform').reset();
            });
        }
    });
});

HTML:

<form name="newform" id="newform" action="" method="POST">  



    <p>Name:</p>
        <input type="text" id="pName" name="sName" /><br />

    <p>Surname:</p>
        <input type="date" id="pSName" name="pSName" /><br />


    <input type="submit" name="submit" value="Submit"> 
</form>

<div id="results"><div>

Can you show your HTML code? I would like to see where `#results` is in relation to `#newform` — MonkeyZeus, Mar 11 '14 at 12:46
currently #results just displays an echo statement saying successful — user3406032, Mar 11 '14 at 12:52

MonkeyZeus · Answer 1 · 2014-03-11T13:02:17.677

2

You can use the following code to clear your form:

$('#newform').reset();

To focus on a specific <input> then you can use this after the reset() call:

$('input[name="sName"]').focus();

edited Mar 11 '14 at 13:02

answered Mar 11 '14 at 12:25

MonkeyZeus

20,375
4
36
77

where would I place this? – user3406032 Mar 11 '14 at 12:27
I tried placing it at the bottom of "$('#results..." but nothing happened – user3406032 Mar 11 '14 at 12:29
If you place it in there then `$.post(){}` has to succeed in order for it to be executed – MonkeyZeus Mar 11 '14 at 12:30
could you please edit this and place it correctly, I have tried several times but it does not reset, just adds to database with info still displaying. – user3406032 Mar 11 '14 at 12:32
submitHandler: function(form) { $.post('process.php', $("#meetingform").serialize(), function(data) { $('#results').html(data); }); } – user3406032 Mar 11 '14 at 12:33
I placed it just after the submithandler but it now just resets the form without running process.php – user3406032 Mar 11 '14 at 12:35
Updated on main post, please check – user3406032 Mar 11 '14 at 12:40
After `$('#newform').reset();` try placing `alert('did it reset?');`. Do you get the alert? What web browser are you using? – MonkeyZeus Mar 11 '14 at 12:44
Is `$('#results').html(data);` performing its duties? – MonkeyZeus Mar 11 '14 at 12:47
`$.post()` is nothing more than a short-hand `$.ajax()` call. Please follow these instructions to debug your AJAX call: **http://stackoverflow.com/a/21617685/2191572*** – MonkeyZeus Mar 11 '14 at 12:48
Nope. Im currently using the above version (it adds to database but just does not clear everything). – user3406032 Mar 11 '14 at 12:58
Can you do `alert(''+$('#newform').length+'');` in your `submithandler`? It *should* alert with `1`. You aren't using `id="newform"` more than once on this page, are you? – MonkeyZeus Mar 11 '14 at 13:01
Does `$('input[name="sName"]').focus();` work properly? – MonkeyZeus Mar 11 '14 at 13:02
Just tried the alert, it displays 0, validation works and it does add to database too – user3406032 Mar 11 '14 at 13:05
Sorry, displays 1 i mean – user3406032 Mar 11 '14 at 13:06
Try just `form.reset();` – MonkeyZeus Mar 11 '14 at 13:06
Right, that actually works, (it deletes the text in the form) however, it does not remove the css color? (css color goes green when correct info is in form) – user3406032 Mar 11 '14 at 13:10
`.reset()` is not a function that jQuery validate created so it has no knowledge and does not care about your CSS. You will have to take care of the CSS yourself. – MonkeyZeus Mar 11 '14 at 13:12
Looks like there is hope though, try this: `form.resetForm();` as seen here: **http://jqueryvalidation.org/Validator.resetForm/** – MonkeyZeus Mar 11 '14 at 13:13
tried that, it does not even reset the text anymore – user3406032 Mar 11 '14 at 13:16
Well I definitely answered your initial question, please mark this as accepted and create a new one with jQuery Validation tags so that you get attention from experts with that plugin – MonkeyZeus Mar 11 '14 at 13:23
Thanks, it wont let me mark as accepted yet for some reason, but will do shortly. Thanks for your help! – user3406032 Mar 11 '14 at 13:24

lshettyl · Answer 2 · 2014-03-11T12:51:46.363

0

Try the following:

submitHandler: function (form) {
    var jqxhr = $.post('process.php', $("#newform").serialize(), function (data) {
        $('#results').html(data);
    });

    jqxhr.done(function() {
        $('#newform')[0].reset();
    });
}

edited Mar 11 '14 at 12:51

answered Mar 11 '14 at 12:45

lshettyl

8,166
4
25
31

nothing adds to database with this and it also stops the validation working – user3406032 Mar 11 '14 at 12:49
1

Strange, do you see any errors on the browser console? Try the edited version please. – lshettyl Mar 11 '14 at 12:52
with this version, the refresh works fine and so does validation, but it does not actually add to the database... – user3406032 Mar 11 '14 at 12:54
Right, what happens first? data being populated in #results or the form reset? – lshettyl Mar 11 '14 at 13:02

halkujabra · Answer 3 · 2014-03-11T12:43:28.697

-2

$('#newform').reset();

The above code will do. But reading your comments I see that you will have to make the ajax call synchronous. Because if its asynchronous, you will clear the form before the submit request is actually processed on server side. That's the reason you see a clear form before process.php

In the ajax call pass async also in the object parameter-

{url:'xyz.com',async:false}

edited Mar 11 '14 at 12:43

answered Mar 11 '14 at 12:37

halkujabra

2,844
3
25
35

How would I go about doing that? Thanks. – user3406032 Mar 11 '14 at 12:40
Can I not clear the form after the request is processed on server side? – user3406032 Mar 11 '14 at 12:41
Where exactly would I place that? Sorry I'm really new to this so have no idea, i'd be grateful if you can write it in so I can paste it and try it – user3406032 Mar 11 '14 at 12:44
Downvoted because: Setting `async:false` is the worst User-Experience decision possible. If a user is on a slow 3G connection then their browser will be locked up for the duration of the AJAX call. Most latency issues stem from making the initial HTTP connection, the data transfer is relatively quick depending on the amount of data returned by process.php. The connection is what **kills** the user-experience so **NEVER** force the user's browser to lock up for no reason. The A in AJAX = **Asynchronous** or else we would use SJAX – MonkeyZeus Mar 11 '14 at 12:52
Hmm, What I can see from all your comments everywhere is that your process.php has some error. Because the only reason for alert not working in success function(when your html seems correct) is that the call was not successful. Try pressing F12 in browser and see if it says 'Internal Server Error' in console. – halkujabra Mar 11 '14 at 12:55

form is not refreshing after ajax submit and jquery validate

3 Answers3