ワンクリックで2つのボタンをトリガーする方法は？

Question

ユーザーがアップロードするイメージ名の値を持つ非表示のボタンを作成しました。したがって、たとえば、ユーザーがボタンの値にする必要がある「1.jpg」という名前の画像をアップロードした場合。

私は、別のボタンの値が "LIKE"で、ユーザーがその上に置いたときに画像に表示されます。ユーザーがLIKEボタンをクリックすると、非表示のボタンをトリガーしたいと思っていました。ここで

は隠しボタンのコードです：

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

はここでLIKEボタンのコードです：

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

は、どのように私は隠しボタンがトリガされていません知っているのですか？それが引き起こした場合、ページ全体がリフレッシュされる必要があります：

<input type="submit" /> 

すべてこのコードはPHPタグの下にあります。

Answer 1

あなたは次のようにjQueryを使って、それを試みることができる：

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

ただ、文書内のスクリプトをエコー、またはPHPタグを閉じて後、それを再度開きます。