Form action not accepting get variables

Question

I have a form element that I change the action of with the following code

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;
}

The javascript works and it does change the action to the correct value, however when I click the submit button it sends me to /?id=198405547 instead of sending me to /?id=198405547&Article=1. Is there a way to get the second GET variable in the action. This works fine if I use a a elemenent instead of the button.

You can use [input type="hidden"](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden) for sending the queries together when the form is submitted. In your case, it would be You can also do the same for the id. — davidchoo12, Oct 29 '19 at 09:19

score 1 · Answer 1 · answered Oct 29 '19 at 09:28

You can do this

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>

or

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>

Form action not accepting get variables

1 Answers1