在提交带有按钮的表单之前，如何检查单选按钮？

Question

我有一个带有表格的表格，该表格的每一行都是不同的报价。因此，我每行中也有一些按钮，用于下载报价文档或删除报价。该按钮提交表单，然后转到执行所需操作的另一个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

最后，我解决了添加隐藏输入和删除单选按钮的问题。我还更改了表单的结构。现在，这是我的工作代码：

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

您需要在表单中进行一些小的更改，如下所示：

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

将单击事件添加到按钮

<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();

     }

  }               

}