CODEWITHSUNDEEP
javascript
user1656455
user1656455

Reputation: 35

Alert box shows up multiple times on javascript

This is very simple code, and similar to my other question. When I click submit, the alert box shows up three times for option one, twice for two, and once for three.

Here is the part of the code where the problem is most probably located:

var chosen = ""
var len = document.ExamEntry.r1.length

for (var i = 0; i < len; i++) {
  if (document.ExamEntry.r1[i].checked) {
    chosen = document.ExamEntry.r1[i].value
  }
  if (chosen != "") {
    confirm(chosen)
  }
}

And here is my whole code. It all works fine except for this.

<!-- saved from url=(0055)file:///C:/Users/Bartek/Downloads/Exam%20entry4.1.2.htm -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></head><body><h1>Exam Entry Form</h1>
    <form name="ExamEntry" method="post" action="file:///C:/Users/Bartek/Downloads/success.html">
        <input type="radio" name="r1" value="GCSE">GCSE
<input type="radio" name="r1" value="AS">AS
<input type="radio" name="r1" value="A2">A2
<table width="50%" border="0">
            <tbody>
<tr>
                <td id="name" style="color: black; ">Name</td>
                <td>
                    <input type="text" name="name">
                </td>
            </tr>
            <tr>
                <td id="subject" style="color: black; ">Subject</td>
                <td>
                    <input type="text" name="subject">
                </td>
            </tr>
<tr>
                <td id="enumber" style="color: black; ">Examination Number</td>
                <td>
                    <input type="text" name="enumber">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="submit" name="Submit" value="Submit" onclick=" return validateForm();">
                </td>
                <td>
                    <input type="reset" name="Reset" value="Reset">
                </td>
            </tr>
        </tbody></table>
    </form>

<script>
function validateForm() {
  var result = true;
  var msg = "";
  if (document.ExamEntry.name.value == "") {
    msg += "You must enter your name \n";
    document.ExamEntry.name.focus();
    document.getElementById('name').style.color = "red";
    result = false;
  }
  if (document.ExamEntry.subject.value == "") {
    msg += "You must enter the subject \n";
    document.ExamEntry.subject.focus();
    document.getElementById('subject').style.color = "red";
    result = false;
  }
  if (document.ExamEntry.enumber.value.length != 4) {
    msg += "The examination number must be exactly four characters long \n";
    document.ExamEntry.enumber.focus();
    document.getElementById('enumber').style.color = "red";
    result = false;
  }
  var chosen = ""
  var len = document.ExamEntry.r1.length

  for (var i = 0; i < len; i++) {
    if (document.ExamEntry.r1[i].checked) {
      chosen = document.ExamEntry.r1[i].value
    }
    if (chosen != "") {
      confirm(chosen)
    }
  }
  if (msg == "") {
    return result;
  } {
    alert(msg);
    return result;
  }
} 
</script>
</body>
</html>

This is GCSE computing coursework.

Upvotes: 2

Views: 4333

Answers (2)

pdoherty926
pdoherty926

Reputation: 10349

You were missing an else.

if (!msg) {
    return result;
} else {
    alert(msg);
    return result;
}

Upvotes: 0

Ry-
Ry-

Reputation: 224856

for (var i = 0; i <len; i++) {
if (document. ExamEntry.r1[i].checked) {
chosen = document. ExamEntry.r1[i].value
}
if (chosen != "") {
confirm(chosen)
}
}

chosen won't be "" if it was set before; you don't set it back to "" if the item wasn't checked, and so it'll confirm the last one that was. Just merge them.

for(var i = 0; i < document.ExamEntry.r1.length; i++) {
    if(document.ExamEntry.r1[i].checked) {
        confirm(document.ExamEntry.r1[i].value);
    }
}

Upvotes: 1

Related Questions