How to use get method with javascript

Question

I'm trying to do a form with a get method but I have a problem. I don't know how to get the value `. I do this code but is not working, I don't understand why.

I know this code is very simple, but I want to understand how to use the get method:

document.querySelector("button").addEventListener("click", function() {
    console.log('Click détecté ');
    var form = document.createElement('form');
    form.setAttribute('method', 'GET');
    form.setAttribute('action', 'test1.php');
    document.body.appendChild(form);

    let monSelect = document.createElement('select');
    let monOption = document.createElement('option');
    monOption.setAttribute('value', 1);
    monOption.innerText = 'choice1';
    monSelect.appendChild(monOption);
    let monOption2 = document.createElement('option');
    monOption2.setAttribute('value', 2);
    monOption2.innerText = 'choice2';
    monSelect.appendChild(monOption2);
    form.appendChild(monSelect);
    let input = document.createElement('input')
    input.setAttribute('type', "submit");

    input.setAttribute('value', "submit");
    form.appendChild(input);
  }
);

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Quelques langages</title>
</head>

<body>
  <button id="test">Ajouter un block</button>

  <script src="test.js"></script>
  <script src="jquery-3.3.1.min.js"></script>
</body>

</html>

<?php 

var_dump($_GET['typecolonne']);

?>

`

David784 · Accepted Answer · 2018-06-17 20:53:30Z

You're almost there. For a form element to be submitted, it needs to have a name attribute. All you need is to add

monSelect.setAttribute('name', 'premier');

and then you'll have a query string added to your GET request, like this:

https://stacksnippets.net/test1.php?premier=1

document.querySelector("button").addEventListener("click", function() {
    console.log('Click détecté ');
    var form = document.createElement('form');
    form.setAttribute('method', 'GET');
    form.setAttribute('action', 'test1.php');
    document.body.appendChild(form);


    let monSelect = document.createElement('select');
    monSelect.setAttribute('name', 'premier');
    let monOption = document.createElement('option');
    monOption.setAttribute('value', 1);
    monOption.innerText = 'choice1';
    monSelect.appendChild(monOption);
    let monOption2 = document.createElement('option');
    monOption2.setAttribute('value', 2);
    monOption2.innerText = 'choice2';
    monSelect.appendChild(monOption2);
    form.appendChild(monSelect);
    let input = document.createElement('input')
    input.setAttribute('type', "submit");

    input.setAttribute('value', "submit");
    form.appendChild(input);

  }

);

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Quelques langages</title>
</head>

<body>
  <button id="test">Ajouter un block</button>

  <script src="test.js"></script>
  <script src="jquery-3.3.1.min.js"></script>
</body>

</html>

Collectives™ on Stack Overflow

How to use get method with javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related