onClick javascript function is not working

Question

Heres the basic idea: I have an html page where I have a form to do some stuff and a corresponding javascript file. I cannot use php, jquery or JSON to do this project.

In javascript, I have get_student_info() function which is connected with form submit button. But, whenever, I hit submit button instead of taking me to that function (print the alert and everything else), I have been jumped to the second page.

The code snippet is given below:

<!DOCTYPE html>
<html>
<head>
     <script type = "text/javascript" src = "app.js" defer></script>
</head>
<body>
<a name = "page7"></a>
<div id="page7">
<header id="page7_header">
      <h3 id="page7_h3"> SSC Information </h3>
</header>


<div id = "page7_empty_space"></div>

<center id="page7_ssc_info" >      

      <form name="page7_ssc_input" id="page7_table" method="post">

        <label id="page7_passing_year_p">Passing Year : 
        <label>

        <select id="page7_ssc_year_dropDown" name="ssc_passing year">
                      <option value="sscyear1">2009</option>
                      <option value="sscyear2">2010</option>
                      <option value="sscyear3">2011</option>
                      <option value="sscyear4">2012</option>
                      <option value="sscyear5">2013</option>
                      <option value="sscyear6">2014</option>
           </select>
           <label id="page7_board_p">
          Board : 
          </label>

          <select id="page7_ssc_board_dropDown" name="ssc_board">
                      <option value="sscboard1">Dhaka</option>
                      <option value="sscboard2">Chittagong</option>
                      <option value="sscboard3">Barisal</option>
                      <option value="sscboard4">Comilla</option>
                      <option value="sscboard5">Sylhet</option>
                      <option value="sscboard6">Dhaka</option>
                      <option value="sscboard7">Chittagong</option>
                      <option value="sscboard8">Barisal</option>
                      <option value="sscboard9">Comilla</option>
                      <option value="sscboard10">Sylhet</option>
                  </select>
            <label id="page7_gpa"> GPA:
            </label>

            <input type="text" value="" palceholder="GPA" id="page7_input_gpa">

            <label id="page7_group">Group :
            </label>

            <input type="text" value="" palceholder="group" id="page7_ssc_group">

    <button  id="page7_button_next" onclick = get_student_info("page7_ssc_year_dropDown", "page7_ssc_board_dropDown", "page7_input_gpa","page7_ssc_group", "page8");>
       Next
    </button> 

    </form>
    <!-- Database sending data part -->

</center>

<footer id="page7_footer">
</footer>
</div>
</body>
</html>

and Here is the Javascript part:

window.addEventListener = disableFirstPage();

// global variable zone
var timeout;


// global variable zone

function disableFirstPage()  
{
   alert("method: disableFirstPage()");    
   // timeout is not working properly

   timeout = setTimeout(PageJumping("page2"),5000); //Jump to Page 2

   document.getElementById("page1").style.visibility = "hidden";
   document.getElementById("page2").style.visibility = "visible";
   //disableScrolling();
   disableTimeOut(timeout);
}

function PageJumping(x)
{  
   alert("Jumping to "+x);
   window.location.hash = x; 
}

function disableScrolling()
{  
    alert("disabling scrolling");
    document.body.style.overflow = "hidden";
}

function disableTimeOut(timeout)
{
   alert("timeout is disabled.")
   clearTimeout(timeout);
}   


function get_student_info(passingYear, board, gpa,group, nextPage)
  // this method has a page jumping after confirming student information is okay and valid;
{
   alert("am i here");
   var passingYear = document.getElementById(passingYear).value;
   var board = document.getElementById(board).value;
   var gpa = document.getElementById(gpa).value;
   var group = document.getElementById(group).value;

   alert("confirm your information using ok/cancel box");
   alert("passingYear: "+passingYear+" board: "+board+ " gpa: "+gpa+" group: "+group);
   PageJumping(nextPage);
}

Thanks in advance.

Pass the callback, do not execute straight away: setTimeout(function(){ PageJumping("page2"); },5000); — sybear
– sybear, Commented Nov 23, 2014 at 11:59
if you are asking for a confirmation from the user then shouldn't you be adding the confirm() block? if confirm()? — Aditya
– Aditya, Commented Nov 23, 2014 at 12:01
@Aditya, I will enable it later. I was trying to connect with the function at that moment. — Syeda NoorJaha Azim
– Syeda NoorJaha Azim, Commented Nov 23, 2014 at 12:03

techfoobar · Accepted Answer · 2014-11-23 11:58:47Z

2

You need to wrap the onclick attribute value in quotes:

... onclick='get_student_info("page7_ssc_year_dropDown", "page7_ssc_board_dropDown", "page7_input_gpa","page7_ssc_group", "page8");' ...

answered Nov 23, 2014 at 11:58

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Syeda NoorJaha Azim Over a year ago

I still have one more problem. Its working. It took me in page8 but then it takes me in page2 again in a second. Is that for the setTimeout method?

Tsahi Asher · Accepted Answer · 2014-11-24 08:40:11Z

0

In order to prevent a form submit, you need to return false from it's onsubmit event. for example, in your case,

<form name="page7_ssc_input" id="page7_table" method="post" onsubmit="return false;">
...
</form>

Also, it would be more semantically correct to do that in the event handler of the onsubmit, for example

<form name="page7_ssc_input" id="page7_table" method="post" onsubmit='get_student_info("page7_ssc_year_dropDown", "page7_ssc_board_dropDown", "page7_input_gpa","page7_ssc_group", "page8"); return false;'>
...
    <button type="submit" id="page7_button_next">
       Next
    </button>
</form>

edited Nov 24, 2014 at 8:40

answered Nov 23, 2014 at 12:09

Tsahi Asher

1,83417 silver badges30 bronze badges

Collectives™ on Stack Overflow

onClick javascript function is not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related