我有一個帶有表格的表格，該表格的每一行都是不同的報價。因此，我每行中也有一些按鈕，用于下載報價文檔或刪除報價。該按鈕提交表單，然后轉到執行所需操作的另一個php文件。我的問題是，在我提交表單之前，必須檢查所需行的單選按鈕。對于javascript，有沒有辦法當您單擊這兩個按鈕之一時，首先它會自動選擇該行的單選按鈕，然后提交表單？<form class="filterSelection" action="../php/editOffer/getInfo.php" method="POST"> <table class="accountsTable"> <thead> <tr> <th>Selected</th> <th>Project ID</th> <th>Revision</th> <th>Project Description</th> <th>Customer</th> <th>Date</th> <th>Creator</th> <th>Documentation</th> <th>Delete</th> </tr> </thead> <tbody> <tr> <td><input type="radio" name="selectedOffer" id="selectedOffer" required="" value="1-1"></td> <td>1</td> <td>1</td> <td>Test</td> <td>Info</td> <td>2020-02-10</td> <td>Name</td> <td> <button type="submit" class="download" name="action" value="Download"><i class="fa fa-download" aria-hidden="true"></i></button> </td> <td> <button type="submit" class="delete" name="action" value="Delete" onclick="return confirm('Do you want to delete the selected offer? This action can′t be undone')"> <i class="far fa-trash-alt"></i> </button> </td> </tr> </tbody> </table> <br> <button name="action" class="nextButton" type="submit" value="Next"><i class="fas fa-arrow-alt-circle-right fa-2x"></i></button></form>
4 回答
拉風的咖菲貓
TA貢獻1995條經驗 獲得超2個贊
您可以定位最近的 tr 以查找特定的單選按鈕。然后使用 設置選中的屬性。setAttribute()
您可以嘗試以下方法：
var buttons = document.querySelectorAll('button[type=submit');
buttons.forEach(function(btn){
btn.addEventListener('click', function(el, e){
this.closest('tr').querySelector('[type=radio]').setAttribute('checked', 'checked');
alert(this.closest('tr').querySelector('[type=radio]').getAttribute('checked'));
});
})
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<form class = "filterSelection" action = "../php/editOffer/getInfo.php" method = "POST">
<table class = "accountsTable">
<thead>
<tr>
<th>Selected</th>
<th>Project ID</th>
<th>Revision</th>
<th>Project Description</th>
<th>Customer</th>
<th>Date</th>
<th>Creator</th>
<th>Documentation</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="selectedOffer" id="selectedOffer" value="1-1">
</td>
<td>1</td>
<td>1</td>
<td>Test</td>
<td>Info</td>
<td>2020-02-10</td>
<td>Name</td>
<td><button type="submit" class="download" name="action" value="Download"><i class="fa fa-download" aria-hidden="true"></i></button>
</td>
<td><button type="submit" class="delete" name="action" value="Delete" onclick="return confirm('Do you want to delete the selected offer? This action can′t be undone')"><i class="fa fa-trash"></i></button></td>
</tr>
<tr>
<td><input type="radio" name="selectedOffer" id="selectedOffer" value="1-1">
</td>
<td>1</td>
<td>1</td>
<td>Test</td>
<td>Info</td>
<td>2020-02-10</td>
<td>Name</td>
<td><button type="submit" class="download" name="action" value="Download"><i class="fa fa-download" aria-hidden="true"></i></button>
</td>
<td><button type="submit" class="delete" name="action" value="Delete" onclick="return confirm('Do you want to delete the selected offer? This action can′t be undone')"><i class="fa fa-trash"></i></button></td>
</tr>
</tbody>
</table><br>
<button name="action" class="nextButton" type="submit" value="Next"><i class="fa fa-arrow-alt-circle-right fa-2x"></i> </button>
</form>
慕俠2389804
TA貢獻1719條經驗 獲得超6個贊
最后，我解決了添加隱藏輸入和刪除單選按鈕的問題。我還更改了表單的結構?，F在，這是我的工作代碼：
<table class = "accountsTable">
<thead>
<tr>
<th>Project ID</th>
<th>Revision</th>
<th>Project Description</th>
<th>Customer</th>
<th>Date</th>
<th>Creator</th>
<th>Download</th>
<th>Delete</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<form class="filterSelection" action="../php/editOffer/getInfo.php" method="POST">
<td>1</td>
<td>1</td>
<td>Test</td>
<td>Info</td>
<td>2020-02-10</td>
<td>Name</td>
<td><button type="submit" class="download" name="action" value="Download"><i class="fa fa-download" aria-hidden="true"></i></button>
</td>
<td><button type="submit" class="delete" name="action" value="Delete"
onclick="return confirm('Do you want to delete the selected offer? This action can′t be undone')">
<i class="far fa-trash-alt"></i></button></td>
<td><button name="action" class="edit" type="submit" value="Next"><i class="fas fa-edit"></i></button></td>
<input type="hidden" name="selectedOffer" value="1-1"/>
</form>
</tr>
<tr>
<form class="filterSelection" action="../php/editOffer/getInfo.php" method="POST">
<td>1</td>
<td>2</td>
<td>Demo</td>
<td>Info1</td>
<td>2020-02-13</td>
<td>Name1</td>
<td></td>
<td><button type="submit" class="delete" name="action" value="Delete"
onclick="return confirm('Do you want to delete the selected offer? This action can′t be undone')">
<i class="far fa-trash-alt"></i></button></td>
<td><button name="action" class="edit" type="submit" value="Next"><i class="fas fa-edit"></i></button></td>
<input type="hidden" name="selectedOffer" value="1-2"/>
</form>
</tr>
心有法竹
TA貢獻1866條經驗 獲得超5個贊
您需要在表單中進行一些小的更改，如下所示：
<form class="filterSelection" id="filter-form" action="../php/editOffer/getInfo.php" method="POST">
<table class="accountsTable">
<thead>
<tr>
<th>Selected</th>
<th>Project ID</th>
<th>Revision</th>
<th>Project Description</th>
<th>Customer</th>
<th>Date</th>
<th>Creator</th>
<th>Documentation</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="selectedOffer" id="selectedOffer-1" value="1-1"></td>
<td>1</td>
<td>1</td>
<td>Test</td>
<td>Info</td>
<td>2020-02-10</td>
<td>Name</td>
<td><button type="button" name="action" data-row="1" onclick="btnAction(this)" value="Download"><i
class="fa fa-download" data-row="1" aria-hidden="true"></i> Download</button>
</td>
<td><button type="button" name="action" onclick="btnAction(this)" value="Delete">
<i class="far fa-trash-alt"></i> Delete</button></td>
</tr>
</tbody>
</table><br>
<button name="submit" class="nextButton" type="button" value="Next"><i
class="fas fa-arrow-alt-circle-right fa-2x"></i> Next</button>
</form>
現在這里是javascript代碼來檢查一些驗證：
<script>
function btnAction(btn) {
var row = btn.dataset.row;
var radio = document.getElementById("selectedOffer-"+row);
radio.checked = true;
document.getElementById("filter-form").submit();
}
</script>
希望這將為您工作的解決方案
有只小跳蛙
TA貢獻1824條經驗 獲得超8個贊
將單擊事件添加到按鈕
<td>
<button type="button" class="delete" name="action" value="Delete" onclick="someAction(this);">
<i class="far fa-trash-alt"></i>
</button>
</td>
杰奎里代碼
將 Jquery 庫添加到頁面
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
使用以下腳本
function someAction(ds) {
if(!$(ds).closest('tr').find('input[type="radio"]').is(':checked')){
$(ds).closest('tr').find('input[type="radio"]').prop('checked',true);
if(confirm('Do you want to delete the selected offer? This action can′t be undone')){
$(ds).parents('form').submit();
}
}
}
- 4 回答
- 0 關注
- 140 瀏覽
添加回答
舉報
0/150
提交
取消