How can I check a radio button before submitting the form with a button?

Question

I have a form with a table and each row of that table is a different offer. So, I also have some buttons in each row to download the documentation of the offer or delete the offer. That buttons submit the form and they go to another php file that does the desired action.

My problem is that the radio button of the desired row has to be checked before I submit the form. Is there any way with javascript that when you click one of those two button, first it selects automatically the radio button of that row and then submits the form?

<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

You can target the closest tr to find the specific radio button. Then set the checked attribute using setAttribute() .

You can try the following way:

 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

You need to make some small changes in you form like below:

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

Now here is the javascript code to check some validation:

<script>
    function btnAction(btn) {
        var row = btn.dataset.row;
        var radio = document.getElementById("selectedOffer-"+row);
        radio.checked = true;
        document.getElementById("filter-form").submit();
    }
</script>

Hope this will work for you solution

Answer 3

Finally I solved adding a hidden input and deleting the radio buttons. I have also change the structure of the forms. Now, this is my code that works:

<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

add on click event to the button

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

Jquery Code

Add Jquery library to the page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Use below 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();
     }
  }               
}