CODEWITHSUNDEEP
javascriptphphtmlevent-handling
Jose Marques
Jose Marques

Reputation: 748

JavaScript HTML DOM Event Listener doesn't work

My code:

<?php 
  $id = 0;
  /*if(isset($_POST["type_test"]) && !empty($_POST["type_test"])){
    if($_POST["type_test"] == "ola"){
        echo "Ola José";
    }
    else if($_POST["type_test"] == "adeus"){
        echo "Adeus José";
    }
    else{

    }
  }*/


?>

<html>

<form  id="<?php echo $id; ?>" name ="form_test" action = "test_form.php" method="post" >
    <input type="radio" id = "type_test" name="type_test" value="ola"> ola <br>
    <input type="radio" id = "type_test" name="type_test" value="adeus"> adeus <br>
    <input type="submit" value="submit"> //imput only use for POST method
    <button id="myBtn">Try it</button>
    <script>

    </script>


</form> 
<script>
        document.getElementById("myBtn").addEventListener("click", functio_test;
        functio_test(){
            var x =document.getElementById.("type_test").value; 
            if(x == "ola" ){
                 alert("Ola José");
            }
            else if(x == "adeus" ){
                 alert("Adeus José");
            }
            else 
                alert("Continua José");
        }
</script>       
</html>

This is a simple program for when a button is triggered, an alert message appears.

I tried with the POST method and it worked. Why does it not work with the DOM Event Listener?

Upvotes: 0

Views: 1147

Answers (4)

CodingYourLife
CodingYourLife

Reputation: 8596

Code should look like this

<form id="<?php echo $id; ?>" name ="form_test" action="test_form.php" method="post">
    <input type="radio" name="type_test" value="ola"> ola <br/>
    <input type="radio" name="type_test" value="adeus"> adeus <br/>
    <input type="submit" value="submit" /> <!--imput only use for POST method-->
</form>

<button id="myBtn">Try it</button>

<script>
        document.getElementById("myBtn").addEventListener("click", functio_test);

        function functio_test(){
            var x = document.querySelector('input[name="type_test"]:checked').value;
            if(x == "ola"){
                 alert("Ola José");
            }
            else if(x == "adeus"){
                 alert("Adeus José");
            }
            else {
                alert("Continua José");
            }
        }
</script>

Comment for "imput only use for POST method" was not a real comment. As mentioned before by @Hossam you are missing a closing bracket in the addEventListeiner. As mentioned by @Cruiser you are missing the word function when declaring the function. Also an id attribute should be unique so id="type_test" should only be assigned once. The way to get the value of the type_test radio buttons can be done via query selector your id call did not work because you have to find the one that is checked. I assume you don't want to submit the form by clicking on the try it button. The easiest way is to put the button outside of the form.

Also check out the jQuery Javascript library which makes Javascript fun :)

Upvotes: 1

Sᴀᴍ Onᴇᴌᴀ
Sᴀᴍ Onᴇᴌᴀ

Reputation: 8297

Why does it not work with the DOM Event Listener?

The call to addEventListener() is not closed. 

document.getElementById("myBtn").addEventListener("click", functio_test;

To fix this, add a closing parenthesis:

document.getElementById("myBtn").addEventListener("click", functio_test);
//                                                                     ^

See this working in the example below. Notice a few changes were made:

  • function keyword added before function name: function functio_test()
  • event argument accepted: function functio_test(e)
  • event default behavior (button click submitting form) stopped: e.preventDefault()

  • getting value from the form elements (instead of by id - since that only relates to the first input with that id attribute):

    var x = document.forms[0].elements.type_test.value;

  • The <input> tags have no permitted content and thus are empty elements, so the closing slash was added to the end of the tags. For example: 

    <input type="radio" id="type_test" name="type_test" value="ola" />
//                                                              ^

  • The id attribute of the second radio button was changed because "The id global attribute defines a unique identifier (ID) which must be unique in the whole document."2

    <input type="radio" id="type_test2" name="type_test" value="adeus" /> adeus <br>

  • Also if this code wasn't in the snippet sandbox, the <form> and <script> tags would be moved into a <body> tag under the <html> tag, since those are flow content and the only permitted contents for <head> are: "One <head> element, followed by one <body> element."1

  • Also the id attribute of the form has the text 'form` prepended because "Using characters except ASCII letters and digits, '_', '-' and '.' may cause compatibility problems, as they weren't allowed in HTML 4. Though this restriction has been lifted in HTML 5, an ID should start with a letter for compatibility."3

document.getElementById("myBtn").addEventListener("click", functio_test);

function functio_test(e) {
  e.preventDefault();
  var x = document.forms[0].elements.type_test.value;
  if (x == "ola") {
    alert("Ola José");
  } else if (x == "adeus") {
    alert("Adeus José");
  } else
    alert("Continua José");
}
<form id="form0" name="form_test" action="test_form.php" method="post">
  <input type="radio" id="type_test" name="type_test" value="ola" /> ola <br>
  <input type="radio" id="type_test2" name="type_test" value="adeus" /> adeus <br>
  <input type="submit" value="submit" /> //imput only use for POST method
  <button id="myBtn">Try it</button>
</form>

1https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html)

2https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

3https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)

Upvotes: 1

Cruiser
Cruiser

Reputation: 1616

Because you're not using it correctly. addEventListener should be called like this: 

 document.getElementById("myBtn").addEventListener("click", function(){
    // code here
 });

Or, you can call it like so:

document.getElementById("myBtn").addEventListener("click", functio_test);

// and you must make sure to declare your function correctly
function functio_test(){
    // code here
}

Upvotes: 2

Hossam
Hossam

Reputation: 1146

make sure you close every bracket:

document.getElementById("myBtn").addEventListener("click", functio_test);

Upvotes: 1

Related Questions