javascript send data in a table

Question

I want to send some specific data in a table into a specific IP . the other IP is a microcontroller and I need to change every data that has been changed . but the apply/reboot button just send the whole variables . I want to change the button change/reboot tags so that it sends every data in its block instead of the whole data.

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

"every data in its block instead of the whole data" what does this mean? — BNL, Apr 15 '13 at 13:24
every block has a specific button and when I push it , it will send the whole variables — Esmail Mirhosseini, Apr 15 '13 at 13:28

score 0 · Answer 1 · edited May 23 '17 at 11:50

One method of sending only the data in a given block would be to separate each block into its own html form, so that the submit button is submitting only the values related to that block. The downside here is that you will not be able to submit the entire form at once with an overall submit button.

An alternative is to have the per-block submit buttons fire a javascript function that sends only the data relevant to the block. That could be done via an Ajax request, or by redirecting and passing the relevant values in the querystring of the location that you are redirecting to. This would likely be accomplished by setting up a javascript function do to the handling and then assigning it to the buttons through either jQuery's .click() functionality, through document.getElementById("buttonId").Click, or through adding an onclick="relevantFunction();return false;" attribute to your buttons.

Note that if you go the per-block route, you will need to either switch the submit buttons to be of type button instead of type submit, OR you will need to use return false; to keep them from submitting the overall form. See this answer for examples of doing that.

Here's an example of employing that method via the onclick implementation for the first block. In your 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);
}

And then in the html you would make the related button into:

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

Again, this assumes that the page you are submitting to (at http://192.168.1.250 in this case) is able to process the request using GET variables from the querystring.

It looks like he is sending the data to a different server, so an ajax submit probably will not work. — BNL, Apr 15 '13 at 13:34
my problem was when I seperated the block , the whole block was unregular . so I decided to use them in a table — Esmail Mirhosseini, Apr 15 '13 at 13:34
Edited to include some sample code as one possible implementation for one section. — Jeffrey Blake, Apr 15 '13 at 14:08

javascript send data in a table

1 Answers1