时间戳

首页 > 解决方案 > 表单操作不接受获取变量

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

问题描述

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

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元素而不是按钮，这可以正常工作。

标签： javascripthtml

解决方案

你可以这样做

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>

推荐阅读