2014-11-23 6 views
1

Heres the basic idea: У меня есть html-страница, где у меня есть форма, чтобы сделать что-то и соответствующий файл javascript. Я не могу использовать php, jquery или JSON для этого проекта.onClick функция javascript не работает

В javascript у меня есть функция get_student_info(), которая связана с кнопкой отправки формы. Но всякий раз, когда я нажимаю кнопку отправки вместо того, чтобы отвезти меня к этой функции (распечатайте предупреждение и все остальное), я перешел на вторую страницу.

фрагмент кода приведен ниже:

<!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>  

и Вот Javascript часть:

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); 
} 

Спасибо заранее.

+0

Пропустите обратного вызова, не выполняются сразу : 'setTimeout (function() {PageJumping (" page2 ");}, 5000);' – vikingmaster

+1

спасибо. Я попробую это. –

+0

, если вы запрашиваете подтверждение у пользователя, не следует ли вам добавлять блок confirm()? if confirm()? – Aditya

ответ

2

Вам необходимо обернуть значение в onclick атрибута в кавычках:

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

спасибо человеку :) :) :) –

+0

У меня все еще есть еще одна проблема. Работает. Это заняло меня на стр. 8, но потом он снова забирает меня на странице2. Это для метода setTimeout? –

0

Для того, чтобы не допустить отправки формы, вам нужно вернуть false от его onsubmit события. например, в вашем случае,

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

Кроме того, было бы более семантически правильным, чтобы сделать это в обработчик события onsubmit, например

<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> 
Смежные вопросы