CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Stan Williams
Stan Williams

Reputation: 263

Button Not Triggering Ajax

I have a form which submits elements to the database via AJAX, the problem that i am having is that when i click on the submit button it does nothing, it doesn't call the ajax request or anything.

HTML

  <div class="list">
    <input type="hidden" id="id" value="" />
    <div class="item">
        <label>Name</label>
        <input type="text" id="name" value="" />
    </div>
    <div class="item">
        <label>Number</label>
        <input type="text" id="number" value="" />
    </div>
    <div class="item">
        <label>Address</label>
        <input type="text" id="address" value="" />
    </div>
     <div class="item">
        <label>Price</label>
        <input type="text" id="price" value="" />
    </div>
     <div class="item">
        <label>Deposit</label>
        <input type="text" id="deposit" value="" />
    </div>
     <div class="item">
        <label>Product</label>
        <input type="text" id="product" value="" />
    </div>
     <div class="item">
        <label>Payment Type</label>
        <input type="text" id="payment_type" value="" />
    </div>
     <div class="item">
        <label>Deal Date</label>
        <input type="text" id="deal_date" value="" />
    </div>
     <div class="item">
        <label>Install Date</label>
        <input type="text" id="install_date" value="" />
    </div>
     <div class="item">
        <label>Installed</label>
        <input type="text" id="installed" value="" />
    </div>
     <div class="item">
        <label>Notes</label>
        <textarea name="notes" cols="" id="price" rows=""></textarea>
    </div>
     <div class="item">
        <label>Contract Received</label>
        <input type="text" id="contract_recieved" value="" />
    </div>
    <div class="item">
        <input type="button" id="insert" class="button button-block" value="Insert" />
    </div>

Javascript

  $(document).ready(function() {
    $("#insert").click(function() {
        var name = $("#name").val();
        var number = $("#number").val();
        var address = $("#address").val();
        var price = $("#price").val();
        var deposit = $("#deposit").val();
        var product = $("#product").val();
        var payment_type = $("#payment_type").val();
        var deal_date = $("#deal_date").val();
        var install_date = $("#install_date").val();
        var installed = $("#installed").val();
        var notes = $("#notes").val();
        var contract_recieved = $("#contract_recieved").val();
        var dataString = "name=" + name + "&number=" + number + "&address=" + address + "&price=" + price + "&deposit=" + deposit + "&product=" + product + "&payment_types=" + payment_types + "&deal_date=" + deal_date + "&install_date=" + install_date + "&installed=" + installed + "&notes=" + notes + "&contract_recieved=" + contract_recieved + "&insert=";
        if ($.trim(title).length > 0 & $.trim(duration).length > 0 & $.trim(price).length > 0) {
            $.ajax({
                type: "POST",
                url: "http://http://www.domain.com/test6/services/insert.php",
                data: dataString,
                crossDomain: true,
                cache: false,
                beforeSend: function() {
                    $("#insert").val('Connecting...');
                },
                success: function(data) {
                    if (data == "success") {
                        alert("inserted");
                        $("#insert").val('submit');
                    } else if (data == "error") {
                        alert("error");
                    }
                }
            });
        }
        return false;
    });
});

Upvotes: 0

Views: 40

Answers (3)

thooyork
thooyork

Reputation: 495

Maybe you tricked yourself - A price has to be inputted. That bein said it the fiddle works fine for me ...

You should no longer use:

$("#insert").click(function() {});

use this instead:

$("#insert").on('click', function() {});

Upvotes: 0

webcitron
webcitron

Reputation: 142

You have misspels in your JavaScript. While getting values from fields you initialized variable payment_type, but when building query to ajax request you are use variable payment_type (without ending "s") Moreover - there is no defined variables like title and duration.

Checkout this:

 $(document).ready(function() {
    $("#insert").click(function() {
        var name = $("#name").val();
        var number = $("#number").val();
        var address = $("#address").val();
        var price = $("#price").val();
        var deposit = $("#deposit").val();
        var product = $("#product").val();
        var payment_type = $("#payment_type").val();
        var deal_date = $("#deal_date").val();
        var install_date = $("#install_date").val();
        var installed = $("#installed").val();
        var notes = $("#notes").val();
        var contract_recieved = $("#contract_recieved").val();
        var dataString = "name=" + name + "&number=" + number + "&address=" + address + "&price=" + price + "&deposit=" + deposit + "&product=" + product + "&payment_type=" + payment_type + "&deal_date=" + deal_date + "&install_date=" + install_date + "&installed=" + installed + "&notes=" + notes + "&contract_recieved=" + contract_recieved + "&insert=";
//        if ($.trim(title).length > 0 & $.trim(duration).length > 0 & $.trim(price).length > 0) {
        if ($.trim(price).length > 0) {
            alert('ajax calls');
            $.ajax({
                type: "POST",
                url: "http://http://www.domain.com/test6/services/insert.php",
                data: dataString,
                crossDomain: true,
                cache: false,
                beforeSend: function() {
                    $("#insert").val('Connecting...');
                },
                success: function(data) {
                    if (data == "success") {
                        alert("inserted");
                        $("#insert").val('submit');
                    } else if (data == "error") {
                        alert("error");
                    }
                }
            });
        }
        return false;
    });
});

https://jsfiddle.net/mLwsvuk1/

Upvotes: 0

Afnan Nazir
Afnan Nazir

Reputation: 498

In url use "https://www.domain.com/test6/services/insert.php" Also some of the variables you are using are undefined fix them for example payment_types and duration.

Upvotes: 1

Related Questions