Cant get value of hidden field after ajax Jquery - javascript

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/

Related

Error message for value transfer with dynamic form

i created a dynamic form where you can add a form group. on a second page the input is sent by post. if i add more than one field, the radio buttons don't work anymore and the mail delivery doesn't work either
I tried to make a for-loop, but doesnt worked..
index.php (dynamic form):
<script>
var ct = 1;
function new_link()
{
ct++;
var div1 = document.createElement('div');
div1.id = ct;
// link to delete extended form elements
var delLink = '<div style="text-align:right;margin-right:65px">Delete</div>';
div1.innerHTML = document.getElementById('newlinktpl').innerHTML + delLink;
document.getElementById('newlink').appendChild(div1);
}
// function to delete the newly added set of elements
function delIt(eleId)
{
d = document;
var ele = d.getElementById(eleId);
var parentEle = d.getElementById('newlink');
parentEle.removeChild(ele);
}
</script>
<style>
#newlink {width:600px}
</style>
<form method="post" action="index2.php">
<div id="newlink">
<div>
</div>
</div>
<p>
<br>
<input type="submit" name="submit1">
</p>
<p id="addnew">
New
</p>
</form>
<div id="newlinktpl" style="display:none">
<div>
<table>
<tr>
<label>Ordner:</label>
<td> <input type="text" name="linkurl[]" value="" placeholder="New Folder" required></td>
</tr>
<tr>
<td>
<label>Write</label>
<input type="radio" name="berechtigung[] " value="W">
</td>
<td>
<label>Read</label>
<input type="radio" name="berechtigung[] " value="R">
</td>
<td>
<label>None</label>
<input type="radio" name="berechtigung[] " value="K ">
</td>
</tr>
</table>
</div>
</div>
index2.php: (POST-DATA)
<?php
if(count($_POST))
{
$len = count($_POST['linkurl']);
for ($i=0; $i < $len; $i++)
{
echo $_POST['linkurl'][$i] . '<br>';
echo $_POST['berechtigung'][$i] . '<br>';
}
}
?>

Difference of two dates display in another textbox after fetching data from database

In my program I am fetching data from database and display it in table.
<tbody>
<?php $total_time=0; ?>
<?php foreach($result as $row) { ?>
<tr>
<td>
<?php echo $row->work;?>
</td>
<td>
<input type="text" name="assigned_date[]" class="assigned_date" value="<?php echo $row->assigne_date;?>" />
</span>
</td>
<td>
<input type="text" name="last_date[]" class="last_date" value="<?php echo $row->last_date;?>" />
</span>
</td>
<td>
<input type="text" name="spent[]" class="spent" value="<?php echo $row->spent;?>" />
</td>
<td>
<input type="text" name="remaining[]" class="remaining" value="<?php echo $row->remaining;?>" />
</td>
<td>
<input type="text" name="priority[]" value="<?php echo $row->priority;?>" />
</td>
<td>
<input type="text" name="frequency[]" value="<?php echo $row->frequency;?>" />
</td>
<td>
<input type="text" name="company[]" value="<?php echo $row->company;?>" />
</td>
<td>
<textarea name="description[]" rows="2" id=""><?php echo $row->description;?></textarea>
</td>
<td>
<input type="text" name="secondry[]" value="<?php echo $row->secondry;?>" />
</td>
<td>
<input type="text" name="director[]" value="<?php echo $row->director;?>" />
</td>
<td>
<textarea name="comments[]" rows="2" id=""><?php echo $row->comments;?></textarea>
</td>
<td>
<textarea name="question[]" rows="2" id=""><?php echo $row->question;?></textarea>
</td>
</tr>
<?php } ?>
</tbody>
Assigne_date and last_date column contain a date.
My Problem is I want to display difference of current date and assigne_date in spent column and difference between last_date and current date in remaining column.
Here is my javascript code:
<script type="text/javascript">
var start = new Date();
var end = '<?php $date1=$row->assigne_date; ?>';
var days = Math.ceil((end - start)/1000/60/60/24);
if( $(this).hasClass('assigned_date') ){
$(this).closest('tr').find('.spent').val(days);
}
</script>
<script>
var start1 = new Date();
var end1 = '<?php $date1=$row->last_date; ?>';
var days1 = Math.ceil((end1 - start1)/1000/60/60/24);
if( $(this).hasClass('last_date') ){
$(this).closest('tr').find('.remaining').val(days);
}
</script>
I dont know how to do this. please help me to find the solution.
If it's a static field (no client side interaction), use php to calculate the day difference.
If it's dynamic, use row index as an additional class or id for the DOM elements and have php output javascript with the jquery selectors that point to the row. Something like (substitute "id" with whatever your db table identity field is):
<input class="remaining row_<?php echo $row->id; ?>">
Now you can output javascript from php (just a selector example):
<?php
echo "$('.remaining.row_" . $row->id . "').val();";
?>
Try this:
var start = new Date();
var end = new Date("2016-08-2");
var time = Math.abs(start.getTime() - end.getTime());
var days = Math.ceil(time / (1000 * 3600 * 24));
console.log(days);
Codepen: http://codepen.io/ssh33/pen/NAZYpm
function GetDays(end_date)
{
var start_date = new Date();
var time = Math.abs(start_date.getTime() - end_date.getTime());
return Math.ceil(time / (1000 * 3600 * 24));
}
if( $(this).hasClass('assigned_date') ){
$(this).closest('tr').find('.spent').val(GetDays('<?php $date1=$row->assigne_date; ?>'));
}
if( $(this).hasClass('last_date') ){
$(this).closest('tr').find('.remaining').val(GetDays('<?php $date1=$row->last_date; ?>'));
}
You can also do this in php
<?php foreach($result as $row) {
$datetime1 = date_create($row->assigne_date);
$datetime2 = date_create($row->last_date);
$interval = date_diff($datetime1, $datetime2);
echo $interval->format("%d");
}
?>
ref: http://php.net/manual/en/function.date-diff.php
You can prepare this date in your controller and use in view

Input Clear Button for Textareas

Updating what has worked and the current issue:
I have 1 clear button beside each field. Each clear button works. The problem is after clearing both fields, when selecting another file from the dropdown, it only populates the text field with the file name and does not display the contents in the second textarea until refreshing the page.
<input type="hidden" name="Action" value="EDIT" /><input type="hidden" name="Selection" id="Selection" value="-1"><div><font color=#2F6054>Below is the list of your saved codes. To view or delete your codes, select it from the list.</font></font></div><p>
<select size="1" name="CodeList" id="CodeList">
<?php
$directory = $directory = 'users/' . $_SESSION['username'];
$filesContents = Array();
$files = scandir( $directory ) ;
foreach( $files as $file )
{
if ( ! is_dir( $file ) )
{
$filesContents[$file] = file_get_contents($directory , $file);
echo "<option>" . $file . "</option>";
}
}
?>
</select><p>
<font color=#2F6054><font size=4>Enter Codes Here</font></font>
<form method="post" action="/evo/avsaveprocess.php">
<input type="hidden" name="Action" value="SAVE" />
<input type="hidden" name="CodeId" id="CodeId" value="0" />
<table width="100%">
<tr>
<td>Description:</td>
<td><input type="text" name="CodeDescription" size="40" maxlength="50" id="CodeName" value="" /></td>
<td><button type="reset" class="clear-tn" value="Clear"></button></td>
</tr>
<tr>
<td valign="top">Code:</td>
<td>
<textarea rows="10" style="width:99%" name="Code" id="CodeValue"></textarea>
</td>
</tr>
</table>
<input type="submit" value="Save" />
function code:
<script>
$(function(){
$('.clear-btn').on('click',function(e){
e.preventDefault();
$(this).closest('tr').find('input[type="text"],textarea').val('');
});
});
</script>
Edited to show current working code
Editing to show on change script at the bottom of my form for the dropdown
<script>
$(document).ready(function(){
// apply a change event
$('#CodeList').change(function() {
// update input box with the currently selected value
$('#CodeName').val($(this).val());
$.get( '<? echo $directory ?>' + '/' + $('#CodeName').val(), function( data ) {
$( "#CodeValue" ).val( data );
});
});
});
</script>
You can try the below link, it works without javascript or jquery. Just simple HTML
<form>
<input type="reset" />
<input type="submit" />
<input type="text" />
<textarea></textarea>
</form>
Here is the demo
Change type attribute "button" to "reset".
<button type="reset" class="clear-btn">Clear</button>
Try below working fiddle as per your requirement.
http://fiddle.jshell.net/t7gkr8rk/1/

Ajax oncheck event to search item in a table

modify search
<div class="highlight_2"> <img src="images/collapse2.jpg" width="151" height="28" border="0" />
<div id="inox">
<input type="checkbox" value="kar_kar" />kar and kar <br />
<input type="checkbox" value="bala_bala" />bala and bala <br />
<input type="checkbox" value="jena_jena" />jena and jena <br />
<input type="checkbox" value="senapati" />senapati <br />
<input type="checkbox" value="sarangi_sarangi" />sarangi and sarangi <br />
<input type="checkbox" value="sairam" />sairam <br />
<input type="checkbox" value="madhumita" />madhumita <br />
<div class="clear"></div>
</div>
search table
<tr>
<td>Sl No.</td>
<td>Bus Operator</td>
<td>Bus No. </td>
<td>Departure Time</td>
<td>Arrival time</td>
</tr>
<?php
$count=0;
$s=mysql_query("SELECT * FROM bus_detail where source_point='$_SESSION[source_point]' && destination_point='$_SESSION[destination]'");
while($row=mysql_fetch_array($s))
{
$count+=1;
?>
<tr>
<td><?php echo $count; ?></td>
<td><input name="bus_name" type="text" value="<?php echo $row['bus_name'];?>" class="input_box" /> </td>
<td><?php echo $row['bus_no'];?></td>
<td><?php echo $row['departure_time'];?></td>
<td><?php echo $row['arrival_time'];?></td>
</tr>
<?php }?>
I want to use my modify search in a ajax oncheck event.. In the picture i ve given ,this is my search list apper but if i check a check box name "jena and jena" from the bus operator div, it should only show me the result of jena and jena , the other two, i want to hide them .. I want to modify my search according to my bus operators(after checking a check box from the operator list).. It ll be a great help .. Thank you
My database :
Sorry i miss understood your question. I think you are looking to hide / show html table rows when user selects list. If this is what you are look, Then please check by code below.
Note: You can tweak this code to get better performance and result
Fiddle: http://jsfiddle.net/663Mx/2/
$("#inox input[type='checkbox']").live('click', function () {
// STORE CHECKED VALUED IN ARRAY
var cv = [];
$("#inox input[type='checkbox']:checked").each(function () {
cv.push($(this).val());
});
// SHOW / HIDE ROWS BY DEFAULT
if(cv.length <= 0) {
$("#mytab tbody").find("tr").show();
} else {
$("#mytab tbody").find("tr").hide();
var rows = $("#mytab tbody").find("tr");
var data = $(this).val();
// LOOP THROUGH AND SHOW ONLY CHECKED ROWS
rows.each(function (i, v) {
for (var n=0; n<cv.length; n++) {
var check = $(v).find('td').filter(":contains('" + cv[n] + "')");
check.parent('tr').show();
}
});
}
});

jquery regex out 0 from cloned element and insert it?

I'd like to learn how to regex out 0 from all elements inside clone and replace it with var count_rows.
//Duplicate table tr for multiple subtitle entry
$("#add_subtitle").on("click", function(){
var count_rows = $(".subs_row").length;
$("#sub_0").clone().insertBefore("#append_sub");
return false;
});
markup:
<tr valign="top" id="sub_0" data-num="0" class="subs_row">
<th scope="row"><label for="subtitle">Subtitle_0</label></th>
<td>
<input name="subtitle[0][url]" type="text" value="<?php echo $wovies_extra_data[0]['subtitle'][0]['url']; ?>" style="width:280px;">
<p class="howto">Url</p>
</td>
<td>
<input name="subtitle[0][lang]" type="text" value="<?php echo $wovies_extra_data[0]['subtitle'][0]['lang']; ?>" style="width:100px;">
<p class="howto">Language: Label</p>
</td>
<td>
<input name="subtitle[0][lang_code]" type="text" value="<?php echo $wovies_extra_data[0]['subtitle'][0]['lang_code']; ?>" style="width:50px;">
<p class="howto">Language: Code</p>
</td>
<td>
<input name="subtitle_def" type="radio" value="<?php echo $key; ?>" <?php if ($wovies_extra_data[0]['subtitle_def'] == $key) {echo "checked";} ?> style="width:100px;">
<p class="howto">Default?</p>
</td>
</tr>
oh and how can I make my regex not touch zero in width:50px; ?
Regexp is probably the wrong way to go here.
I would suggest to use a template system like http://mustache.github.io/ or underscore
If you really want to replace the zeros inside your existing HTML code you could target only certain attributes:
function replaceZero(row) {
return function (i, value) {
return value.toString().replace(0, row);
}
}
var $row = $("#sub_0");
$("label", $row).text(replaceZero(200));
$("input", $row).attr("name", replaceZero(200));
$row.attr("id", replaceZero(200));
Fiddle (simplified)
Fiddle (with clone)

Categories