CODEWITHSUNDEEP
javascripthtmlonclick
Laurie
Laurie

Reputation: 1229

Activating td button using JavaScript

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>

Upvotes: 0

Views: 413

Answers (1)

fdomn-m
fdomn-m

Reputation: 28611

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

Upvotes: 1

Related Questions