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.
You need to wrap the
onclickattribute value in quotes: