在提交帶有按鈕的表單之前，如何檢查單選按鈕？

Question

我有一個帶有表格的表格，該表格的每一行都是不同的報價。 因此，我在每一行中也有一些按鈕，用於下載報價的文檔或刪除報價。 該按鈕將表單和它們 go 提交到另一個執行所需操作的 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>

Answer 1

您可以定位最近的 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>

Answer 2

您需要對表單進行一些小的更改，如下所示：

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

希望這對您有用

Answer 3

最后我解決了添加隱藏輸入和刪除單選按鈕的問題。 我還更改了 forms 的結構。現在，這是我的代碼：

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

Answer 4

給按鈕添加點擊事件

<td>
    <button type="button" class="delete" name="action" value="Delete" onclick="someAction(this);">
        <i class="far fa-trash-alt"></i>
    </button>
</td>

Jquery 代碼

頁面添加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();
     }
  }               
}