CODEWITHSUNDEEP
phpjavascripthtml
Zaz
Zaz

Reputation: 1102

Get value from table when clicking on a button

I have a table there is showing some values. In each row there is a Order_ID and a button.

How can i get my value in $Order_ID to show (alert) when clicking on a button? 

<tbody>

<?php

foreach($menuextra_result as $transaction)
{
?>
<tr>



$order_id = isset($transaction['order_id'])?($transaction['order_id']) :"";
?>
<?php if($order_id){ ?>
<td><div id="orderID"><?= $order_id ?></a></td>
<?php } else {?>
<td><div ><span style="color:red">MANGLER</span></td>
<?php }?> 



style="color:red">MISSING</span></td>

                        <?php }?>   

//There's more here, but did not bother to show it, because it was irrelevant. 

<td><input type="submit" onclick="getElementById" value="Yes  "></td>
<?php }
?>         

</tr>
<?php
}
?>

</tbody>

This is how i tried

<script type="text/javascript">
function getElementById()
{
    el = document.getElementById('order_id');
       alert(el);

}
</script>

But when clicking on a button, nothing happens

Upvotes: 0

Views: 4696

Answers (4)

Shadow Wizzard
Shadow Wizzard

Reputation: 66396

First of all, don't use id as you have more than one such element. You can use class instead:

<div class="orderID"><?= $order_id ?></div>

Also fixed invalid HTML you got, closing tag for <div> is </div> and not </a>.

Second, change the click to send the button to the function:

<input type="submit" onclick="FindOrder(this);" value="Yes  " />

And finally this function should do the trick: (by searching for "brother" div)

function FindOrder(oButton) {
    var oRow = oButton.parentNode;
    while (oRow && oRow.tagName.toLowerCase() !== "tr")
        oRow = oRow.parentNode;
    var arrDivs = oRow.getElementsByTagName("div");
    var orderDiv = null;
    for (var i = 0; i < arrDivs.length; i++) {
        if (arrDivs[i].className === "orderID") {
            orderDiv = arrDivs[i];
            break;
        }
    }
    if (orderDiv != null) {
        var orderNumber = orderDiv.innerHTML;
        alert("order is " + orderNumber);
    } else {
        alert("order not found");
    }
}

Live test case.

Upvotes: 1

brian_wang
brian_wang

Reputation: 421

You can't getElementById from you web page if it does not exist. So solution is simple, just add an hidden input element on your table. You can get the id from your script.

<tbody>

<?php

foreach($menuextra_result as $transaction)
{
?>
<tr>

<?php 
$order_id = isset($transaction['order_id'])?($transaction['order_id']) :"";
?>

//There's more here, but did not bother to show it, because it was irrelevant. 

<td>
    <input type="hidden" name="order_id" id="order_id" value="<?php echo $order_id;?>">
    <input type="submit" onclick="getElementById" value="Yes  "></td>
<?php }
?>         

</tr>
<?php
}
?>

</tbody>

Upvotes: 0

user2401931
user2401931

Reputation:

table.php

//assuming you have done you loop work
<table>
<tr>
<td>
<?php echo $row['name']?>
</td>
<td><input type="button" value="click me" onclick="clickMe(<?php echo $row['id']?>)" /></td>
</tr>
</table>

clickme unction is like this

function clickMe(id) {
alert(id);
}

You will pass one parameter to clickMe() function and the parameter is id

Upvotes: 1

Ric
Ric

Reputation: 3478

You'll need to print the $order_id to your HTML somewhere. You could use hidden input:

<input name="order_id" id="order_id" value="<?php echo $order_id; ?>">

Then you can submit form or grab the value.

Upvotes: 0

Related Questions