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

Question

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

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

item1

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

item2

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

item3...

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

但这只允许发送到一个操作 url 使用：

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

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

Post submit using radio buttons with different action

forms

jquery

submit

radio