我想使用Javascript中的onclick按钮提交表单中的数据。

<html> 
<head> 
<title>Student form</title> 
</head> 
<body> 
<div id="data">

表单：具有4个字段和1个用于向表中添加数据的按钮。我想使用Javascript中的onclick按钮提交表单中的数据。

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

脚本：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>

来源

2017-08-11 Saurabh Mittal

使用'.addEventListener'而不是点击。 –

试试这个。

添加查询库链接appentTo()它的jQuery
变化与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>

来源

2017-08-11 05:51:05 prasanth

表单中的按钮默认情况下为类型提交。 ;-) – RobG

您可以将活动传递给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>

来源

2017-08-11 05:51:16 Dij

如果按钮类型是按钮，则不需要* preventDefault *。 – RobG

without prevent默认提交。 – Dij

没有考虑jQuery的。更改“添加”按钮以输入按钮（默认提交），因此它不提交表单。然后使用DOM功能获取元素及其值，并构建新行。

但要小心，因为任何输入的回报都会提交表单，因此您可能需要添加提交侦听器并阻止该提交，或者使用没有表单的输入。

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>

唯一的“现代”的上述特征是具有节点列表使用的forEach的，并且可以用一个for循环或[].forEach.call(...)很容易被取代，以获得兼容性回到IE 8.

来源

2017-08-11 06:04:39 RobG

我想使用Javascript中的onclick按钮提交表单中的数据。

回答

相关问题