使用具有不同操作的单选按钮提交提交

Question

我想使用 POST（不是 GET）发送信息

我有一个包含 50 个项目的列表，每个项目都有两个图标（单选按钮）：

项目1

<label style='cursor: pointer;'>
<input type='radio' name='video' id='video' value='123ASD'/>
<img src='mp4-icon.png' width='20' align=middle style='border:0;'/>VIDEO
</label>
<label style='cursor: pointer;'>
<input type='radio' name='mp3' id='mp3' value='XYZ890'/>
<img src='mp3-icon.png' width='20' align=middle style='border:0;'/>MP3
</label>

项目2

<label style='cursor: pointer;'>
<input type='radio' name='video' id='video' value='456FGH'/>
<img src='mp4-icon.png' width='20' align=middle style='border:0;'/>VIDEO
</label>
<label style='cursor: pointer;'>
<input type='radio' name='mp3' id='mp3' value='ERT234'/>
<img src='mp3-icon.png' width='20' align=middle style='border:0;'/>MP3
</label>

项目3...

<label style='cursor: pointer;'>
<input type='radio' name='video' id='video' value='789BNM'/>
<img src='mp4-icon.png' width='20' align=middle style='border:0;'/>VIDEO
</label>
<label style='cursor: pointer;'>
<input type='radio' name='mp3' id='mp3' value='JKL456'/>
<img src='mp3-icon.png' width='20' align=middle style='border:0;'/>MP3
</label>

视频按钮必须将信息发送到video.php，如果用户按下MP3单选按钮将是mp3.php，并且信息需要在POST方法中。

我不希望每个项目都有大量

标签的代码。有没有使用jquery的解决方案？或者其他的东西？谢谢你们的帮助。

其实我是这样用的：

<script>
$('input[type=radio]').on('change', function() {
    $(this).closest("form").submit();
});
</script>

但这仅允许使用以下方式发送到一个操作网址：

<form method="post" action="video.php">

results showing icons

Answer 1

您可以像这样在每个单选按钮上放置 onclick 事件，它将更改表单的操作并根据单击的按钮提交。

function change_action(name){
  var form = document.getElementById("form")
  alert(name);
  if(name =='video'){
        form.action = 'video.php';                
    }
  else{
        form.action = 'mp3.php';
    }
    form.submit();
  alert(form.action);
  
  }

<label style='cursor: pointer;'>
<input type='radio' onclick="change_action(this.name)" name='video' id='video' value='123ASD'/>
<img src='mp4-icon.png' width='20' align=middle style='border:0;'/>VIDEO
</label>
<label style='cursor: pointer;'>
<input type='radio' name='mp3'onclick="change_action(this.name)" id='mp3' value='XYZ890'/>
<img src='mp3-icon.png' width='20' align=middle style='border:0;'/>MP3
</label>


<form method="post" id="form" action="video.php">

执行此任务无需加载 jquery 库。 但如果你仍然想用 jquery 来做，你可以试试这个：

<script>
$('input[type=radio]').on('change', function() {
  if(this.name == 'video'){
     $('#form').attr('action','video.php');
  }
  else{
     $('#form').attr('action','mp3.php');
  }

     $('#form').submit();
 });
</script>