CODEWITHSUNDEEP
javascriptphpjquery
pesk1
pesk1

Reputation: 3

jQuery php variable problems

I'm trying to catch the correct variable in this jQuery function but whatever the button I click, the alert always shows the name of the first label that I have. Any ideas? Thank you.

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
    $(".submit").click(function() {
    var name = $("#name").val();
    alert(name);
    });
    });
</script>
</head>

<body>
<?php
include("connection.php"); 
$link=connect(); 
$result=mysql_query("select * from names",$link);

if (mysql_fetch_array($result) == 0)
{
    echo "No names registered. Add one";
}
else
{
    while($row=mysql_fetch_array($result))
    {
        echo "<html>
        <label>".$row["name"]."</label>
        <input type='button' class='submit' value='Delete'>
        <input type='hidden' id='name' value=".$row["name"].">
        <br>
        </html>";     
    }

    mysql_free_result($result);
    mysql_close($link);
}
?>  
</body>
</html>

Upvotes: 0

Views: 81

Answers (4)

a2345sooted
a2345sooted

Reputation: 599

In addition to some of the other answers, you don't really need the hidden input. Could just change the button input to:

<input type='button' class='submit' name='".$row["name"]."' value='Delete'>

Then change your JQuery selector to:

var name = $(this).attr('name');

Upvotes: 0

jeroen
jeroen

Reputation: 91734

You are re-using the same id - name - multiple times:

while($row=mysql_fetch_array($result))
{
    echo "<html>
    <label>".$row["name"]."</label>
    <input type='button' class='submit' value='Delete'>
    <input type='hidden' id='name' value=".$row["name"].">
    <br>
    </html>";     
}

You should wrap your fields in individual forms (not html elements) and use the name attribute:

while($row=mysql_fetch_array($result))
{
    echo "<form action='' method='post'>
    <label>".$row["name"]."</label>
    <input type='button' class='submit' value='Delete'>
    <input type='hidden' name='name' value=".$row["name"].">
    <br>
    </form>";     
}

This will make your form also work without javascript.

Then, in your javascript you can do:

$(".submit").click(function(e) {
  e.preventDefault();
  var name = $(this).closest('form').find('input[name="name"]').val();
  ...

Or if you need to post it using ajax afterwards:

var data = $(this).closest('form').serialize();

(or you catch the submit event of the form instead)

Upvotes: 0

Martin Strouhal
Martin Strouhal

Reputation: 1224

At first, html ID should be unique.

Try using html5 data attributes and remove your hidden form element:

while($row=mysql_fetch_array($result))
{
    echo "<input type='button' class='submit' value='Delete' data-value=".$row["name"].">";     
}

And JS part:

<script type="text/javascript">
    $( document ).ready(function() {
       $(".submit").click(function() {         
           alert($(this).data('value'));
       });
    });

Upvotes: 0

Barmar
Barmar

Reputation: 780787

Use DOM navigation to get the value from the adjacent input:

$( document ).ready(function() {
    $(".submit").click(function() {
        var name = $(this).next().val();
        alert(name);
    });
});

Also, there should just be one <html> block in the page. Don't put that in the loop.

Upvotes: 2

Related Questions