We Keep Coding

Page reloading even after preventDefault

Hi Here Below Is My jS code. The problem is that it works fine when we load .recent-orders div for changing pages but when i click on the details text it reloads the page and dont show preloader instead it loads and move towards next page. I want it not to reload and move towards next page showing preloader for 1 sec.
Desire page to come but shouldnot reload page
JS:
$(document).ready(function () {
let sideMenu = document.querySelector("aside");
let menuBtn = document.querySelector("#menu-btn");
let closeBtn = document.querySelector("#close-btn");
let themeToggler = document.querySelector(".theme-toggler");
let detailCustomerEach = document.querySelectorAll(".detail_c_each");
let sidebar_a = document.querySelectorAll(".sidebar_a");
let alerts = document.querySelectorAll(".alert");
$(menuBtn).click(function () {
sideMenu.style.display = "block";
$(sideMenu).removeClass("animate__animated animate__slideOutLeft");
$(sideMenu).addClass("animate__animated animate__slideInLeft");
});
$(sidebar_a).click(function (e) {
// load another page without reloading
if ($(sidebar_a).hasClass("active")) {
$(sidebar_a).removeClass("active");
}
e.preventDefault();
$(this).addClass("active");
setTimeout(() => {
let url = $(this).attr("href");
// show page content and change the url
$(".recent-orders").load(url + " .recent-orders", function () {
window.history.pushState(null, null, url);
});
}, 1000);
$(".recent-orders").load("./inc/preloader.html");
});
$(detailCustomerEach).click(function (e) {
// load section detail customer without reloading
e.preventDefault();
let url1 = $(this).attr("href");
setTimeout(() => {
$(".recent-orders").load(url1 + " .recent-orders", function () {
window.history.pushState(null, null, url1);
});
}, 5000);
});
// hide alert after 2 seconds
$(alerts).each(function () {
setTimeout(
function () {
$(this).fadeOut("slow");
}.bind(this),
2000
);
});
$(closeBtn).click(function () {
// sideMenu.style.display = "none";
$(sideMenu).removeClass("animate__animated animate__slideInLeft");
$(sideMenu).addClass("animate__animated animate__slideOutLeft");
});
$(".add-product").click(function () {
window.open("./index", "_self");
});
// change theme
$(themeToggler).click(function () {
document.body.classList.toggle("dark-theme-variables");
themeToggler.querySelector("span:nth-child(1)").classList.toggle("active");
themeToggler.querySelector("span:nth-child(2)").classList.toggle("active");
});
});
HTML Main
<div class="recent-orders">
<h2>Customers</h2>
<table id="recent-orders-table">
<thead>
<tr>
<th>Customer Id</th>
<th>Customer Name</th>
<th>City</th>
<th>Contact</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>UZAIR</td>
<td>Lahore</td>
<td class="success">03233337187</td>
<!-- Classes available for status text color warning,success,danger,primary -->
<td class="primary"> <a class="detail_c_each" href="./index?detail_customer=30"> Details </a> </td>
</tr>
<tr>
<td>2</td>
<td>UZAIR</td>
<td>Lahore</td>
<td class="success">03233337187</td>
<!-- Classes available for status text color warning,success,danger,primary -->
<td class="primary"> <a class="detail_c_each" href="./index?detail_customer=31"> Details </a> </td>
</tr>
<tr>
<td>3</td>
<td>UZAIR</td>
<td>Lahore</td>
<td class="success">03233337187</td>
<!-- Classes available for status text color warning,success,danger,primary -->
<td class="primary"> <a class="detail_c_each" href="./index?detail_customer=32"> Details </a> </td>
</tr>
</tbody>
</table>
Show All
</div>
Html to move
<?php
$server = "localhost";
$username = "root";
$pass = "";
$dbname = "stinkspolitics_pl";
$conn = mysqli_connect($server, $username, $pass, $dbname);
if (isset($_GET['detail_customer'])) {
$quest_id = $_GET['detail_customer'];
$get_quest = "SELECT * FROM questions WHERE quest_id = '$quest_id'";
$getting_quest = mysqli_query($conn, $get_quest);
while ($row = mysqli_fetch_assoc($getting_quest)) {
$quest_title = $row['quest_title'];
$category_id = $row['category_id'];
}
}
?>
<div class="recent-orders cust_det ">
<h2> Customer Detail</h2>
<div class="customer_detail">
<form id="form" method="POST" action="" class="c_form animate__animated animate__fadeIn">
<?php
if (isset($_GET['success'])) {
echo "<div class='alert alert-success'>
<strong>Success!</strong> Your question has been submitted.
</div>";
}
if (isset($_GET['error'])) {
echo "<div class='alert alert-danger'>
<strong>Sorry!</strong> Your question has not been submitted.
</div>";
}
?>
<div class="row">
<div class="c_detail">
<label for="" class="form-labels">Name</label>
<input type="text" name="cat_id" value="<?php echo $category_id ?>" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">Contact</label>
<input type="text" name="quest_t" value="<?php echo $quest_title ?>" id="quest_t">
</div>
<div class="c_detail">
<label for="" class="form-labels">City</label>
<input type="text" name="" id="">
</div>
</div>
<div class="row">
<div class="c_detail">
<label for="" class="form-labels">Name</label>
<input type="text" name="" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">Contact</label>
<input type="text" name="" id="">
</div>
<div class="c_detail">
<label for="" class="form-labels">City</label>
<input type="text" name="" id="">
</div>
</div>
<div class="row">
<button id="submit-btn" class="btn-primary" type="submit" name="submit">Submit</button>
</div>
</form>
</div>
</div>
<?php
if (isset($_POST['submit'])) {
$quest_t = $_POST['quest_t'];
$update = "UPDATE questions SET quest_title = '$quest_t' WHERE quest_id = '$quest_id'";
$run_update = mysqli_query($conn, $update);
if ($run_update) {
echo "<script>window.open('index?detail_customer=$quest_id&success', '_self')</script>";
}
}
?>

when you define URL to href it will being always redirect to that page
<a class="detail_c_each" href="./index?detail_customer=31"> Details </a>
alternate solution
HTML code
<a class="detail_c_each" herf="javascript:void(0)" data-href="./index?detail_customer=31"> Details </a>
JS code
$(detailCustomerEach).click(function (e) {
// load section detail customer without reloading
e.preventDefault();
let url1 = $(this).attr("data-href");
setTimeout(() => {
$(".recent-orders").load(url1 + " .recent-orders", function () {
window.history.pushState(null, null, url1);
});
}, 5000);
});
I hope this solution will work for you

AJAX filter php MySQL results using checkboxes or radio button on same page

I have one search box on home page. when user enter the some value on home.php then that page goes to select.php. On select page i have filters with checkboxes, radio button & price range filter.
I have tried some jquery on click of radio button but its value are coming and sql query giving error. I want to filter out my result according to selection of radio button, checkboxes & price range. so please suggset any to me.
i have tried following code for this,
$("#localityid2").click(function () {
var search_keyword = $("#localityid2").val();
$.ajax({
type: "POST",
url: "select.php",
data: search_keyword ,
success: function () {
window.location.href = "select.php?locality="+search_keyword;
}
});
return false;
});
<table class="sbox">
<tr>
<td>
<div class="radiobtn">
<input type="radio" name="location" class="locality" id="localityid1" value="Aundh" style="float: none;">
</div>
<div class="text">Aundh</div>
</td>
</tr>
<tr>
<td>
<div class="radiobtn">
<input type="radio" name="location" class="locality" id="localityid2" value="Baner" style="float: none;"> </div>
<div class="text">Baner</div>
</td>
</tr>
<tr>
<td>
<div class="radiobtn">
<input type="radio" name="location" class="locality" id="localityid3" value="Ravet" style="float: none;">
</div>
<div class="text">Ravet </div>
</td>
</tr>
<tr>
<td>
<div class="radiobtn">
<input type="radio" name="location" class="locality" id="localityid4" value="Wakad" style="float: none;">
</div>
<div class="text">Wakad</div>
</td>
</tr>
</table>
<h3 style="margin-top: 19px;">Price Range</h3>
<div class="slide-result">
<div id="price-range"></div>
<div class="slide-result">
<input disabled class="amount1" type="text" id="pr1" value="1000" />
<input disabled class="amount2" type="text" id="pr2" value="600000" />
</div>
<div class="clear"></div>
</div>
<h3>AC/Non AC</h3>
<table class="sbox">
<tr>
<td>
<div class="radiobtn">
<input type="checkbox" name="actype[]" class="checkboxclass" value="&actype=1" style="float: none;" />
</div>
<div class="text">AC</div>
</td>
</tr>
<tr>
<td>
<div class="radiobtn">
<input type="checkbox" value="&actype=0" name="actype[]" class="checkboxclass" style="float: none;" />
</div>
<div class="text">Non Ac</div>
</td>
</tr>
</table>
include("db.php");
$city = $_POST['city'];
list($localitys, $citys) = explode(' - ', $city, 2);
$_SESSION['city'] = $citys;
$_SESSION['localitys'] = $localitys;
$_SESSION['event'] = $_POST['events'];
if(isset($_GET['locality']))
{
$sql= mysql_query("SELECT * FROM hall_search_data_1 WHERE city_name='".$_SESSION['city']."' AND hall_evnt_type LIKE '%".$_SESSION['event']."%' AND locality = '".$_GET['locality']."' ")or die(mysql_error());
}
else
{
$sql= mysql_query("SELECT * FROM hall_search_data_1 WHERE city_name='".$_SESSION['city']."' AND hall_evnt_type LIKE '%".$_SESSION['event']."%' ")or die(mysql_error());
}
while($row=mysql_fetch_row($sql))
{
///here my content will print
}
here some screen shot my select.php page
when i select any radio button then giving error like this

From the comments, I can suggest following fixes to your code.
<?php
include("db.php");
$city = '';
if(isset($_POST['city']))
{
$city = $_POST['city'];
list($localitys, $citys) = explode(' - ', $city, 2);
$_SESSION['city'] = $citys;
}
if(isset($_GET['localitys']))
{
$_SESSION['localitys'] = $localitys;
}
if(isset($_POST['events']))
{
$_SESSION['event'] = $_POST['events'];
}
$sql = "";
if(isset($_GET['locality']))
{
$sql .= "SELECT * FROM hall_search_data_1 WHERE 1 = 1 ";
if(isset($_SESSION['city']) && !empty($_SESSION['city']))
$sql .= " AND city_name='".$_SESSION['city']."' ";
if(isset($_SESSION['event']) && !empty($_SESSION['event']))
$sql .= " AND hall_evnt_type LIKE '%".$_SESSION['event']."%' ";
if(isset($_GET['locality']) && !empty($_GET['locality']))
$sql .= " AND locality = '".$_GET['locality']."' ";
mysql_query($sql) or die(mysql_error());
}
else
{
$sql .= "SELECT * FROM hall_search_data_1 WHERE 1 = 1 ";
if(isset($_SESSION['city']) && !empty($_SESSION['city']))
$sql .= " AND city_name='".$_SESSION['city']."' ";
if(isset($_SESSION['event']) && !empty($_SESSION['event']))
$sql .= " AND hall_evnt_type LIKE '%".$_SESSION['event']."%' ";
mysql_query($sql) or die(mysql_error());
}
?>
Also try printing $_POST and $_SESSION arrays so that you can come to know whether all parameters are passing/ passing correctly and all the sessions are setting up properly.

Represent json from jquery ajax response into a html's table

I create a search form that using ajax as the action. In success ajax, how can I just load some specific div without load all refresh page.
This is my form
<?php
$properties = array('id' => 'form1');
echo form_open("", $properties);
?>
<fieldset>
<div class="controls" id="chekboxes">
<label class="checkbox "><input type="checkbox" name="criteria[]" id="nomorcb"/> Nomor Request </label>
<input type="text" class="input-xlarge focused" id="no" name="no" placeholder="Masukkan No Request..."/>
<label class="checkbox "><input type="checkbox" name="criteria[]" id="namacb"/> Nama User </label>
<input type="text" class="input-xlarge focused" id="nama" name="nama" placeholder="Masukkan Nama User..."/>
<label class="checkbox "><input type="checkbox" name="criteria[]" id="departementcb" /> Departement</label>
<div class="control-group">
<div class="controls">
<select class="input-xlarge" id="selectError" name="dep">
<option value="">-- Pilih departement --</option>
<?php
foreach ($dep as $data) {
echo "<option value='" . $data['nama_departement'] . "'>" . $data['nama_departement'] . "</option>";
}
?>
</select>
</div>
</div>
<label class="checkbox "><input type="checkbox" name="criteria[]" id="rentangcb"/> Rentang waktu</label>
<div class="controls" id="tanggal-rentang">
<input type="text" class="input-small datepicker" id="tanggal" value="" name="tgl_awal"><span> s/d </span>
<input type="text" class="input-small datepicker" id="tanggal2" value="" name="tgl_akhir">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" id="submit">Cari</button>
<button type="reset" class="btn" id="cancel">Cancel</button>
</div>
</fieldset>
<?php echo form_close(); ?>
this is the action's code for execute the form.
public function search() {
$id_request = $this->input->post('nomor');
$nama_user = $this->input->post('nama');
$departement = $this->input->post('departement');
$awal = $this->input->post('tgl_awal');
if ($awal != "") {
$awal = $this->input->post('tgl_awal');
} else {
$awal = "2014-01-01";
}
$timestamp_awal = strtotime($awal);
$tgl_awal = date("Y-m-d H:i:s", $timestamp_awal);
$akhir = $this->input->post('tgl_akhir');
if ($akhir != "") {
$akhir = $this->input->post('tgl_akhir');
} else {
$akhir = "2020-01-01";
}
$timestamp_akhir = strtotime($akhir);
$tgl_akhir = date("Y-m-d H:i:s", $timestamp_akhir);
$data = $this->model_request->search($id_request, $nama_user, $departement, $tgl_awal, $tgl_akhir);
echo json_encode($data);
}
and this is the Ajax jquery for form above :
$('form').on('submit', function() {
var nomor = $('#no').val();
var nama = $('#nama').val();
var departement = $('#selectError').val();
var tgl_awal = $('#tanggal').val();
var tgl_akhir = $('#tanggal2').val();
$.ajax({
url: '<?php echo base_url() . 'it_team/control_it/search' ?>',
type: 'POST',
data: {nomor: nomor,
nama: nama,
departement: departement,
tgl_awal: tgl_awal,
tgl_akhir: tgl_akhir},
dataType: 'json',
success: function(obj) {
//Please give me an idea
}
});
return false;
For testing, I try seearch and thank God, it gives me a success on json like this:
[{"id_request":"015","nama_user":"Dzil","departement":"IT","waktu_it_terima":"2015-06-19 02:51:05"},
{"id_request":"017","nama_user":"Dzil","departement":"IT","waktu_it_terima":"2015-06-19 13:32:46"}]
My problem is, the result of search form above will be displaying into a table in same page with the form above. You know, in tbody's table will be generate the object on based the return of json. I am newbie using json. The table looked like this
<div class="box-content" id="things_table2">
<table class="table table-bordered table-striped table-condensed" id="table1">
<thead>
<tr>
<th>No. </th>
<th>No Request</th>
<th>Nama user</th>
<th>Departement</th>
<th>Tanggal Request</th>
<th>Action</th>
</tr>
</thead>
<tbody id="hasil-pencarian">
// Result will be showing here
</tbody>
</table>
</div>
Any help it so appriciated.

Try like this (beware there are less fields in your json than in your table):
var data = [
{
'id_request': '015',
'nama_user': 'Dzil',
'departement': 'IT',
'waktu_it_terima': '2015-06-19 02:51:05'
},
{
'id_request': '017',
'nama_user': 'Dzil',
'departement': 'IT',
'waktu_it_terima': '2015-06-19 13:32:46'
}
];
var html = '';
for (var i = 0; i < data.length; i++) {
var td="";
for(var key in data[i]){
td+='<td>'+data[i][key]+'</td>';
}
html+="<tr>"+td+"</tr>";
}
$('#hasil-pencarian').html(html);

There is nothing special about json. Treat it like any js object, ie after parsing it.
Since its just an array of objects, you can iterate over it and do whatever.
var html = '';
$.each(data, function (index, element) {
// build your html
html += '<tr>;'
html += '<td>'+ index + 1 + '</td>';
html += '<td>'+ element.id_request + '</td>';
// same for other elements use `element.<key-name>`
// end tr after all the td's are done
html += '</tr>;'
});
Once you have iterated over all the elements, inject it in the dom.
$('.DOM-ELEMENT').html(html);

three select lists database driven

I am trying to create a form with three select dropdown lists. user selects an option from select1 and based on the selected option, select2 gets populated, then user selects an option from select2 and based on selection, select3 gets populated.
following an example on stackoverflow I created this. the lists are getting populated fine but values are not passed when I hit submit button. if i select options from select1 and select2 only then values do get passed, but when i select option from select3 then no values are passed.
This is my PHP:
<?php
require "php/db.inc";
$db = new mysqli($hostName, $username, $password,'mms');//set your database handler
$query = "SELECT AcID, AcName FROM accounts WHERE ParentAcID ='0'";
$result = $db->query($query);
while($row = $result->fetch_assoc()){
$accountgroups[] = array("id" => $row['AcID'], "val" => $row['AcName']);
}
$query = "SELECT AcID, AcName, ParentAcID FROM accounts";
$result = $db->query($query);
while($row = $result->fetch_assoc()){
$accounts[$row['ParentAcID']][] = array("id" => $row['AcID'], "val" => $row['AcName']);
}
$query = "SELECT AcID, AcName, ParentAcID FROM accounts";
$result = $db->query($query);
while($row = $result->fetch_assoc()){
$subaccounts[$row['ParentAcID']][] = array("id" => $row['AcID'], "val" => $row['AcName']);
}
$jsonAcGroup = json_encode($accountgroups);
$jsonAc = json_encode($accounts);
$jsonSubAc = json_encode($subaccounts);
?>
This is my Javascript:
<script type='text/javascript'>
<?php
echo "var account_group = $jsonAcGroup; \n";
echo "var accounts = $jsonAc; \n";
echo "var sub_accounts = $jsonSubAc; \n";
?>
function loadAccountGroup(){
var select = document.getElementById("AcGroupSelect");
select.onchange = updateAccount;
for(var i = 0; i < account_group.length; i++){
select.options[i] = new Option(account_group[i].val,account_group[i].id);
}
}
function updateAccount(){
var catSelect = this;
var catid = this.value;
var subcatSelect = document.getElementById("AcSelect");
AcSelect.options.length = 0; //delete all options if any present
subcatSelect.onchange = updateSubAccount;
for(var i = 0; i < accounts[catid].length; i++){
subcatSelect.options[i] = new Option(accounts[catid][i].val,accounts[catid][i].id);
}
}
function updateSubAccount(){
var catSelect2 = this;
var catid2 = this.value;
var subcatSelect2 = document.getElementById("SubAcSelect");
SubAcSelect.options.length = 0; //delete all options if any present
for(var i = 0; i < sub_accounts[catid2].length; i++){
subcatSelect2.options[i] = new Option(sub_accounts[catid2][i].val,sub_accounts[catid2][i].id);
}
}
function start() {
loadAccountGroup();
updateAccount();
updateSubAccount();
}
window.onload = start;
</script>
This is my FORM:
<form class="form" method="post" action="form_test.php">
<table class='table table-striped'>
<tr>
<td>
<div class="form-group">
<label for="Companyname" class="control-label">Account Group</label>
</div>
</td>
<td>
<div class="form-group">
<label for="Companyname" class="control-label">Account</label>
</div>
</td>
<td>
<div class="form-group">
<label for="Companyname" class="control-label">Sub Account</label>
</div>
</td>
<td>
<div class="form-group">
<label for="Companyname" class="control-label">Debit</label>
</div>
</td>
<td>
<div class="form-group">
<label for="Companyname" class="control-label">Credit</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="form-group">
<select class="form-control" name="AcGroupSelect" id='AcGroupSelect'></select>
</div>
</td>
<td>
<div class="form-group">
<select class="form-control" name="AcSelect" id='AcSelect'></select>
</div>
</td>
<td>
<div class="form-group">
<select class="form-control" name="SubAcSelect" id='SubAcSelect'></select>
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="col-sm-1 form-control" name="DebitAmount" placeholder="Debit Amount">
</div>
</td>
<td>
<div class="form-group">
<input type="text" class="col-sm-1 form-control" name="CreditAmount" placeholder="Credit Amount">
</div>
</td>
</tr>
</table>

I had a similar problem. Once you get your values from the drop down list you still need to somehow put them into you form and submit them.
have a look at this I managed to solve it like this.
Populating the third menu based on previous dropdown values
Also have you got a submit button? Can't see how you submit in your form. Also missing closing form tag

Finally I figured it out. this script works just fine. the problem was not in the script but rather in the html. the top menu was hiding one line output n i was banging my head for getting the blank page.

Cant get value of hidden field after ajax Jquery

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

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.net/robertrozas/c4AHM/1/