CODEWITHSUNDEEP
javascripthtml
Charles
Charles

Reputation: 21

How to access checkbox form values after hitting the submit button with Javascript?

Suppose you have this:

<!DOCTYPE html>
<html>
<body>

<form id="clicked">

  <input type="checkbox" value="yes">yes<br>

  <input type="checkbox" value="no">no<br>

  <input type="button" onclick="Display()" type="submit" value="Submit">

</form>

<p id="change"></p>

<script>

function Display() {

    var clicked = document.getElementById("clicked").value;
    document.getElementById("change").innerHTML = clicked;
} 

</script>

</body>
</html>

You want the Javascript to make the value of the checked box appear on screen once submit is clicked, but it keeps printing 'undefined' so obviously it's not accessing the form correctly. What's the problem?

Upvotes: 0

Views: 261

Answers (1)

lordkain
lordkain

Reputation: 3109

<!DOCTYPE html>
<html>
<body>

<form id="clicked">

  <input type="checkbox" id="cb1" value="yes">yes<br>

  <input type="checkbox" id="cb2" value="no">no<br>

  <input type="button" onclick="Display()" type="submit" value="Submit">

</form>

<p id="change"></p>

<script>

function Display() {

    var clicked = document.getElementById("cb1").checked;
    var clicked2 = document.getElementById("cb2").checked;
    document.getElementById("change").innerHTML = " yes : " +clicked;
    document.getElementById("change").innerHTML += "<br/> no : " + clicked2;
} 

</script>

</body>
</html>

see here https://jsfiddle.net/mbkj6zv4/

Upvotes: 2

Related Questions