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:
<form action="#">
<label>Name:</label><input type="text" id="name" class="textbox"/>
<label>Street:</label><input type="text" 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>
