I have a page that when a link is clicked it opens a pop up box to insert new charges. When this pop up box opens I use jquery load() function to insert a table with all the current charges (loaded from mysql) from a script on another page called load_charges.php.

The problem I am having is I can not access any of the hidden values from the content I just loaded I use:

var charge_id = $(':hidden:first', $(this)).val();  

this normally gets me the value of the first hidden element but it does not work if I am trying get the info from the page load from load_charges.php. I will list my code below:

case_cpanel.php:

//HTML Table with Form elememt

<table>
    <tr class="lead_hover">
        <td>
            <form class="calc" title="Case Expense Calculator" style="cursor:pointer;">
                <input type="hidden" id="lead_id" value="21946295" />
                <input type="hidden" id="final_id" value="74" />
                <input name="order" type="hidden" id="final_id" value="3" />
            </form>
        </td>
    </tr>
    <tr class="lead_hover">
        <td>
            <form class="calc" title="Case Expense Calculator" style="cursor:pointer;">
                <input type="hidden" id="lead_id" value="21978679" />
                <input type="hidden" id="final_id" value="79" />
                <input name="order" type="hidden" id="final_id" value="1" />
            </form>
        </td>
    </tr>
</table>

// Jquery to load popup form box

$(".calc").click(function () {
    var value = $(':hidden:eq(0)', $(this)).val();
    $('input[name=lead_id]').val(value);
    var value = $(':hidden:eq(1)', $(this)).val();
    $('input[name=final_id]').val(value);
    var value = $(':hidden:eq(2)', $(this)).val();
    $('.order').val(value);
    var lead_id = $(':hidden:eq(0)', $(this)).val();
    var string1 = "token=<? echo $_SESSION['token'];  ?>&lead_id=";
    var url = "../ajax/load_charges.php";
    var datastring = string1.concat(lead_id);
    $('#calc_right_display').html('<div><img src="../imgs/loading4.gif" align="center" /></div>').load(url, datastring).show();
    $("#calc_div").overlay().load();
});

load_charges.php: // table that is load with new form elements

<table width="266" border="0" cellpadding="5">
    <? do { ?>
    <tr>
        <td width="163">
            <? echo $row_charges[ 'rows'][ 'title']; ?>
        </td>
        <td width="83">$
            <? echo $row_charges[ 'rows'][ 'charge']; ?>
        </td>
        <td width="27">
            <form class="delete_charge" title="Delete Charge" style="cursor:pointer;">
                <input type="hidden" id="id1" value "<? echo $row_charges['rows']['id']; ?>">
            </form>
        </td>
    </tr>
    <? } while ($row_charges[ 'rows']=m ysql_fetch_assoc($row_charges[ 'query'])); ?>
</table>

//Jquery Code on load_charges.php

<script>
$(".delete_charge").click(function () { * *
    var charge_id = $(':hidden:first', $(this)).val(); * *
    var str2 = "token=<? echo $_REQUEST['token'];  ?>&delete_charge=true&id=";
    var str_lead_id = "&lead_id=<? echo $_REQUEST['lead_id'];  ?>";
    var url2 = "../ajax/cm_expenses_delete.php";
    var datastring2 = str2.concat(charge_id, str_lead_id);

    $('#calc_right_display').html('<div><img src="../imgs/loading4.gif" align="center" /></div>').load(url2, datastring2).show();
});
</script>

The problem is var charge_id = $(':hidden:first', $(this)).val(); is not returning any value from the new page that just loaded. Any Help would be greatly appreciated.

Thank you in advance. Ryan

I have a page that when a link is clicked it opens a pop up box to insert new charges. When this pop up box opens I use jquery load() function to insert a table with all the current charges (loaded from mysql) from a script on another page called load_charges.php.

The problem I am having is I can not access any of the hidden values from the content I just loaded I use:

var charge_id = $(':hidden:first', $(this)).val();  

this normally gets me the value of the first hidden element but it does not work if I am trying get the info from the page load from load_charges.php. I will list my code below:

case_cpanel.php:

//HTML Table with Form elememt

<table>
    <tr class="lead_hover">
        <td>
            <form class="calc" title="Case Expense Calculator" style="cursor:pointer;">
                <input type="hidden" id="lead_id" value="21946295" />
                <input type="hidden" id="final_id" value="74" />
                <input name="order" type="hidden" id="final_id" value="3" />
            </form>
        </td>
    </tr>
    <tr class="lead_hover">
        <td>
            <form class="calc" title="Case Expense Calculator" style="cursor:pointer;">
                <input type="hidden" id="lead_id" value="21978679" />
                <input type="hidden" id="final_id" value="79" />
                <input name="order" type="hidden" id="final_id" value="1" />
            </form>
        </td>
    </tr>
</table>

// Jquery to load popup form box

$(".calc").click(function () {
    var value = $(':hidden:eq(0)', $(this)).val();
    $('input[name=lead_id]').val(value);
    var value = $(':hidden:eq(1)', $(this)).val();
    $('input[name=final_id]').val(value);
    var value = $(':hidden:eq(2)', $(this)).val();
    $('.order').val(value);
    var lead_id = $(':hidden:eq(0)', $(this)).val();
    var string1 = "token=<? echo $_SESSION['token'];  ?>&lead_id=";
    var url = "../ajax/load_charges.php";
    var datastring = string1.concat(lead_id);
    $('#calc_right_display').html('<div><img src="../imgs/loading4.gif" align="center" /></div>').load(url, datastring).show();
    $("#calc_div").overlay().load();
});

load_charges.php: // table that is load with new form elements

<table width="266" border="0" cellpadding="5">
    <? do { ?>
    <tr>
        <td width="163">
            <? echo $row_charges[ 'rows'][ 'title']; ?>
        </td>
        <td width="83">$
            <? echo $row_charges[ 'rows'][ 'charge']; ?>
        </td>
        <td width="27">
            <form class="delete_charge" title="Delete Charge" style="cursor:pointer;">
                <input type="hidden" id="id1" value "<? echo $row_charges['rows']['id']; ?>">
            </form>
        </td>
    </tr>
    <? } while ($row_charges[ 'rows']=m ysql_fetch_assoc($row_charges[ 'query'])); ?>
</table>

//Jquery Code on load_charges.php

<script>
$(".delete_charge").click(function () { * *
    var charge_id = $(':hidden:first', $(this)).val(); * *
    var str2 = "token=<? echo $_REQUEST['token'];  ?>&delete_charge=true&id=";
    var str_lead_id = "&lead_id=<? echo $_REQUEST['lead_id'];  ?>";
    var url2 = "../ajax/cm_expenses_delete.php";
    var datastring2 = str2.concat(charge_id, str_lead_id);

    $('#calc_right_display').html('<div><img src="../imgs/loading4.gif" align="center" /></div>').load(url2, datastring2).show();
});
</script>

The problem is var charge_id = $(':hidden:first', $(this)).val(); is not returning any value from the new page that just loaded. Any Help would be greatly appreciated.

Thank you in advance. Ryan

• javascript
• php
• jquery
• html
• ajax

• are you really binding click to form element ?? <form class="delete_charge" – Bhadra Commented Dec 12, 2013 at 21:05
• $(':hidden').first().val() doesn't work? – 15ee8f99-57ff-4f92-890c-b56153 Commented Dec 12, 2013 at 21:11
• Also note that when you do do...while do is executed before your variable assignment in while. $row_charges['rows'] will be assigned only after the while loop has ran once. – user555 Commented Dec 12, 2013 at 21:40

2 Answers 2

You may be having a problem retrieving the value because you are missing an equal sign.

This:
<input type="hidden" id="id1" value"<? echo $row_charges['rows']['id']; ?>">

Change to:
<input type="hidden" id="id1" value="<? echo $row_charges['rows']['id']; ?>">

This would explain it because your input has no value.

I made the following test, based on your data:

$(document).ready(function(){

var charge_id = $('input:hidden:first').val(); 
alert(charge_id);

var charge_id = $('input[type=hidden]:first').val(); 
alert(charge_id);


});

Working fiddle here: http://jsfiddle/robertrozas/c4AHM/1/