首次提交后无法重新提交ajax表单

Question

好吧，我已经尝试了以下代码，有或没有

e.PreventDefault()

设置了事件，但它仍然不起作用。 这是 HTML 表单（我还尝试将以前的位置存储在 savingLoc 隐藏输入字段中

<form id="cityfilter" method="GET">                 
    <div class="col-xs-12 col-md-offset-1 col-md-5" >
            <input autocomplete="off" id="location" type="text" class="form-control center-block" placeholder="Filter By Town / City" style="height:40px;margin-bottom:5px;">
            <div id="suggest"></div>
    </div>
    <div class="col-xs-12 col-md-4" >
        <select class="form-control" style="height:40px;margin-bottom:5px;" id="selectDistance">
        <option disabled>Distance</option>
        <option value="5">5 Miles</option>
        <option value="10">10 Miles</option>
        <option value="15">15 Miles</option>
        <option value="20">20 Miles</option>
        <option value="25">25 Miles</option>
        <option value="35">35 Miles</option>
        <option value="50">50 Miles</option>
        <option value="75">75 Miles</option>
        <option value="100">100 Miles</option>
        <option value="250">250 Miles</option>
        </select>
    </div>
    <button type="button" class="btn btn-lg pinkbtn" style="height:40px;color:white" id="addfilter">
        <i class="fa-solid fa-fw fa-lg fa-magnifying-glass"></i>
    </button>
    <input type="hidden" name"savedLoc" id="savedLoc" <?php if(isset($preset)){ echo 'value="'.$preset.'"';}?>>
</form>

这里是AJAX和其他jqeury代码

$(document).ready(function() {
    $("#location").keyup(function() {
        $.ajax({
            type: "POST",
            url: "https://example.com/citylist.php",
            data: 'name=' + $(this).val(),
            beforeSend: function() {
                $("#location").css("background-color", "#FFF 165px");
            },
            success: function(data) {
                $("#suggest").show();
                $("#suggest").html(data);
                $("#location").css("background", "#FFF");
            }
        });
    });
});
var loc = '';
function selectCity(val) {
    $("#location").val(val);
    $("#savedLoc").val(val);
    var loc = $("#location").val();
    $("#suggest").hide();
}
$('#addfilter').click(function()
{
    console.log('Location : '+$("#savedLoc").val());
    var distance = $("#selectDistance").val();
    $('#cityfilter').attr('action', '<?php echo $catbase;?>/'+$("#savedLoc").val()+'/'+distance).submit();
});

它适用于第一次提交，偶尔在第二次提交时，当您更改距离下拉菜单时，但这是限制。

我理想地希望它这样，如果位置已经定义，它将简单地搜索具有更新的距离值的位置

Answer 1

e.preventDefault()

用于阻止以通常方式提交表单，因此可以使用 JavaScript 或 jQuery 手动提交表单。

从您的代码中，我看不到

e.preventDefault()

在任何地方使用。向我们展示更多代码。

这是潜在的方法：

$(document).ready(function() {
    $("#location").keyup(function() {
        $.ajax({
            type: "POST",
            url: "https://example.com/citylist.php",
            data: 'name=' + $(this).val(),
            beforeSend: function() {
                $("#location").css("background-color", "#FFF 165px");
            },
            success: function(data) {
                $("#suggest").show();
                $("#suggest").html(data);
                $("#location").css("background", "#FFF");
            }
        });
    });

    function selectCity(val) {
        $("#location").val(val);
        $("#savedLoc").val(val);
        $("#suggest").hide();
    }

    $('#addfilter').click(function(e) {
        e.preventDefault();
        var location = $("#savedLoc").val();
        var distance = $("#selectDistance").val();
        var action = '<?php echo $catbase;?>/' + location + '/' + distance;
        $('#cityfilter').attr('action', action);
        console.log('Form action : ' + $('#cityfilter').attr('action'));
        $('#cityfilter').submit();
    });
});