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

Question

我正在编写一个简单的费用计算器，我有一些复选框和文本输入，我需要将输入的值添加到我的网址中，以便我可以将网址发送给具有相同值的人。我已在字段值中设置参数，例如：value="<?= isset($_GET['collect']) ? $_GET['collect'] : '0' ?>"当我手动在网址中输入参数时，一切正常，例如：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();

    }

  });

});

如有任何疑问，请告诉我。