Question

    <form action="" method="POST">
        <input type="checkbox" value="add" id="checkbox_m">
        <input type="text" value="" id="m">
        <input type="checkbox" value="add" id="checkbox_n">
        <input type="text" value="" id="n">
        <button type="submit" id="button">Send</button>
    </form>

我只想发布输入被选中的输入框。例如，如果我单击提交时选中带有id="checkbox_m"的复选框，则仅发送带有id="m"的输入。

Answer 1

您可以按复选框值切换输入。禁用的输入将不会发送。

document.querySelectorAll('input[type="checkbox"]').forEach(function(checkbox){

  checkbox.addEventListener('change', function(){
    document.querySelector('input[type="text"][name='+checkbox.id+']').disabled = checkbox.checked;
  });

});

<form action="" method="POST">
        
  <input type="checkbox" id="m">
  <input type="text" name="m">

  <input type="checkbox" id="n">
  <input type="text" name="n">

  <button type="submit" id="button">Send</button>

</form>

它使用复选框id作为输入name来找到它。

Answer 2

您可以使用此解决方案发送所需的每个数据：

$("#request").on("submit", function(e){

    // here check if checkbox_m is checked push input m value to data
    // here check if checkbox_n is checked push input n value to data

        $.ajax({
          url: '',
          type: 'post',
          data: data,
          dataType: 'json',
          success: function(data) {
              console.log(data)
          }
        });
});

将form更改为此：

<form action="" id="request">

因此，您可以在发送请求之前确定要发送的数据。不要忘记将jQuery添加到您的应用程序。

使用复选框提交特定输入

2 个答案: