如何使用表单、单选按钮发送表值？答案

【问题标题】：How to send table value with form, radio button?如何使用表单、单选按钮发送表值？
【发布时间】：2016-07-12 13:12:06
【问题描述】：

例子

表格中的HTML代码

<table>
  <tr>
    <td> <input type='text' value='example 1' name='text1' /></td>
    <td> <input type='radio' value='example 1' name='radio1' /></td>
  </tr>
  <tr>
    <td> <input type='text' value='example 2' name='text2' /></td>
    <td> <input type='radio' value='example 2' name='radio2' /></td>
  </tr>
  <tr>
    <td> <input type='text' value='example 3' name='text3' /></td>
    <td> <input type='radio' value='example 3' name='radio3' /></td>
  </tr>
</table>

如果单击单选按钮，我想发送单击的值

按钮

1 点击 -> 发送单选 1 值

点击 2 -> 发送无线电 2 值

点击 3 次 -> 感知无线电 3 值

所以问题

如何通过表单、单选按钮发送表格值？

【问题讨论】：

据您所知，是无效的 HTML。代码中甚至没有一个=。

标签： javascript html css forms input

【解决方案1】：

您可以使用 javascript 来做到这一点。只需为每个输入“监听”click 事件即可。

您可以使用ajax 将其发送到服务器。

[].forEach.call(document.querySelectorAll('input'), function(input) {
  input.addEventListener('click', function(elm) {
    console.log(input.value);
    // Send this value to the server with ajax or something
  });
});

<table>
  <tr>
    <td> <input type='text' value='example 1' name='text1' /></td>
    <td> <input type='radio' value='example 1' name='radio1' /></td>
  </tr>
  <tr>
    <td> <input type='text' value='example 2' name='text2' /></td>
    <td> <input type='radio' value='example 2' name='radio2' /></td>
  </tr>
  <tr>
    <td> <input type='text' value='example 3' name='text3' /></td>
    <td> <input type='radio' value='example 3' name='radio3' /></td>
  </tr>
</table>

【讨论】：

另外，我认为所有单选按钮都需要具有相同的名称。
@user2181397 你说得对，所有收音机都在同一个组中，我不确定。我只是按照他的代码。

【解决方案2】：

您可以借助类似这样的代码发送数据。您可以在 sendValue 函数中编写使用 XMLHttpRequest 发送数据的代码。

var sendValue = function()
{
  alert(this.value);  
}

var inputTags = document.getElementsByTagName('input');
   
for (var i=0;i<inputTags.length;i++){
     if(inputTags[i].type == "radio")
     {
     inputTags[i].addEventListener("click", sendValue);
     }
}

<table>
  <tr>
    <td> <input type='text' value='example 1' name='text1' /></td>
    <td> <input type='radio' value='example 1' name='radio1' /></td>
  </tr>
  <tr>
    <td> <input type='text' value='example 2' name='text2' /></td>
    <td> <input type='radio' value='example 2' name='radio2' /></td>
  </tr>
  <tr>
    <td> <input type='text' value='example 3' name='text3' /></td>
    <td> <input type='radio' value='example 3' name='radio3' /></td>
  </tr>
</table>

【讨论】：