好吧，所以我在过去的三天里一直在挠头。我不知道我做错了什么。
下面是HTML结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form class="form" action="test2.php" method="get" autocomplete="off">
<label class="form__label" for="services">
<span class="form__icon form__icon--service"><img src="./img/service.svg" alt="pencil"></span>
<input class="form__input form__input--service" id="services" name="services" type="text" placeholder="What service do you need?" autocomplete="off">
</label>
<label class="form__label form__label--location" for="location">
<span class="form__icon form--icon--location"><img src="./img/location.svg" alt="location"></span>
<input class="form__input form__input--location" id="location" name="location" type="number" placeholder="Location" pattern="[0-9]*" inputmode="numeric" autocomplete="off">
</label>
<button class="form__btn" type="submit">
Search
</button>
<input id="category" name="category" type="hidden" value="0" autocomplete="off">
<input id="service_type" name="service_type" type="hidden" value="0" autocomplete="off">
</form>
<script src="./js/test.js"></script>
</body>
</html>下面是test.js函数：
//SUBMIT FORM AND BASIC VALIDATION
$(document).ready(function() {
// Form submission handler
$('.form').on('submit', function(event) {
event.preventDefault(); // Prevent the form from submitting normally
// Get form input values
var services = $('#services').val();
var location = $('#location').val();
// basic format validation //
// Validation passed, submit the form
$(this).unbind('submit'); // Unbind the current submission handler
// Construct the action URL with the form values
var actionUrl = $(this).attr('action');
actionUrl += '?services=' + encodeURIComponent(services);
actionUrl += '&service_type=' + encodeURIComponent($('#service_type').val());
actionUrl += '&category=' + encodeURIComponent($('#category').val());
actionUrl += '&location=' + encodeURIComponent(location);
//console.log('actionUrl:', actionUrl);
// Navigate to the constructed URL (not preferred)
//window.location.href = actionUrl;
$(this).attr('action', actionUrl);
$(this).submit();
});
});我想做的是，阻止表单最初提交，做一些事情，然后用新参数更改表单的操作URL。
一切都很好，只有一个例外，那就是让我发疯。当我构建actionUrl时，我试图以特定的顺序获取变量：
？services=&service_type=0&category=0&location=（特别是我希望位置是最后一个）
如果我注解掉//$(this).submit();，我可以在控制台日志中看到url正在按照我想要的方式构建。
但是，如果我提交表格，终点是：？services=&location=&category=0&service_type=0
双U型T恤我疯了！！！
任何帮助指出我错过了什么是非常感谢
1条答案
按热度按时间x6yk4ghg1#
你的问题是
调用jquery提交处理程序...你刚把它拿走了
如果你想在jquery提交处理器中调用/继续“真实的的”提交，请将这一行改为：
所以它调用浏览器的
form.submit()而不是jquery的$("form").submit()。它们具有相同的名称，但它们不是相同的功能。注意：
unbind很久以前就被弃用了，请考虑改为.on()和.off()