Question

我有一个通过AJAX向数据库提交元素的表单，我遇到的问题是，当我点击提交按钮时它什么都不做，它不会调用ajax请求或任何东西。

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;
    });
});

Answer 1

在网址中使用＆＃34; https://www.domain.com/test6/services/insert.php＆＃34; 您正在使用的某些变量未定义，例如payment_types和duration。

Answer 2

也许你欺骗了自己 - 必须输入价格。那说小提琴对我来说很好......

您不应再使用：

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

改为使用：

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

Answer 3

您的JavaScript中有拼写错误。从初始化变量payment_type的字段中获取值时，但在构建对ajax请求的查询时，您使用变量payment_type（不结束＆＃34; s＆＃34;）此外 - 没有定义的变量，如标题和持续时间。

结帐：

 $(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/

按钮不触发Ajax

3 个答案: