Post submit using radio buttons with different action

Question

I want to send info using POST (not GET)

I have a list of 50 items, every item have two icons (radio buttons):

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 button must send the info to video.php, and if user press MP3 radio button will be mp3.php, and the info needs to be in POST method.

I dont want to have a code plenty of < form > tags for every item. Is there a solution using jquery? or something? Thanks for your help guys.

Actually I use this:

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

but this only allow to send to one action url using:

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

results showing icons

Answer 1

You can put onclick event on every radio button like this , It will change action for form and will submit according to button clicked.

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

There is no need of loading jquery library for doing this task. but if u still want to do it with jquery , you can try this :

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