How to trigger 2 buttons on one click?

Question

I made a hidden button having the value of image name the user will be uploading. So, for example, if a user uploaded an image named as "1.jpg" that should be the value of the button.

I have another button having a value="LIKE" which is shown on the image when a user hovers over it. I wanted to trigger the hidden button when the user click on the LIKE button.

Here's the code for the hidden button:

echo "<td><form method='post'><input id='hiddenButton' type='submit' 
name='hiddenButton' value='$row[1]' /></form></td>";

Here's the code for the LIKE button:

echo "<div class='middle'><div class='likeButton'><form method='post'><input 
class='likeButtonStyle' type='button' value='LIKE' name='like' 
onclick='document.getElementById('hiddenButton').click()' /></form></div>
</div>";

How do I know the hidden button is not triggering? Because if it triggers the whole page should be refreshed because of the:

<input type="submit" />

BTW all this code comes under the PHP tags.

Why not just have a `form` with a hidden input in it identifying the image and make the like button the submit? — Alon Alexander, Apr 21 '17 at 15:51
Set an id for the form instead and use submit. A better approach to submit form data. http://stackoverflow.com/questions/9855656/how-to-submit-a-form-using-javascript — user2180833, Apr 21 '17 at 16:00

score 0 · Answer 1 · answered Apr 21 '17 at 15:59

You could try it with jQuery as follow:

$(document).ready(function() {
    $('[name=like]').on('click', function() {
      $('[name=hiddenButton]').click();
    });

    // Test. Displays Hello World when hiddenButton is clicked
    $('[name=hiddenButton]').on('click', function() {
      $('#message').text('Hello World!');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='middle'>
  <div class='likeButton'>
    <form method='post'>
      <input class='likeButtonStyle' type='button' value='LIKE' name='like'/>
    </form>
  </div>
</div>

<form method='post'>
  <!-- Removed the type='submit' so the page is not reloaded when the hiddenButton is clicked (for test) -->
  <input id='hiddenButton' type='button' name='hiddenButton' value='xyz' hidden/>
</form>
<div id="message"></div>

Just echo the script in the document, or close the php tag and reopen it after.

I don't really want to try jQuery at this moment, but thank you for taking the time to help me out. I really appreciate that :) — wished, Apr 21 '17 at 17:22

How to trigger 2 buttons on one click?

1 Answers1