javascript form get value with 2 functions javascript

Question

document.querySelector("button").addEventListener("click", function () {
    console.log('Click détecté ');
        var form = document.createElement('form');
            form.setAttribute('method', 'GET');
            form.setAttribute('id', 'formSelectNbColumns');

            document.body.appendChild(form);


            let monSelect = document.createElement('select');
            monSelect.setAttribute('id', 'choice');
            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);

            document.querySelector("#choice").addEventListener("click", function () {
    console.log('Click détecté pour la deuxieme fois'); 

let formSelect = $('#formSelectNbColumns');
            let optionSelected = $("option:selected", formSelect);
            console.log('Valeur sélectionné : ' + optionSelected.val());

       });
        }
    );


<!doctype html>
<html>

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

<body>
    <button id="test">Ajouter un block</button>
<script src="jquery-3.3.1.min.js"></script>
    <script src="test.js"></script>

</body></html>

I'm trying to make a form with a javascript but I have a problem. I don't know how to get the value only with javascript. I wrote this code but it's not working. I don't understand why. I know this code is very simple but I want to understand how to do it.

document.querySelector("button").addEventListener("click", function() { console.log('Click détecté ');

var form = document.createElement('form');
        form.setAttribute('method', 'GET');
        form.setAttribute('id', 'formSelectNbColumns');

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

        document.querySelector("#choice").addEventListener("click", function() {
            console.log('Click détecté pour la deuxieme fois');

            let formSelect = $('#formSelectNbColumns');
            let optionSelected = $("option:selected", formSelect);
            console.log('Valeur sélectionné : ' + optionSelected.val());
        });
    }
);


<!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>

You’re loading jQuery _after_ your `test.js` script. Change the order, see if that works. Use the [browser console (dev tools)](https://webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. — Sebastian Simon, Jun 25 '18 at 22:05
Possible duplicate of [Uncaught ReferenceError: $ is not defined?](https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined) — Sebastian Simon, Jun 25 '18 at 22:09
@Xufox I don’t think this is necessarily a duplicate. There isn’t even enough information to know. — 0xCursor, Jun 25 '18 at 22:19
it 's still not working the problem of my code it's when i submit my form i can't get the value. — hlkl bklk, Jun 25 '18 at 22:21

Guillaume Georges · Answer 1 · 2018-06-25T23:06:08.480

0

Your script throws an error :

"Uncaught TypeError: Cannot read property 'addEventListener' of null"

It is thrown by this line :

document.querySelector("#choice").addEventListener("click", function() {...});

It can be solved by making 'choice' the id of your select element :

monSelect.setAttribute('id', 'choice');

And as others have said in comments, you need to include the jQuery script before your test.js script :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="test.js"></script>

Updated snippet :

document.querySelector("button").addEventListener("click", function() {
        console.log('Click détecté ');
        var form = document.createElement('form');
        form.setAttribute('method', 'GET');
        form.setAttribute('id', 'formSelectNbColumns');

        document.body.appendChild(form);

        let monSelect = document.createElement('select');
        monSelect.setAttribute('name', 'premier');
        monSelect.setAttribute('id', 'choice');
        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);

        document.querySelector("#choice").addEventListener("click", function() {
            console.log('Click détecté pour la deuxieme fois');

            let formSelect = $('#formSelectNbColumns');
            let optionSelected = $("option:selected", formSelect);
            console.log('Valeur sélectionné : ' + optionSelected.val());

        });
    }
);

<!doctype html>
<html>

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

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="test.js"></script>
</body>

</html>

edited Jun 25 '18 at 23:06

answered Jun 25 '18 at 22:26

Guillaume Georges

3,878
3
14
32

i add the id=choice to my input but i have this error : TypeError: document.querySelector(...) is null – hlkl bklk Jun 25 '18 at 22:34
Sur quel input l'as tu ajouté? Dans la réponse je te conseille de l'ajouter sur la select. – Guillaume Georges Jun 25 '18 at 22:35
j ai essayé sur le select mais des que je valide mon formulaire rien ne s affiche je suis supposé avoir le message : Click détecté pour la deuxième fois – hlkl bklk Jun 25 '18 at 22:44
Tu es sûr? Je l'ai testé dans mon snippet et ça marche. Peux-tu éditer ta question et ajouter la modification que tu as faite ? – Guillaume Georges Jun 25 '18 at 22:45
@hlklbklk Ton premier snippet fonctionne. Celui où tu as ajouté l'id. – Guillaume Georges Jun 25 '18 at 22:53
oui j arrive a avoir le message: click detecté mais pas le deuxieme message : Click détecté pour la deuxieme fois – hlkl bklk Jun 25 '18 at 22:56
@hlklbklk Cette deuxième erreur est du au fait que tu importes ton script test.js avant d'impoter jquery-3.3.1.min.js. Au moment où ton event handler est executé, jQuery n'est pas défini. Inverse le sens dans lequel tu importes les deux scripts. – Guillaume Georges Jun 25 '18 at 22:58
merci ça marche – hlkl bklk Jun 25 '18 at 23:11
je ne sais pas comment faire peux tu m indiquer comment faire – hlkl bklk Jun 25 '18 at 23:22
Il devrait y avoir une sorte de case à cocher à côté de ma réponse, à gauche. Tu peux aussi lire ici, c'est expliqué : https://meta.stackexchange.com/a/86979 – Guillaume Georges Jun 25 '18 at 23:28

javascript form get value with 2 functions javascript

1 Answers1