我想使用Javascript中的onclick按钮将数据从表单提交到表
[英]I want to submit data from form to table using onclick button in Javascript
问题描述
<html>
<head>
<title>Student form</title>
</head>
<body>
<div id="data">
Form : having 4 fields and 1 button to add data to table. 
形式：具有4个字段和1个按钮，可向表中添加数据。
<form align="center"><h3><b>Student Form</b></h3><br>
name : <input type="text" id="Name"><br><br>
branch : <input type="text" id="branch"><br><br>
address : <input type="text" id="address"><br><br>
contact : <input type="text" id="contact"><br><br>
<button onclick="AddData()">Add</button>
</form>
</div>
<div id="tab">
<table id="list" cellspacing="3" cellpadding="3" border="1"><thead>
<tr>
<td>Name</td><td>Branch</td><td>Address</td><td>Contact</td>
</tr></thead>
<tbody></tbody></table>
</div>
Script : AddData() function submits data from form to the table and is invoked when button is clicked. 脚本：AddData（）函数将数据从表单提交到表，并在单击按钮时调用。
<script>
function AddData()
{
var rows="";
var name=document.getElementById("Name").value;
var branch=document.getElementById("branch").value;
var address=document.getElementById("address").value;
var contact=document.getElementById("contact").value;
rows+="<tr><td>"+name+"</td><td>"+branch+"</td><td>"+address+"</td>
<td>"+contact+"</td></tr>";
$(rows).appendTo("#list tbody");
}
</script>
</body>
</html>
3 个解决方案
解决方案1
0 2017-08-11 05:51:05
Try this . 尝试这个 。
- Add the query library link
appentTo()its a jquery Object添加查询库链接appentTo()其jquery对象 - Change the button type with
submit通过submit更改按钮类型 - You need return the
onsubmitfor prevent the page refresh otherwise page was reloaded on every time submit您需要返回onsubmit来防止页面刷新，否则每次提交时都会重新加载页面
function AddData() { var rows = ""; var name = document.getElementById("Name").value; var branch = document.getElementById("branch").value; var address = document.getElementById("address").value; var contact = document.getElementById("contact").value; rows += "<tr><td>" + name + "</td><td>" + branch + "</td><td>" + address + "</td><td> " + contact + "</td></tr> "; $(rows).appendTo("#list tbody"); return false; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="data"> <form align="center" onsubmit="return AddData()"> <h3><b>Student Form</b></h3><br> name : <input type="text" id="Name"><br><br> branch : <input type="text" id="branch"><br><br> address : <input type="text" id="address"><br><br> contact : <input type="text" id="contact"><br><br> <button type="submit">Add</button> </form> </div> <div id="tab"> <table id="list" cellspacing="3" cellpadding="3" border="1"> <thead> <tr> <td>Name</td> <td>Branch</td> <td>Address</td> <td>Contact</td> </tr> </thead> <tbody></tbody> </table> </div>
解决方案2
0 2017-08-11 05:51:16
you can pass event to AddDate(e) and use e.preventDefault() . 您可以将事件传递给e.preventDefault() AddDate(e)并使用e.preventDefault() 。
<html> <head> <title>Student form</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="data"> <form align="center"><h3><b>Student Form</b></h3><br> name : <input type="text" id="Name"><br><br> branch : <input type="text" id="branch"><br><br> address : <input type="text" id="address"><br><br> contact : <input type="text" id="contact"><br><br> <button onclick="AddData(event)">Add</button> </form> </div> <div id="tab"> <table id="list" cellspacing="3" cellpadding="3" border="1"><thead> <tr> <td>Name</td><td>Branch</td><td>Address</td><td>Contact</td> </tr></thead> <tbody></tbody></table> </div> <script> function AddData(e) { e.preventDefault(); var rows=""; var name=document.getElementById("Name").value; var branch=document.getElementById("branch").value; var address=document.getElementById("address").value; var contact=document.getElementById("contact").value; rows+="<tr><td>"+name+"</td><td>"+branch+"</td><td>"+address+"</td><td>"+contact+"</td></tr>"; $(rows).appendTo("#list tbody"); } </script> </body> </html>
解决方案3
0 2017-08-11 06:04:39
Consider without jQuery. 考虑不使用jQuery。 Change the "Add" button to type button (it's submit by default) so it doesn't submit the form. 将“添加”按钮更改为键入按钮（默认情况下为提交），这样它就不会提交表单。 Then use DOM features to get the elements and their values, and to build the new row. 然后使用DOM功能获取元素及其值，并构建新行。
Be careful though, as a return in any of the inputs will submit the form so you may want to add a submit listener and prevent that, or use inputs without a form. 但是要小心，因为任何输入的返回都将提交表单，因此您可能想要添加一个提交侦听器并阻止它，或者使用不带表单的输入。
function addData(el) { var table = document.getElementById('list'); var tr = table.insertRow(); el.form.querySelectorAll('input').forEach(function(el) { var cell = tr.appendChild(document.createElement('td')); cell.textContent = el.value; }); }
<form align="center"> <h3><b>Student Form</b></h3><br> name : <input type="text" id="Name"><br><br> branch : <input type="text" id="branch"><br><br> address : <input type="text" id="address"><br><br> contact : <input type="text" id="contact"><br><br> <button type="button" onclick="addData(this)">Add</button> </form> </div> <div id="tab"> <table id="list" cellspacing="3" cellpadding="3" border="1"> <thead> <tr> <td>Name<td>Branch<td>Address<td>Contact </tr> </thead> </table>
The only "modern" feature above is the use of forEach with a NodeList, and that can be replaced fairly easily with a for loop or [].forEach.call(...) to get compatibility back to IE 8. 上面唯一的“现代”功能是将forEach与NodeList 一起使用，并且可以很容易地用for循环或[].forEach.call(...)以使兼容性回到IE 8。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.