jQuery php variable problems

Question

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>

@cmorrisey yes, I want to delete items with AJAX but at the moment I only need to catch the correct variable in each case. — pesk1
– pesk1, Commented Feb 17, 2014 at 22:31

Barmar · Accepted Answer · 2014-02-17 21:55:26Z

2

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.

answered Feb 17, 2014 at 21:55

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martin Strouhal · Accepted Answer · 2014-02-17 21:56:57Z

0

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'));
       });
    });

answered Feb 17, 2014 at 21:56

Martin Strouhal

1,2341 gold badge13 silver badges23 bronze badges

Comments

jeroen · Accepted Answer · 2014-02-17 21:56:58Z

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)

a2345sooted · Accepted Answer · 2014-02-17 22:06:56Z

0

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

answered Feb 17, 2014 at 22:06

a2345sooted

5995 silver badges21 bronze badges

Collectives™ on Stack Overflow

jQuery php variable problems

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related