HTML5 onclick按鈕打開新頁面（但我不希望它這樣做）

Question

我有一個鏈接到數據庫的HTML Web表單。我必須使用「type =」submit「來爲必填字段使用驗證功能。當我這樣做時，頁面會打開一個新頁面。使用」type =「按鈕」「不會打開新頁面，但不會打開新頁面「T驗證所需的字段。我試圖讓AJAX插入從servlet響應到當前頁面，而不是打開一個新頁面，這是HTML表單。

<form id="EnrollmentForm"> 
    <p><i>Please complete the form. Mandatory fields are marked with a </i><em>*</em></p> 
    <fieldset> 
    <legend>New Course Enrollment</legend> 
    <label for="StudentID"> Student ID <em>*</em></label> 
    <input ID="StudentID" name = "StudentID" autofocus placeholder="12345" required><br> 
    <label for="CourseID"> Course ID <em>*</em></label> 
    <input id="CourseID" name="CourseID" placeholder="CS4900" required><br> 
    </fieldset> 
    <p><input onclick="newEnrollment();" type="submit" value="Enroll"></p> 
    <p id="result"></p> 
</form> 

的newEnrollment（）函數JavaScript的。

function newEnrollment() { 
    validateForm(); 
    if (validateForm()){ 
     document.getElementById("result").innerHTML = "The request has been sent."; 
     var studentID = document.getElementById("StudentID").value; 
     var courseID = document.getElementById("CourseID").value; 
     var dataToSend = "?StudentID=" + studentID + "&CourseID=" + courseID; 
     req.open("GET", "http://localhost/examples/servlets/servlet/NewEnrollment" + dataToSend, true); 
     req.onreadystatechange = handleServerResponse; 
     req.send(); 
    } 
} 

function handleServerResponse() { 
    if ((req.readyState == 4) && (req.status == 200)) { 
      var result = req.responseText; 
      document.getElementById("result").innerHTML = result; 
    } 
} 

我會包括了Java Servlet僅供參考。SQL語句返回時，它不能正常結束時刻的錯誤，但我想這個問題修復是提交的新頁面。

import java.io.*; 
import javax.servlet.*; 
import javax.servlet.http.*; 
import java.sql.*; 

public class NewEnrollment extends HttpServlet { 
    public void doGet(HttpServletRequest request, HttpServletResponse response) 
    throws ServletException, IOException { 

// class to write out to the log files 
    ServletContext sc = getServletContext(); 
    response.setContentType("text/html"); 
    PrintWriter out = response.getWriter(); 

// Get the Data from the Database 
    try { 
Class.forName("oracle.jdbc.OracleDriver"); 
    System.out.println("Driver loaded"); 
    String url="jdbc:oracle:thin:@localhost:1521:CS3600"; 
    String user = "XXXXXXX"; 
    String pwd = "XXXXXXX"; 
    String Course_ID = request.getParameter("CourseID"); 
    String Student_ID = request.getParameter("StudentID"); 

    Connection DB_mobile_conn = DriverManager.getConnection(url,user,pwd); 
    System.out.println("Database Connect ok");//STUDENT_SEQ.CURRVAL 
    PreparedStatement prep_stmt = DB_mobile_conn.prepareStatement("INSERT INTO ENROLLMENT VALUES (?, ?)"); 
    prep_stmt.setString(1,Course_ID); 
    prep_stmt.setString(2,Student_ID); 
    prep_stmt.executeUpdate(); 

    String query = "select Student.Student_Last_Name, Student.Student_First_Name, Courses.Course_Name"+ 
     " from Courses,enrollment,student where enrollment.Student_ID = '"+Student_ID+ 
     "' and enrollment.course_id = '"+Course_ID+"' and student.student_id = enrollment.student_id"+ 
     " and courses.course_ID = enrollment.course_ID;"; 
    Statement query_stmt=DB_mobile_conn.createStatement(); 
    ResultSet query_rs=query_stmt.executeQuery(query); 
    query_rs.next(); 

    String result = "Student: "+query_rs.getString(1)+", "+query_rs.getString(2)+ 
     " was enrolled in course: "+query_rs.getString(3)+"."; 
    query_rs.close(); 
    query_stmt.close();  
    out.println(result); 

    } catch (Exception exp) { 
    out.println("Exception = " +exp); 
    System.out.println("Exception = " +exp); 
    } 
} 

public void doPost(HttpServletRequest request, HttpServletResponse response) 
    throws IOException, ServletException 
    { 
     doGet(request, response); 
    } 
} 

準備好的聲明起作用。該查詢返回一個SQL錯誤。 結果應該是 「學生：Doe，John參加了課程：CS4900。」 尋求幫助與onclick按鈕問題的一切只是爲了完整的環境意識。感謝您的幫助。

Answer 1

將一個event參數添加到newEnrollment。然後在該方法的頂部，叫event.preventDefault()

function newEnrollment(event) { 
    event.preventDefault(); 
    . 
    . 
    . 
} 

我會使用一個監聽器註冊事件處理程序：

form = document.getElementById("EnrollmentForm"); 
form.addEventListener('submit', newEnrollment, false); 

Answer 2

我認爲你是對此事的複雜化。 http://www.w3schools.com/tags/att_a_target.asp

Answer 3

的問題是使用形式試試這個，target="_self"

參考。通過刪除表單和fieldset標籤並使用onclick按鈕，它允許innerHTML回寫到頁面。此解決方案不執行驗證，但它不再需要我所做的工作。

<div> 
    <p><i>Enroll a student in a course. </i></p> 

    <legend>New Course Enrollment</legend> 
    <label for="StudentID"> Student ID </label> 
    <input ID="StudentID" name = "StudentID" autofocus placeholder="12345"><br> 
<label for="CourseID"> Course ID </label> 
    <input id="CourseID" name="CourseID" placeholder="CS4900"><br> 

    <p><button id="zero" onclick="newEnrollment()">Enroll</button></p> 
    <p id="result"></p> 
</div>