Javascript: display an alert when a form is checked?

Question

Javascript: display an alert when a form is checked?

121 views Asked by user4929435 At 19 October 2024 at 19:23

I have created a simple web app that has 2 form selections, when the user makes their selection from each I want an alert to display showing them the choices they made.

I have attempted this below but when both forms are checked the alert is not displayed. What am I missing? Note see the comment:

 //BELOW IS NOT BEING DISPLAYED BUT SHOULD BE

Current code:

<!DOCTYPE html>
<html>
<body>

<h1>Calculator</h1>

<p>Select the importance of this:</p>

<form method="get">
  <input type="checkbox" name="Severity" value="negligible"> Negligible<br>
  <input type="checkbox" name="Severity" value="minor"> Minor<br>
</form>

<p>Select the Probability of this:</p>

<form method="get">
  <input type="checkbox" name="Probability" value="improbable"> Improbable<br>
  <input type="checkbox" name="Probability" value="remote"> Remote<br>
  <input type="checkbox" name="Probability" value="occasional"> Occasional<br>

<button onclick= "analyseThis()"> Analyse this </button> <br>



<script>

function analyseThis(){

    var severities = document.getElementsByName('Severity');
   var probs = document.getElementsByName('Probability');

  var severity = undefined;
  for(var i = 0; i < ages.length; i++)
  {
    if(severities[i].checked)
    {
      age = severities[i].value;

    }
  }

   var probability = undefined;
   for(var i = 0; i < probs.length; i++)
   {
      if(probs[i].checked)
      {
        probability = probs[i].value;

      }
    }

   //BELOW IS NOT BEING DISPLAYED BUT SHOULD BE
   alert("Severity is: " + age + "Probability is: " + probability);

}

</script>


</body>
</html>

Original Q&A

There are 4 answers

**Si8** · Answer 1 · 2015-06-10 14:04:49

I would use JQuery and use the click function of the button to submit.

Here is an example:

$(document).ready(function () {
    $("{form id/class button id/class OR button id/class}").click(function(e) {
        e.preventDefault();
        //perform validation

        //if everything is good...
        $("{form id/class}").submit();
    });
});

**SzybkiSasza** · Answer 2 · 2015-06-10 14:07:29

You have an error in your code - you are checking ages.length in your loop which is probably undefined (no ages variable in your code) in the first loop and your code execution should stop there.

Working JSBin code here: http://jsbin.com/yelihugune/1/

**Paul** · Answer 3 · 2015-06-10 14:11:55

You have a bug in your code.

for(var i = 0; i < ages.length; i++)
{
    if(severities[i].checked)
    {
        age = severities[i].value;

    }
}

'ages' is not yet defined in your code, nor is 'age'. This will be throwing an error, stopping your code from running. This is why the alert is not going.

Declare the ages array.

**Hurricane Hamilton** · Answer 4 · 2015-06-10 14:15:49

Something funny is happening:

Your function analyseThis() does get called, but there is an error when it is being evaluated.
The form on the page is being "submitted", so the page reloads and you never see the error.

To prevent the page from reloading (so you can see your error) do this:

Pass in the event object to your analyseThis() function from the onclick hander:
```
<button onclick= "analyseThis(event)"> Analyse this </button>
```
Make your analyseThis() accept the event object, and call .preventDefault() on it so that the page doesn't reload:
```
function analyseThis(e){
  e.preventDefault()
  // the rest of your function body here....
}
```

After you do that, you will see the underlying error output in the console:

ReferenceError: ages is not defined (line 33, col 17)
for(var i = 0; i < ages.length; i++)

If you do want the form to be submitted, just remember to remove the e.preventDefault() call after debugging the code.

TechQA.

Javascript: display an alert when a form is checked?

There are 4 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ALERT

Popular Questions

Popular Tags

Trending Questions