javascript - 表单操作不接受获取变量

Question

这个问题已经有答案了:

When submitting a GET form, the query string is removed from the action URL (14 个回答)

已关闭 3 年前。

我有一个表单元素，我使用以下代码更改其操作

HTML:

<form action='#' id='EventsBlockForm'>
    <select id='artikler' onchange='getUrl(this)'>
        <option disabled selected>-- Velg artikkel</option>
        <option value='/?id=198405547&Article=1'>Article 1</option>
    </select>
    <button type='submit'>Go to article</button>
<form>

JS:

function getUrl(input) {
    let form = document.getElementById("EventsBlockForm");
    form.action = input.value;
}

JavaScript 可以工作，它确实将操作更改为正确的值，但是当我单击提交按钮时，它会将我发送到 /?id=198405547而不是将我发送至/?id=198405547&Article=1 。有没有办法获取操作中的第二个 GET 变量。如果我使用a，效果很好。元素而不是按钮。

Answer 1

你可以这样做

window.addEventListener("load",function() {
  document.getElementById("artikler").addEventListener("change",function() {
    location = "/?"+this.value
  })
})

<form action='#' id='EventsBlockForm'>
    <select id='artikler'>
        <option disabled selected>-- Velg artikkel</option>
        <option value='id=198405547&Article=1'>Article 1</option>
    </select>
<form>

或

window.addEventListener("load",function() {
  document.getElementById("EventsBlockForm").addEventListener("submit",function(e) {
    e.preventDefault();
    var val = document.getElementById("artikler").value;
    if (val) location = "/?"+val;
  })
})

<form action='#' id='EventsBlockForm'>
    <select id='artikler'>
        <option disabled selected>-- Velg artikkel</option>
        <option value='id=198405547&Article=1'>Article 1</option>
    </select>
    <button type='submit'>Go to article</button>
<form>