Javascript在表中发送数据

javascript send data in a table

本文关键字：数据 Javascript      更新时间：2023-09-26

我想将表中的一些特定数据发送到特定IP。另一个IP是微控制器，我需要更改已更改的每个数据。但是应用/重启按钮只是发送整个变量。我想改变按钮改变/重启标签，使它发送每个数据在其块，而不是整个数据。

<script>
function validateForm()
{
 var x=document.forms[myForm][fname].value;
 if (x==null || x==)
   {
  alert(First name must be filled out); 
  return false; 
   }
 }
 </script>
</head>
<body>
<form name=myForm onsubmit=return validateForm() method=post>
<table>  <tr>
    <td>Device Info :</td>
   <td><input type=text name=dev-info id=1  size="3" value=></td>
   <td>.<input type=text name=dev-info id=11  size="3" value=></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td> <input type=submit value=Apply/change></td>
  </tr>
  <tr>
   <td>MAC Adress :</td>
  <td><input type=text name=mac-addr id=2 size="3"></td>
  <td>.<input type=text name=mac-addr id=21 size="3"></td>
  <td>.<input type=text name=mac-addr id=22 size="3"></td>
  <td>.<input type=text name=mac-addr id=23 size="3"></td>
  <td>.<input type=text name=mac-addr id=23 size="3"></td>
  <td>.<input type=text name=mac-addr id=23 size="3"></td>
  <td> <input type=submit value=Apply/change></td>
 </tr>
 <tr>
   <td>IP Adress :</td>
   <td><input type=text name=ip-addr id=3 size="3"></td>
   <td>.<input type=text name=ip-addr id=31 size="3"></td>
   <td>.<input type=text name=ip-addr id=32 size="3"></td>
   <td>.<input type=text name=ip-addr id=33 size="3"></td>
 <td></td>'r'n  <td></td>
 <td> <input type=submit value=Apply/change></td>
 </tr>
 <tr>
   <td>Gateway Adress :</td>
   <td><input type=text name=gate-addr id=4 size="3"></td>
   <td>.<input type=text name=gate-addr id=41 size="3"></td>
   <td>.<input type=text name=gate-addr id=42 size="3"></td>
   <td>.<input type=text name=gate-addr id=43 size="3"></td>
   <td></td>
  <td></td>
 <td> <input type=submit value=Apply/change></td>
   </tr>
  <tr>
   <td>Subnet Mask :</td>
   <td><input type=text name=sub-msk id=5 size="3"></td>
   <td>.<input type=text name=sub-msk id=51 size="3"></td>
   <td>.<input type=text name=sub-msk id=52 size="3"></td>
   <td>.<input type=text name=sub-msk id=53 size="3"></td>
   <td></td>
    <td></td>
     <td> <input type=submit value=Apply/change></td>
   </tr>
  <tr>
    <td>Ntp Server IP :</td>
  <td><input type=text name=ntp-ip id=6  size="3"></td>
  <td>.<input type=text name=ntp-ip id=61 size="3"></td>
  <td>.<input type=text name=ntp-ip id=62 size="3"></td>
  <td>.<input type=text name=ntp-ip id=63 size="3"></td>
  <td></td>
  <td></td>
  <td> <input type=submit value=Apply/change></td>
    </tr>
</table>
<input type=submit action=http://192.168.1.250  value=Apply/Reboot>
</form>
</body>

只发送给定块中的数据的一种方法是将每个块分离到自己的html表单中，以便提交按钮只提交与该块相关的值。这里的缺点是，您将无法使用一个完整的提交按钮一次提交整个表单。

另一种方法是让每个块提交按钮触发一个javascript函数，该函数只发送与块相关的数据。这可以通过Ajax请求来实现，也可以通过重定向并在重定向到的位置的querystring中传递相关值来实现。这可能是通过设置一个javascript函数来处理，然后通过jQuery的.click()功能，通过document.getElementById("buttonId").Click，或通过添加一个onclick="relevantFunction();return false;"属性到按钮来分配它。

注意，如果您采用逐块路由，您将需要将提交按钮切换为button类型而不是submit类型，或者您将需要使用return false;来阻止它们提交整个表单。请看下面的答案，看看这样做的例子。

下面是通过onclick实现第一个块使用该方法的示例。在你的javascript中:

function SingleSectionSubmit(inputIds, name, targetUrl)
{ //inputIds needs to be an array of the IDs for the section
   var querystring = "";
   //build requestParameter value; since each block is only one type of input, we can combine these together as long as your processing page supports that (and if it doesn't you will need to customize)
   var requestParam = "";
   for (var i = 0; i < inputIds.length; i++)
   { requestParam = requestParam + inputIds[i] + "."; }
   requestParam = requestParam.substring(0, requestParam.length - 1); //get rid of the trailing period
   querystring = "?" + name + "=" + requestParam;
   //perform the redirect
   window.location(targetUrl + querystring);
}

然后在html中把相关的按钮设置为:

<input type="submit" value="Apply/change" onclick="SingleSectionSubmit(['1','11'], 'dev-info', 'http://192.168.1.250');">

同样，这假定您提交到的页面(在本例中为http://192.168.1.250)能够使用来自查询字符串的GET变量处理请求。

相关文章：