Activating td button using JavaScript

Question

I have the following function, which is used to expand and collapse child tr rows from parent rows within a table, and also changes the text style of a tr to normal:

$( document ).ready(function() {
     $('.parent').on('click', function(){
          $(this).next('.child').toggle();
          $(this).css('font-weight', 'normal');

          <<< ADD COMMAND TO TOGGLE BUTTON HERE >>>
     });
 });

I also have the following hidden button within each tr, which I want to submit when a tr is clicked:

<button type="submit" name="read-button" formmethod="POST" value="{{ message.message_id }}" style="display: none;"></button>

Which command should I include alongside the JavaScript function, in order to achieve this? I believe it will be one of the following (provided by this answer), however I've only been using JS for a few days so I'm not sure how to include these in my code:

document.getElementById('read-button').submit();
changeAction('read-button','loginForm');
document.forms['read-button'].submit();

Sample html:

<form method=['POST']>
<table>
    <tr class="parent">
         <td>
             <button type="submit" name="read-button" formmethod="POST" value="{{ message.message_id }}" style="display: none;"></button>
             <a>Heres a cell</a>
         </td>
         <td>
             <a>
                Heres one more cell
             <a>
         </td>
    </tr>
    <tr class="child">
         <td>
             <a>
                Some hidden info
             </a>
         </td>
         <td>
             <a>
                More hidden info
             </a>
         </td>
    </tr>
<table>
</form>

Laurie I notice you have a submit, but no form. Have you considered using AJAX to send the data back using Javascript? If you are going to use a traditional form submit, you will need to be capturing data in inputs. — Bibberty
– Bibberty, Commented Dec 27, 2018 at 23:13
Hi Paul, I had the form element outside of my sample, please find it updated. I'm not sure AJAX would work as I'm using Python Flask for my backend. All I want is for when a user clicks a row, the ID of that row is sent to Flask so the SQL table in which the row belongs can be updated (without refreshing the page). — Laurie
– Laurie, Commented Dec 27, 2018 at 23:17
Ok, your form will natively handle the submit. But it will do a post back. i.e. a refresh of the page. The way to avoid that is AJAX, This could even be a blank POST to a url with param. e.g. /myurl/mypage?tblID=123 — Bibberty
– Bibberty, Commented Dec 27, 2018 at 23:21
Take a look here. api.jquery.com/jquery.post although you really dont need jQuery to do any of this. — Bibberty
– Bibberty, Commented Dec 27, 2018 at 23:33

fdomn-m · Accepted Answer · 2019-01-23 15:58:21Z

1

To answer the specific question of how to trigger a button within a td via clicking on the tr:

$('.parent').on('click', function() {
    $(this).find("button").click();

that can be improved by giving the button a class (incase you add additional buttons in future), eg:

<button class='readbutton' ..`

then

$('.parent').on('click', function() {
    $(this).find("button.readbutton").click();

In this scenario, it seems that you don't need a hidden button as you can call the functionality of the hidden button directly.

So rather than:

$("button").click(handleClick);

use

$('.parent').on('click', function() {
    .. other functionality ...
    handleClick();

as you're new to js, note the difference between handleClick and handleClick() - with () it calls the function, without it passes it as a function variable.

$("button").click(handleClick);

is the same as

$("button").click(function() { handleClick(); });

If you're trying to submit a form, then you would use $(form).submit() - but there's no form in the code as pointed out in the comments and an ajax call would seem more appropriate here than submitting a form.

Finally, consider using classes rather than setting the css directly as adding/removing classes it quite simple in jquery eg for your tr click event add:

$(this).addClass("selected").siblings().removeClass("selected");

answered Jan 23, 2019 at 15:58

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Laurie Over a year ago

Thanks for the help again mate, very appreciated.

Collectives™ on Stack Overflow

Activating td button using JavaScript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related