Question

在解释我的问题之前，我会先显示我的代码。

这是我的表格：

<form id="update-sale-form" method="POST" action="actions/updatesale.php">
<table id="update-sale-table" class="table borderless">
    <tr>
        <td><label>Item Code</label></td>
        <td id="item-code"></td>
    </tr>
    <tr>
        <td><label>On Sale?</label></td>
        <td>
            <input type="hidden" id="itemcode" name="item-code" value="" />
            <select id="is-sale" class="form-control" name="is-on-sale" onchange="checkSale(this.value)">
                <option value="0">No</option>
                <option value="1">Yes</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><label>Percentage</label></td>
        <td>
            <div class="input-group">
                <input type="text" id="sale-percentage" class="form-control input-sm" name="sale-percentage" onkeypress="return isNumberKey(event)" maxlength="2"/>
                <span class="input-group-addon">%</span>
            </div>
        </td>
    </tr>
</table>
<div class="response"></div>
</form>
<script type="text/javascript">
function disableSalePercentage(){
    $('#sale-percentage').prop('disabled', true);
    $('#sale-percentage').val('0');
}

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

function checkSale(value){
    if(value=='0'){
        disableSalePercentage();
    } else {
        $('#sale-percentage').prop('disabled', false);
        $('#sale-percentage').val('');
    }
}

这是我处理请求的PHP文件。

<?php
session_start();
require '../config/consettings.php';

$itemCode = $_POST['item-code'];
$isSale = $_POST['is-on-sale'];
$salePercent;

if($isSale==1){
    if(empty($_POST['sale-percentage']) OR ($_POST['sale-percentage']==00)){
        echo "Please provide valid percentage value.";
        return;
    } else $salePercent = $_POST['sale-percentage'];
} else $salePercent = 0;

$stringQuery = "UPDATE vc_products SET issale='$isSale', salepercent='$salePercent' WHERE code='$itemCode'";
$updateQuery = mysqli_query($connection, $stringQuery);
if($updateQuery) echo "good-query";
else echo mysqli_error($connection);
?>

以下是处理AJAX请求的JavaScript：

$("#products-table").on('click', 'span.sale-toggle', function(){
    var itemCode = $(this).attr('itemcode');
    var isSale = $(this).attr('issale');
    var salePercent = $(this).attr('percent');

    BootstrapDialog.show({
        title: '<span class="glyphicon glyphicon-edit"></span> Editing Sale Information.',
        message: $('<div></div>').load('forms/updatesale.php'),
        cssClass: 'edit-sale-modal',
        onshow:function(){
            //Do nothing.
        },
        onshown:function(){
            $('#update-sale-table td#item-code').html(itemCode);
            $('#update-sale-table input#itemcode').val(itemCode);
            if(isSale == 'true'){
                $('#update-sale-table select#is-sale').val('1');
                $('#update-sale-table input#sale-percentage').val(salePercent);
            } else {
                $('#update-sale-table select#is-sale').val('0');
                disableSalePercentage();
            }
        },
        buttons:[{
            label: '<span class="glyphicon glyphicon-remove"></span>',
            cssClass: 'btn-danger',
            action: function(dialog){
                dialog.close();
            }
        }, {
            label: '<span class="glyphicon glyphicon-ok"></span>',
            cssClass: 'btn-primary',
            hotkey: 13,
            action: function(dialog){
                var actionPath = $('form#update-sale-form').attr('action');
                var formData = $('form#update-sale-form').serialize();

                $.ajax({
                    url: actionPath,
                    type: 'POST',
                    data: formData,
                    beforeSend: function(){
                        //Do nothing.
                    },
                    success:function(actionResponse){
                        var response = actionResponse.trim();

                        if(response=='good-query'){
                            dialog.close();
                            BootstrapDialog.show({
                                title: '<span class="glyphicon glyphicon-ok"></span> Sale Record Updated.',
                                message: 'Sale record successfully changed.',
                                cssClass: 'sale-change-successfull',
                                buttons: [{
                                    label: '<span class="glyphicon glyphicon-ok"></span>',
                                    cssClass: 'btn-success',
                                    hotkey: 13,
                                    action: function(dialog){
                                        dialog.close();
                                    }
                                }]
                            });
                        } else {
                            var message = "<div class='alert alert-danger'>"+response+"</div>";
                            $('.response').html(message);
                        }
                    }
                });
            }
        }]
    });
});

我真的需要一只手。我的问题是，我的jQuery AJAX功能是＆＃34;重定向＆＃34;对'＆＃34;形成行动＆＃34; url而不是执行AJAX并返回结果。在我的引导程序对话框中，表单已加载，并且它有一个按钮，用于监听按下输入键的事件，并且它工作正常但如果百分比字段被聚焦并且输入键被命中，则页面重定向到表单操作，没有执行ajax调用。没有显示错误，所以我无法解决错误，但如果点击模态框上的检查按钮，一切正常。它只在我输入百分比值时重定向并按下输入，这是大多数最终用户通常所做的。我真的需要一些帮助。请你节省一点时间，检查我的$.ajax()电话有什么问题，我真的认为它有问题，但我无法弄明白。拜托，我需要一些帮助。

Answer 1

按Enter键进入输入字段会触发表单的submit事件。所以你需要做的是将一个处理程序附加到该事件，而不是按钮的点击事件。

当用户点击提交按钮或点击输入表单中的任何输入字段时，这将同时捕获。

$(function() {
    $("#update-sale-form").on("submit", function(event) {
        event.preventDefault();
        var form = $(event.target);

        var actionPath = form.attr("action");
        var formData = form.serialize();

        // --------------------------
        // Insert your ajax code here
        // --------------------------

        return false;
    });
});

您还需要更改“确定”按钮的操作以在表单上执行提交

action: function(dialog) {
    $("#update-sale-form").submit();   
}

奖金信息

通过ID查找html元素时，使用包含祖先详细信息的长选择器没有任何好处。

$("#itemcode")

不仅更容易阅读，而且比

更快

$("#update-sale-table input#itemcode")

每当需要通过它的ID查找元素时，jquery就会使用浏览器的原生document.getElementById（＆＃39; ...＆＃39;）函数，这非常快。但是，当在选择器中包含祖先细节时，jquery必须验证找到的元素是否确实具有正确的祖先元素。如果您只在选择器中使用ID，则可以完全跳过该步骤。

jQuery：$ .ajax（）重定向到其URL表单操作参数，而不是对表单操作执行AJAX请求

1 个答案:

奖金信息