Question

这是基本的想法：我有一个html页面，我有一个表单来做一些东西和相应的JavaScript文件。我不能使用php，jquery或JSON来完成这个项目。

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

提前致谢。

Answer 1

您需要将onclick属性值包装在引号中：

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

Answer 2

为了阻止表单提交，您需要从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>

onClick javascript函数无法正常工作

2 个答案: