Why the alert message is not appearing?

Question

I've a following HTML code:

<form name="question_issue_form" id="question_issue_form" action="question_issue.php">
      <table class="trnsction_details" width="100%" cellpadding="5">
        <tbody>    
          <tr>
            <td></td>
            <td>
              <input type="checkbox" name = "que_issue[]" value = "Question is wrong" id ="chkQueWrong">Question is wrong</input>
            </td>
          </tr>
          <tr>
            <td></td>
            <td><input type="checkbox" name = "que_issue[]" value = "Answers are wrong" id ="chkAnsWrong">Answers are wrong</input></td> 
          </tr>
          <tr>
            <td></td>
            <td><input type="checkbox" name = "que_issue[]" value = "Question direction is incorrect" id ="chkDirIncorrect">Question direction is incorrecct</input></td>                
          </tr>
          <tr>
            <td></td>
            <td><input type="checkbox" name = "que_issue[]" value = "Other" id ="chkOther">Other</input></td>          
          </tr>
          <tr>
            <td></td>
            <td class="set_message" style="display:none;"><textarea name="que_issue_comment" rows="4" cols="25" maxlength="100"></textarea></td>      
          </tr>
          <tr>
            <td></td>
            <td><input type="submit" name="submit" value="Submit" id="report_question_issue"></td>
          </tr>
        </tbody>
      </table>
    </form>

Following is my JS code:

$(document).on('click', '#report_question_issue', function (e) {
    alert("Jumbo man");
}

And upon clicking the submit button I'm calling the alert to appear but it's not appearing. I'm not getting why this is happening? For your refrence following is link to the js Fiddle; http://jsfiddle.net/TjK2N/

Answer 1

You are not including JQuery Reference. And you are missing to close );

DEMO

Answer 2

In your code bracket isn't closed properly at last. this is required ")" see this updated fiddle

$(document).on('click', '#report_question_issue', function (e) {
    alert("Jumbo man");
});

Answer 3

$(document).on('click', '#report_question_issue', function (e) {
    alert("Jumbo man");
}

$(XXX) this is a jquery syntax, but i saw you are in the Pure JS environment. Should you use a js library?

Answer 4

The problem is with the submit action of the <form> that reload the page before the JS is called.
To avoid it, you can change it by one of following :

1st using JS into action attribute

<form name="question_issue_form" id="question_issue_form" action="javascript:alert('test')">

2nd using onsubmit attribute

<form name="question_issue_form" id="question_issue_form" onsubmit="alert('test');" action="question_issue.php">

3rd using jQuery on submit event

$('form#question_issue_form').submit(function() {
    alert('test');
    return false; //to avoid the reload
});

4th using jQuery on click event on the submit button

$('form#question_issue_form').click(function() {
    alert('test');
    return false; //to avoid the reload
});