jquery 不能重新提交 AJAX 表单后，首次提交

5kgi1eie 于 2023-08-04 发布在 jQuery

关注(0)|答案(1)|浏览(133)

好了，我已经尝试了下面的代码，有和没有

e.PreventDefault()

字符串
设置在事件上，但仍然不起作用。
下面是表单HTML（我还尝试在savedLoc隐藏输入字段中存储以前的位置

<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 和其他jQuery代码：

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

型
它在第一次提交时起作用&偶尔在第二次提交时，当您更改距离下拉列表时，但这是限制。
理想情况下，如果位置已经定义，它将简单地使用更新的距离值搜索位置

jquery

来源：https://stackoverflow.com/questions/76799449/cant-resubmit-ajax-form-after-initial-submit

1条答案

按热度按时间

x8diyxa71#

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

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 不能重新提交 AJAX 表单后，首次提交

1条答案

相关问题

热门标签

最新问答