jQuery 顯示表單文本輸入

Question

我對 jQuery 很陌生，所以我對如何進行這項工作感到有些困惑。 基本上，我有一個表單，其中包含輸入字段，例如學生 ID、學生姓名、學生出生日期和學生年齡。 一旦用戶將他們的信息輸入到字段中，我希望輸入以以下格式顯示在表單下方：
學生證：（輸入值）
學生姓名：（輸入值）等

到目前為止，這是我的代碼：

 $(document).ready(function() { $("#submitButton").on("click", function(e) { e.preventDefault(); var input = $("#q1").val() $("#show").html(input) }) $("#submitButton").on("click", function(e) { e.preventDefault(); var input = $("#q2").val() $("#show").html(input) }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form"> <table> <tr> <label>Student Id <input id="q1" type="text" placeholder="required"/>*</label><br> <label>Student Name <input id="q2" type="text" placeholder="required"/>*</label><br> <label>Student DOB <input id="q3" type="datetime" placeholder="required"/>*</label><br> <label>Student Age <input id="q4" type="number" placeholder="required"/>*</label><br> </tr> </table> <button type="button" id="submitButton" class="button">Login</button> <span id="show"></span>

截至目前，當您按“提交”時，只顯示輸入的第二個值，而不是第一個。 我最終需要在底部顯示所有字段，但第二個值當前位於表單的左側。 任何幫助/指導表示贊賞！

Answer 1

您只需要一個用於單擊的處理程序，然后使用該函數將您想要的兩個值中的字符串組合在一起。 這是一種寫法：

$(document).ready(function() {
  $("#submitButton").on("click", function(e) {
    e.preventDefault();
    var studentId = $("#q1").val();
    var studentName = $("#q2").val();
    $("#show").html(`Student ID: ${studentId}, Student Name: ${studentName}`);
  });
});

請注意，最后一行中的構造，帶有反引號和${...}語法，是一個模板文字，如果您必須在像 IE 這樣的老式瀏覽器上運行它，它將不起作用。 （在當今時代，您確實不必這樣做，但是由於您仍在使用var來聲明變量，我覺得我可能必須涵蓋這種情況。）在這種情況下，您可以輕松地重新創建相同的字符串，它讀起來會有點不那么好讀，因為"Student ID: " + studentId + ", Student Name: " + studentName 。

Answer 2

我將跨度設置為 div，我只是遍歷input元素並獲取標簽文本和輸入值。 您還只需要一個單擊處理程序。

 $("#submitButton").click(function(){ output = ""; $("input").each(function(){ output += $(this).parent("label").text().replace("*","") + ": " + $(this).val() + "<br>"; }); $("#show").html(output); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form"> <table> <tr> <label>Student Id <input id="q1" type="text" placeholder="required"/>*</label><br> <label>Student Name <input id="q2" type="text" placeholder="required"/>*</label><br> <label>Student DOB <input id="q3" type="datetime" placeholder="required"/>*</label><br> <label>Student Age <input id="q4" type="number" placeholder="required"/>*</label><br> </tr> </table> <button type="button" id="submitButton" class="button">Login</button> <div id="show"></div>

Answer 3

您正在做的是為表單提交創建兩個單獨的事件處理程序，一個用於 id，另一個用於名稱。 因此，在表單提交時，將調用兩個函數並相互踩踏，其中一個取消另一個的動作。

您應該將您的功能組合到一個事件處理程序中。

現在，我強烈建議獲取表單輸入值的一種干凈方法是為輸入分配名稱，並使用form's onsubmit事件，例如年齡：

<input id="q4" type="number" placeholder="required" name="age"/>

然后，在表單的onsubmit事件處理程序中，可以通過關鍵字this訪問表單，正如我在代碼段的注釋中所解釋的那樣。 這樣，輸入的年齡可以通過this.age.value訪問。 漂亮整齊！

把東西放在一起：

 $("#form").on("submit", function(e) { //prevent form submit from refreshing the page or redirecting e.preventDefault(); //get form input values //inside an event handler, `this` points to the element //to which the event handler is attached (in this case the form) //dispplay results in span $("#show").html(`Name: ${this.name.value}, DOB: ${this.dob.value}, Age: ${this.age.value}`); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form"> <table> <tr> <label>Student Id <input id="q1" type="text" placeholder="required"/>*</label><br> <label>Student Name <input id="q2" type="text" placeholder="required" name="name"/>*</label><br> <label>Student DOB <input id="q3" type="datetime" placeholder="required" name="dob"/>*</label><br> <label>Student Age <input id="q4" type="number" placeholder="required" name="age"/>*</label><br> </tr> </table> <button type="submit" id="submitButton" class="button">Login</button> <span id="show"></span>

Answer 4

問題已解決

 $( document ).ready(function() { $("#submitButton").on("click", function(e) { e.preventDefault(); var input = 'Std ID - '+$("#q1").val() +'</br> Std ID - '+$("#q2").val() +'</br> Std ID - '+$("#q3").val() +'</br>Std ID - '+$("#q4").val() +'</br>'; $("#show").html(input); }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="form"> <div>Table</div> <table> <tr> <label>Student Id <input id="q1" type="text" placeholder="required"/>*</label><br> <label>Student Name <input id="q2" type="text" placeholder="required"/>*</label><br> <label>Student DOB <input id="q3" type="datetime" placeholder="required"/>*</label><br> <label>Student Age <input id="q4" type="number" placeholder="required"/>*</label><br> </tr> </table> <button type="button" id="submitButton" class="button">Login</button> <br><br> <span id="show"></span>

Answer 5

僅使用 javascript（和一點 css - 真正困難的部分）就很容易做到

在一個表單中，names屬性用於直接標識每個元素（不需要放ID）

您還必須通過<form>本身（而不是按鈕）使用submit事件

 const myForm = document.getElementById('my-form') , showDiv = document.getElementById('show-div') ; myForm.onsubmit = e => { e.preventDefault() showDiv.innerHTML = `Student Id..: ${myForm.Student_Id.value} <br> Student Name: ${myForm.Student_Name.value} <br> Student DOB.: ${myForm.Student_DOB.value} <br> Student Age.: ${myForm.Student_Age.value} ` } // suggestion for init myForm.Student_DOB.valueAsDate = new Date() // today! myForm.Student_Age.valueAsNumber = 20 // less or more...

 label { width: 20em; display: block; float: left; clear: both; line-height: 2.7em; } label:before { content: '*'; float: right; } input { float: right; margin-right: .4em; width: 12em; height: 1.2em; margin: .3em; } button { display: block; float: left; clear: both; margin-top: 1em; } #show-div { float: left; clear: both; margin: 1em; font-family: monospace; }

 <form id="my-form"> <label> Student Id <input name="Student_Id" type="text" placeholder="required"/> </label> <label> Student Name <input name="Student_Name" type="text" placeholder="required"/> </label> <label> Student DOB <input name="Student_DOB" type="date" placeholder="required"/> </label> <label> Student Age <input name="Student_Age" type="number" placeholder="required"/> </label> <button type="submit">Login</button> </form> <div id="show-div"></div>