jqueryhtmlajax

jQuery and AJAX?


I'm making a simple form which has 5 input elements for parts of an address. I use jQuery to build and send an AJAX request to a PHP file on my server. For some reason my jQuery is not properly able to read the values from my input elements. What could be wrong?

Here is my jQuery:

$('#submitButton').click(function(){
    $('#BBRequestBox').html('<img src="images/loading.gif" />');
        
    alert('Info: ' + $('#name').val() + ' ' + $('#street').val() + ' '
                   + $('#city').val() + ' ' + $('#state').val() + ' '
                   + $('#zip').val() + ' ');
    $.ajax({
        type: "POST",
        url: "./bbrequest.php",
        data: {
            name:   $('#name').val(),
            street: $('#street').val(),
            city:   $('#city').val(),
            state:  $('#state').val(),
            zip:    $('#zip').val()
        },
        success: function(msg){
            $('#BBRequestBox').html('<p>' + msg + '</p>');
        },
        error: function(XMLHttpRequest, textStatus, errorThrown){
            $('#BBRequestBox').html('<p> There\'s been an error: '
                + errorThrown + '</p>');
        }
    });
    return false;
});

Here is my HTML:

<div id="BBRequestBox">
    <form action="#">
        <label>Name:</label><input type="text" name="name" id="name" class="textbox" />
        <label>Street:</label><input type="text" name="street" id="street" class="textbox" />
        <label>City:</label><input type="text" id="city" class="textbox" />
        <label>State:</label><input type="text" id="state" class="textbox" />
        <label>Zip:</label><input type="text" id="zip" class="textbox" />
        <input type="submit" value="Send Me a Bitachon Builder!" id="submitButton" />
    </form>
</div>

EDIT:

Live example at Bitachon.org/new. Click on "Get the Bitachon Builder. (Leftmost footer link)


Solution

  • OK, so because you are replacing the contents of the request box with your loading image, you are actually removing the tags that contained data PRIOR to processing them... as such, when your jQuery function looks for the elements, it cannot find them and for that matter their values...

    If you remove this line: $('#BBRequestBox').html('<img src="images/loading.gif" />'); it will work...

    I'm working on a way to get that loading image there in the mean time <- Looks like you already have the solution for that below :P