CODEWITHSUNDEEP
javascriptphpjquerybuttonjbutton
Matt Dathew
Matt Dathew

Reputation: 145

Jquery works for one button, but not for the other identical one?

I am making a php forum and am using identical buttons such that if one is clicked, it does a function. Anyway, for this question, I have an altered form of my php script with the same problem. This script is supposed to alert a message if a button is clicked. Both buttons have same names, but alerting only works for the first button not the second one. Why? How should I solve it?

buttons.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$('#oneButton').bind('click', alertButtonClick);
});

function alertButtonClick() 
{
    alert("There was a button clicked");                                                                      
}

</script>
</head>
<body>

<?php

    echo "<div class='comments'>";
    echo "<form id='theForm'>";
    echo "<button type='button' id='oneButton'>Post Comment</button></form></div>";

    echo "<div class='comments'>";
    echo "<form id='theForm'>";
    echo "<button type='button' id='oneButton'>Post Comment</button></form></div>";
?>

</body>
</html>

EDIT: When I fixed the button issue, I quickly faced another problem. I have been trying to solve it for a long time now. Anyway, I have posted two codes below. Each div features value, text area, and button. When I write text in the first div and click the 'post comment' button, it isplays that text and the value=1, which is what I want for both buttons. However if I do the same for the second button, it still outputs stuff for the first button, not for the second one, Why? Here are the codes, try them out and help me out.

button2.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript"         src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">

$("document").ready(function() 
{
    $('.oneButton').bind('click',sendInfoToServer);
});

function sendInfoToServer() 
{
    $('span.commentSent').load('button3.php',
    $('#theForm').serializeArray());
}

</script>
</head>
<body>

    <span class='commentSent'></span>

<?php

    echo "<div class='comments'>";
    echo "<form id='theForm'>";
    echo "<input type=hidden name='mess_block' value=1>";
    echo "<textarea name='comment' class='comment' cols=60 rows=2>Enter Comment…</textarea><br />"; 
    echo "<button type='button' class='oneButton'>Post Comment</button></form></div>"; //check the change

    echo "<div class='comments'>";
    echo "<form id='theForm'>";
    echo "<input type=hidden name='mess_block' value=2>";
    echo "<textarea name='comment' class='comment' cols=60 rows=2>Enter Comment…</textarea><br />"; 
    echo "<button type='button' class='oneButton'>Post Comment</button></form></div>"; // check the change
?>

</body>
</html>

button3.php

<?php

    $mb = $_POST["mess_block"];
    echo $mb . "<br/>";

    $mt = $_POST["comment"];
    echo $mt . "<br/>";

?>

Upvotes: 0

Views: 1054

Answers (2)

monkey
monkey

Reputation: 1279

try to replace $('#oneButton').bind('click', alertButtonClick); to $('button').bind('click', alertButtonClick);

Upvotes: 1

Scopey
Scopey

Reputation: 6319

You cannot share IDs on HTML elements. Try changing the ID on one button or using classes instead:

<script>
$(function() {
    $('.clickable-button').on('click', function() {
        alert('There was a button clicked');
    }
});
</script>
// ....
<button class="clickable-button">Button</button>
<button class="clickable-button">Button</button>
<button class="clickable-button">Button</button>

Upvotes: 2

Related Questions