Brian Mulyadi Brian Mulyadi - 6 months ago 9
Javascript Question

Why is my javascript form not submitting?

I am creating a form that directly inject the data contained in the text fields to firebase via POST method.

This is the code for the html form:

<form>
<h5>From:</h5>
<div class="row">
<div class="six columns">
<label for="fromName">Name</label>
<input class="u-full-width" placeholder="Full Name" id="fromName">
</div>
<div class="six columns">
<label for="fromContactNo">Contact No.</label>
<input class="u-full-width" placeholder="08xxx" id="fromContactNo">
</div>
</div>
<label for="fromAddress">Address</label>
<textarea class="u-full-width" placeholder="Full Address" id="fromAddress"></textarea>

<!-- break -->

<h5>To:</h5>
<div class="row">
<div class="six columns">
<label for="toName">Name</label>
<input class="u-full-width" placeholder="Full Name" id="toName">
</div>
<div class="six columns">
<label for="toContactNo">Contact No.</label>
<input class="u-full-width" placeholder="08xxx" id="toContactNo">
</div>
</div>
<label for="toAddress">Address</label>
<textarea class="u-full-width" placeholder="Full Address" id="toAddress"></textarea>

<!-- break -->
<h5>Delivery Details:</h5>
<div class="row">
<div class="u-full-width">
<label for="itemDesc">Item description</label>
<textarea class="u-full-width" placeholder="Item Description here" id="itemDesc"></textarea>
</div>
</div>

<!-- break -->
</br>
<button class="button-primary" id="add-order">Send</button>
</form>


And the javascript function is as follows:

$(document).ready(function(){
var $fromName = $('#fromName');
var $fromContactNo = $('#fromContactNo');
var $fromAddress = $('#fromAddress');
var $toName = $('#toName');
var $toContactNo = $('#toContactNo');
var $toAddress = $('#toAddress');
var $itemDesc = $('#itemDesc');
var $addOrder = $('#add-order');

$addOrder.on('click', function(){

var newOrder = {
"from": {
"name": $fromName.val(),
"phone_no": $fromContactNo.val(),
"address": $fromAddress.val(),
},
"to": {
"name": $toName.val(),
"phone_no": $toContactNo.val(),
"address": $toAddress.val(),
},
"item": $itemDesc.val(),
};

$.ajax({
type: 'POST',
url: 'https://myUrl.firebaseio.com/order.json',
contentType: "application/json; charset=utf-8",
data: JSON.stringify(newOrder),
success: function(data) {
console.log("Order added!", data);
}
});
});
});


I tried to mess around with the form and cannot find anything that breaks it. The console also showed no error.

Answer

You have two issue here. The first is that you hook to the click event of the button. This means that the form submission is still happening. When that happens the page is effectively reloaded as you have not given the form any action attribute, which is in turn preventing the AJAX call from completing. To fix this you should always hook to the submit event of the form and use preventDefault() to stop the default submission from occurring.

Secondly you only retrieve the val() properties of the input elements on load of the page. At that point the user has not interacted with them. Instead you should get their values just before you send them in the AJAX request.

Try this:

$('form').on('submit', function(e) {
    e.preventDefault();  

    var $fromName = $('#fromName');
    var $fromContactNo = $('#fromContactNo');
    var $fromAddress = $('#fromAddress');
    var $toName = $('#toName');
    var $toContactNo = $('#toContactNo');
    var $toAddress = $('#toAddress');
    var $itemDesc = $('#itemDesc');

    var newOrder = {
        "from": {
            "name": $fromName.val(),
            "phone_no": $fromContactNo.val(),
            "address": $fromAddress.val(),
        },
        "to": {
            "name": $toName.val(),
            "phone_no": $toContactNo.val(),
            "address": $toAddress.val(),
        },
        "item": $itemDesc.val(),
    };

    $.ajax({
        type: 'POST',
        url: 'https://myUrl.firebaseio.com/order.json',
        contentType: "application/json; charset=utf-8",
        data: newOrder, // no need for JSON.stringify here
        success: function(data) {
            console.log("Order added!", data);
        }
    });
});
Comments