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

How to send table value with form, radio button?

本文关键字：单选按钮 何使用 表单      更新时间：2023-09-26

示例

表中的 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 值

所以问题

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

你可以

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

您可以在代码的帮助下发送数据，如下所示。 您可以在 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>

相关文章：