Newbie: Need explanation of a Js function

Question

So I am doing a HTML and JavaScript related assignment which I am not required to have any prior knowledge of these scripting and programming languages. I was required to produce a document explaining how HTML and JavaScript brings about an entry form, and how JavaScript does validation check etc.

<head>
  <title>Exam entry</title>
  <script language="javascript" type="text/javascript">

  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(msg==""){
      return result;
    }
    {
      alert(msg)
      return result;
    }
  }

  </script>
</head>
<body>
  <h1>Exam Entry Form</h1>
  <form name="ExamEntry" method="post" action="success.html">
    <table width="50%" border="0">
      <tr>
        <td id="name">Name</td>
        <td><input type="text" name="name" /></td>
      <tr>
        <td id="subject">Subject</td>
        <td><input type="text" name="subject" /></td>
      </tr>
      <tr>
        <td id="examnumber">Examination Number</td>
        <td><input type="text" name="examnumber" /></td>
      </tr>
      <tr>
        <td><input type="radio" id="examtype" name="examtype" /> : GCSE<br />
        <td><input type="radio" id="examtype" name="examtype"  /> : A2<br />
        <td><input type="radio" id="examtype" name="examtype" /> : AS<br />
      </tr>
      <tr>
        <td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();"          />  </td>
        <td><input type="reset" name="Reset" value="Reset" /></td>
    </tr>
    </table>
  </form>
</body>

There's a task where I need to create 3 additional radio buttons for different level entries and then I was required to create a function which does a confirmation check, to ask the user to either confirm or cancel the choice after they have selected on a specific level entry. As I do not have any prior knowledge of programming(or I have learnt a little during the course of my assignment), I do not know how to create a function. Therefore, I googled it and found this page (It's the same assignment btw) From what I know from this page, I am required to change the radio buttons into:

<td><input type="radio" id="examtype" name="examtype" value="GCSE" /> : GCSE<br />
<td><input type="radio" id="examtype" name="examtype" value="A2" /> : A2<br />
<td><input type="radio" id="examtype" name="examtype" value="AS"/> : AS<br />

and implement a function as such:

function confirmation() {
  var checked = null;
  var inputs = document.getElementsByName('examtype');
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].checked) {
      checked = inputs[i];
      break;
    }
  }
  if(checked==null)
  {
    alert('Please choose an option');
    return false;
  } else {
    return confirm('You have chosen '+checked.value+' is this correct?');
  }

And great now I have done what it said, there's now an alert box which pops out and confirms choice of radio button with the user, so clicking on the radio button will trigger an onclick event which returns the function. Now my question is how does this function do the confirmation check? (I am sorry if I wrote too much, my previous post was put on hold by as too broad by a few of people, because I wasn't being clear enough what I am suppose to say.)

The OP is going to experience a slight snag in using a named function in the `onClick` attribute in JSFiddle, the default settings aren't set up to work that way: http://stackoverflow.com/questions/9114747/onclick-event-not-firing-on-jsfiddle-net just a heads up :) — Jason Sperske, May 07 '14 at 20:33

score 0 · Answer 1 · answered May 07 '14 at 20:04

0

Just add result &= confirmation(); in your validation code. Some where between your two if statements.

answered May 07 '14 at 20:04

Logan Murphy

6,120
3
24
42

score 0 · Answer 2 · answered May 07 '14 at 21:25

0

You need to watch the click event and determine whether or not you want to permit the action:

$(document).ready(function () {
    $('input[type="radio"]').on('click', function () {
        var r = confirm("Are you sure?");
        if (r == true) {
            $(this).prop('checked', true);
        } else {
            $(this).prop('checked', false);
        }
    });
});

http://jsfiddle.net/LTQ9p/1/

answered May 07 '14 at 21:25

Zoidberg

425
3
10

When you suggest to use a library like _jQuery_ and this library was not mentioned in the question by the OP, then you should tell that and which library you are using. – t.niese May 08 '14 at 07:13

Newbie: Need explanation of a Js function

2 Answers2