後提交使用單選按鈕不同的動作

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> 

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> 

項目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方法中。

我不想爲每個項目有大量代碼< form>標籤。有沒有使用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>