如何在填写输入字段后向我的网址添加参数并选中复选框而不提交表单

Question

我正在编写一个简单的费用计算器，我有一些复选框和文本输入，我需要将输入的值添加到我的url中，这样我就可以将url发送给具有相同值的人。我已经在字段的值中设置了参数，例如：

value="<?= isset($_GET['collect']) ? $_GET['collect'] : '0' ?>"

当我手动在url中键入参数时，一切都很好，例如：

myurl.com/？collect=200&collectBudget=50

如果选中复选框或在输入字段中输入值，我需要在url中动态地设置参数。她的是一个简单计算器的例子https://codepen.io/alchy/pen/xxOQqeO

Answer 1

由于缺乏其他信息，我提出了这个问题，它应该在很大程度上满足您的要求，但您需要决定您希望url查询名称是什么，您希望url如何/何时重置，如果您想在值为0时显示查询值，以及您希望如何解析复选框值：

$( document ).ready(function() {
// Get the base URL
const baseUrl = location.href.replace(location.search, '');
// Find the Input elements
const collectCheckbox = document.getElementById('collect');
const platformInput = document.getElementById('nPlatform');
const platformBudInput = document.getElementById('PlatformBud');
const displayCheckbox = document.getElementById('display');
const numStoresInput = document.getElementById('nStores');
const storeBudInput = document.getElementById('storBud');
// Attach listeners to the Input elements
collectCheckbox.addEventListener('change', updateUrl);
platformInput.addEventListener('input', updateUrl);
platformBudInput.addEventListener('input', updateUrl);
displayCheckbox.addEventListener('change', updateUrl);
numStoresInput.addEventListener('input', updateUrl);
storeBudInput.addEventListener('input', updateUrl);
var timeout = null;
function calculatePrice() {
var collectCheck = document.getElementById('collect');
var displayCheck = document.getElementById('display');
var xPlatfor = document.getElementById('nPlatform').value;
var pBudget = document.getElementById('PlatformBud').value;
var xStore = document.getElementById('nStores').value;
var sBudget = document.getElementById('storBud').value;
var collectAmount,
collectBudget,
displayAmount,
displayBudget,
pricePerMonth,
pricePerYear;
collectAmount = 0;
collectBudget = 0;
displayAmount = 0;
displayBudget = 0;
pricePerMonth = 0;
pricePerYear = 0;
if (collectCheck.checked == true && xPlatfor > 0 && pBudget > 0) {
collectAmount = pBudget;
}
if (displayCheck.checked == true && xStore > 0 && sBudget > 0) {
displayAmount = xStore * sBudget;
}
pricePerMonth = +collectAmount + +displayAmount;
pricePerYear = pricePerMonth * 12;
document.getElementById('pricePerM').innerHTML = pricePerMonth;
document.getElementById('pricePerY').innerHTML = pricePerYear;
}
function updateUrl() {
if (!(collectCheckbox.checked || displayCheckbox.checked || platformInput.value || platformBudInput.value || numStoresInput.value || storeBudInput.value)) {
return baseUrl;
}
let newUrl = new URL(`${baseUrl}?`);
collectCheckbox.checked && newUrl.searchParams.append('collect', 1);
displayCheckbox.checked && newUrl.searchParams.append('display', 1);
platformInput.value && newUrl.searchParams.append('platforms', platformInput.value);
platformBudInput.value && newUrl.searchParams.append('platformBudget', platformBudInput.value);
numStoresInput.value && newUrl.searchParams.append('numStores', numStoresInput.value);
storeBudInput.value && newUrl.searchParams.append('storeBud', storeBudInput.value);
history.pushState({}, '', newUrl.toString());
}
calculatePrice();
document.addEventListener('click', function (e) {
if (e.target.name == 'question_1') {
calculatePrice();
}
});
});

有任何问题，请告诉我。