jQuery 显示表单文本输入

Posted 2023-05-09

【中文标题】jQuery 显示表单文本输入

【英文标题】：jQuery Display Form Text Input

【发布时间】：2020-12-13 12:48:27

【问题描述】：

我对 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>

到目前为止，当您按下“提交”时，只会显示输入的第二个值，而不是第一个。我最终需要在底部显示所有字段，但第二个值当前位于表单的左侧。感谢任何帮助/指导！

【问题讨论】：

您正在替换 $("#show") 的内容两次 .... 所以第二次清除了第一次。尝试append() 而不是 html()。也不需要两个事件监听器，只是不必要地重复代码

这能回答你的问题吗？ Get the value in an input text box

【参考方案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`);
  );
);

请注意，最后一行中的结构，带有反引号和$... 语法，是template literal，如果你必须在像 IE 这样的非常旧的浏览器上运行它，它将无法工作。 （在这个时代，你真的不应该这样做，但由于你仍在使用var 来声明变量，我觉得我可能不得不涵盖这种情况。）在那种情况下你可以很容易地重新创建相同的字符串，只是读起来会不太好听，就像"Student ID: " + studentId + ", Student Name: " + studentName。

【参考方案2】：

我将 span 设置为一个 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>

【参考方案3】：

您正在做的是为表单提交创建两个单独的事件处理程序，一个用于 id，一个用于名称。因此，在表单提交时，将调用两个函数并相互踩踏，其中一个取消另一个的动作。

您应该将您的功能分组到一个事件处理程序中。

现在，我强烈建议获取表单输入值的一种简洁方法是为输入分配名称，并使用form's onsubmit 事件，例如年龄：

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

然后，在表单的onsubmit 事件处理程序中，可以通过关键字this 访问表单，正如我在sn-p 的cmets 中解释的那样。 这样，可以通过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>

【参考方案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>

【参考方案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>