jQuery Ajax request only works for single form submission

Question

I am very new to jQuery and Ajax, so I put together a little system to see if I could produce a form with various features that are new to me, in hopes that I can use the techniques in future. It is a simple form which for submitting name, last name, email and phone no.

Everything works fine when you fill out the form and submit, and the response works fine. However, after the response message disappears and the form's fields are cleared, entering new data and submitting the form results in the ajax request executing successfully, but nothing is sent to the action file, as the response area (where the response message would show up normally) is expanded as if there is a message, but nothing is displayed. I am not sure how I can better illustrate my problem so hopefully somebody can see from the code:

<div id="wrap">

<div id="response">
    <span></span>
    <div id="ri1"></div>
    <div id="ri2" class="r_user"></div>
</div>

<span class="wraptitle">Form Standard</span>

<form method="post" action="process.php" id="mainform" name="mainform">
<table width="605" cols="3" border="0">
    <tr>
        <td width="155">
        First Name
        <br /><span class="error" id="fname_error"></span>
        </td>
        <td width="450" colspan="2"><input type="text" name="firstname" id="firstname" class="input" /></td>
    </tr>
    <tr>
        <td width="155">
        Second Name
        <br /><span class="error" id="sname_error"></span>
        </td>
        <td width="450" colspan="2"><input type="text" name="secondname" id="secondname" class="input" /></td>
    </tr>
    <tr>
        <td width="155">
        Email address
        <br /><span class="error" id="email_error"></span>
        </td>
        <td width="450" colspan="2"><input type="text" name="emailaddr" id="emailaddr" class="input" /></td>
    </tr>
    <tr>
        <td width="155">
        Phone Number
        <br /><span class="error" id="phoneno_error"></span>
        </td>
        <td width="450" colspan="2"><input type="text" name="phoneno" id="phoneno" class="input" /></td>
    </tr>
    <tr>
        <td width="155"></td>
        <td width="390"><input type="submit" name="submit" id="submit" value="Submit Form" class="input button" /></td>
        <td width="60" id="loader"></td>
    </tr>
</table>
</form>

</div>

process.php:

if(!empty($_POST['firstname'])
&&!empty($_POST['secondname'])
&&!empty($_POST['emailaddr'])
&&!empty($_POST['phoneno']))
{
    $response_array = array(
    'status'  => 'success',
    'message' => 'Congratulations, everything went fine.');

    header('Content-type: application/json');
    echo(json_encode($response_array));
}
else
{
    $response_array = array(
    'status'  => 'fail',
    'message' => 'Massive Fail.');

    header('Content-type: application/json');
    echo(json_encode($response_array));
}

jQuery (last thing before </body>)

$(document).on('submit','#mainform',function(e)
{
    //e.preventDefault();
    $('#submit').attr('disabled','disabled');

    var form      = $(this);
    var post_url  = form.attr('action');
    var is_error  = false;

    $('#loader', form).html('<img src="load_big_grey.gif" border="0" width="48" height="15" style="margin:6px auto;display:block;" />');

    var firstname  = $('#firstname').val();
    var secondname = $('#secondname').val();
    var emailaddr  = $('#emailaddr').val();
    var phoneno    = $('#phoneno').val();
    var post_data  = 'firstname='+firstname+'&secondname='+secondname+'&emailaddr='+emailaddr+'&phoneno='+phoneno;

    $('.error').attr('style','display:none;');

    if(firstname==''){
        $('#fname_error').html('Required field').attr('style','display:block;');
        is_error = true;}

    // More client-side validation as above

    if(is_error)
    {
        $('#loader', form).html('');
        return false;
    }
    else
    {            
        $.ajax({
            type: "POST",
            url: post_url,
            data: post_data,
            dataType: 'json',
            cache: 'false',
            success: function(ret)
                    {
                        if(ret != '')
                        {
                            /* Dealing with the server response */
                            var m_status  = ret.status;
                            var m_message = ret.message;
                            var empty_fld = true;
                            $('#loader', form).html('');

                            // THIS IS THE PART THAT DISPLAYS AN APPROPRIATE RESPONSE
                            if(m_status=='success')
                            {   $('#response').removeClass().addClass('r_pos');
                                $('#ri1').removeClass().addClass('r_check');}
                            else
                            if(m_status=='fail')
                            {   $('#response').removeClass().addClass('r_neg');
                                $('#ri1').removeClass().addClass('r_cross');
                                empty_fld = false;}

                            $('#response span').html(m_message);                            
                            $('#response').css('display','block');

                            setTimeout(function()
                            {
                                $('#response').fadeTo(500,0);
                                setTimeout(function()
                                {
                                    $('#response').css('display','none');
                                    $('#submit').removeAttr('disabled');
                                    if(empty_fld)
                                    {
                                        $('#firstname').val('');
                                        $('#secondname').val('');
                                        $('#emailaddr').val('');
                                        $('#phoneno').val('');
                                    }
                                },500);
                            },4000);
                        }
                        else
                        {
                            /* The response from the server was undefined */
                            $('#loader', form).html('');
                            $('#response').removeClass().addClass('r_neg');
                            $('#response span').html('There was a problem communicating with the server!');
                            $('#ri1').removeClass().addClass('r_cross');
                            $('#response').css('display','block');
                            setTimeout(function()
                            {
                                $('#response').fadeTo(500,0);
                                setTimeout(function()
                                {
                                    $('#response').css('display','none');
                                    $('#submit').removeAttr('disabled');
                                },500);
                            },4000);
                        }
                    }
        });
        return false;
    }
});

(Kinda feel like I shouldn't have included as much.. :P) I have looked around and have seen some things on rebinding events (which I think I've done by using on() instead of submit()) and a few other mentions of things I could try but nothing seems to have worked. Your help is much appreciated! Luke

Answer 1

After changing the success function:

success: function(ret, textStatus)
         {
             console.log(ret);
             console.log(textStatus);
             ...
         }

I discovered that there was no problem with the response from the server and it was submitting and responding perfectly and in the manner I was expecting. I cannot directly identify what the issue was, but by adding a wrapper to my response section and just using .html() to update it instead of toggling classes, I have my desired result:

<div id="rwrap">
    <div id="response">
        <span></span>
        <div id="ri1"></div>
        <div id="ri2"></div>
    </div>
</div>

jQuery:

var m_status  = ret.status;
var m_message = ret.message;
var empty_fld = true;
$('#loader').html('');

if(m_status=='success')
{
    $('#rwrap').html('<div id="response" class="r_pos"><span>'+m_message+'</span><div id="ri1" class="r_check"></div><div id="ri2" class="r_user"></div></div>');
}
else if(m_status=='fail')
{
    $('#rwrap').html('<div id="response" class="r_neg"><span>'+m_message+'</span><div id="ri1" class="r_cross"></div><div id="ri2" class="r_user"></div></div>');
    empty_fld = false;
}

Thanks to those who contributed!

Answer 2

There are many things currently not really good with your code. I will list them here, so that you can fix them.

• The mainform is there the whole time. Attach the event handler directly to the form

  $('#mainform').submit(function(event) { // your code });

• Do not change the enable/disable state of the button with attr. Use prop instead.

• Use jQuery's css commands to add or remove css properties. See css.

• The success callback function expects three parameters (data, textStatus, jqXHR). Use them:

  success: function(ret, textStatus, jqXHR) { // your code }

• Use proper indentation to see scope of statements.

More specifically place the else and the connected if on one line to see it's meening.

if(m_status=='success')
{   
    $('#response').removeClass().addClass('r_pos');
    $('#ri1').removeClass().addClass('r_check');
}
else if(m_status=='fail') {   
    $('#response').removeClass().addClass('r_neg');
    $('#ri1').removeClass().addClass('r_cross');
    empty_fld = false;
}

If this bunch of problems are fixed, you can look into the actual problem if it still occurs.