Develop Reference

How to dynamically sum multiple input records in a PHP while loop using java-script onfocusout

I'm using a way to calculate the value of this id id="salenag<?php echo $a; ?>"
multiple values which come from the database using PHP and then I'll add value into the input field the sum of all multiples input fields show in id no sale_nag.
I'm using for this a Javascript method but it did not work;
how it works correctly its use for point of sale to stock out. I want a solution. Please help me out.
<input type='text' value='0' id='sale_nag'>
<table>
<?php
$a =1;
while ($pro_row = mysqli_fetch_assoc($select_pro)) {
$rm = $pro_row['room'];
$ra = $pro_row['rack'];
$sal = $pro_row['sale_nag'];
$ma = $pro_row['marka'];
$cha = $pro_row['chalan'];
$pro_query2="SELECT *,SUM(sale_nag) AS snag FROM stockout_details WHERE marka='$ma' and chalan='$cha' and room='$rm' and rack='$ra'
";
$select_pro2 = mysqli_query($con, $pro_query2);
$pro_row2 = mysqli_fetch_assoc($select_pro2);
if ( $sal - $pro_row2['snag'] > 0) {
?>
<div class="form_grid_2 d-none" >
<input name="inv[]" required class="" value="<?php echo $inv_pro1 ; ?>" type="text"/>
<span class="label_intro ">inv #</span>
</div>
<div class="form_grid_2 d-none" >
<input name="purchi[]" required class="" value="<?php echo $id ; ?> " type="text"/>
<span class="label_intro ">Purchi #</span>
</div>
<div class="form_grid_2 d-none" >
<input name="invstockin[]" required class="" readonly value="<?php echo $pro_row['stockoutinv'];?>" type="text"/>
<span class="label_intro ">Inv#</span>
</div>
<div class="form_grid_2" >
<input name="marka[]" required class="" readonly value="<?php echo $ma = $pro_row['marka'];?>" type="text"/>
<span class="label_intro ">Marka #</span>
</div>
<div class="form_grid_2 " >
<input name="chalan[]" required class=" " readonly value="<?php echo $cha = $pro_row['chalan'];?>" type="text"/>
<span class="label_intro ">Chalan #</span>
</div>
<div class="form_grid_2 " >
<?php
?>
<input name="nag[]" class="" readonly value="<?php
echo $sal - $pro_row2['snag'] ;
?>" type="text"/>
<span class="label_intro ">NAG #</span>
</div>
<div class="form_grid_2 " >
<input name="outnag[]" id="salenag<?php echo $a; ?>" onfocusout="chachvalue(<?php echo $a; ?>);" class="" value="0" type="text"/>
<span class="label_intro ">Nag stock-out #</span>
</div>
<div class="form_grid_2 " >
<input name="room[]" required class="" readonly value="<?php echo $pro_row['room'];?>" type="text"/>
<span class="label_intro ">Room #</span>
</div>
<div class="form_grid_2 " >
<input name="rack[]" required class="" readonly value="<?php echo $pro_row['rack'];?>" type="text"/>
<span class="label_intro ">Rack #</span>
</div>
<script type="text/javascript">
function chachvalue(<?php echo $a;?>){
var x1 = document.getElementById('salenag<?php echo $a ;?>').value;
var x2 = document.getElementById('sale_nag').value;
var result = x1 + x2 ;
document.getElementById('sale_nag').value=result;
}
</script>
<?php
$a++; }
}
?>
</table>

Since your question is tagged jQuery, I'm assuming you can use it.
First, change your function to this:
function chachvalue(element) {
// get value of input that unfocused
var x1 = parseInt(element.val());
// select #sale_nag element
var sale_nag = $('#sale_nag');
// set value of sale_nag to sale_nag + x1
sale_nag.val(parseInt(sale_nag.val()) + x1);
}
Now, create a jQuery handler for your inputs
$('.outnag_input').on('focusout', function() {
chachvalue($(this));
});
Now your input element can be simplified to this
<input name="outnag[]" class="outnag_input" value="0" type="text"/>
You should also move the chachvalue() function AND the focusout handler to outside of the PHP loop.

Bootstrap toggle doesn't work after javascript refresh

I have a problem with Bootstrap Toggle.
After a partial refresh of the main page, the toggles disappear and I see only checkboxes.
I refresh the page with this code:
<script type="text/javascript">
setInterval( function() {
$('.swcon').load("status/controls.php");
}, 5000);
</script>
And here is part of my code on main page:
<div class="grid-item swcon">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">TOGGLES</h3>
</div>
<table class="table table-hover table-condensed small" border="0">
<tbody>
<tr>
<?php
/* GPIO */
$sth = $db->prepare("SELECT * FROM gpio WHERE gpio='$s[gpio]' AND rom='$s[rom]' AND (mode='simple' OR mode='temp' OR mode='moment' OR mode='read' OR mode='day') ");
$sth->execute();
$gpio = $sth->fetchAll();
foreach ($gpio as $g) {
?>
<td class="col-md-1">
<img src="media/ico/switch-icon.png" alt="" title="<?php if(!empty($s['ip'])){echo "Last IP: ".$s['ip']." GPIO: ".$s['gpio']." Mode: ".$g['mode'];} else {echo "GPIO: ".$s['gpio']." Mode: ".$g['mode'];}?>" />
</td>
<td class="col-md-1">
<a href="index.php?id=view&type=gpio&max=day&single=<?php echo $s['name']?>" class="label <?php echo label($g['status']) ?>" title="Charts" ><?php echo str_replace("_", " ", $s['name'])?></a>
</td>
<?php
/* SIMPLE IP */
if(($g['mode']=='simple'&&!empty($s['ip']))||($g['mode']=='temp'&&!empty($s['ip']))) {
?>
<td class="col-md-2">
<form class="form-horizontal" action="" method="post" style=" display:inline!important;">
<input class="checkbox" type="checkbox" data-toggle="toggle" data-size="mini" onchange="this.form.submit()" name="switch" value="<?php echo $s['tmp'] == '1.0' ? 'off' : 'on'; ?>" <?php echo $s['tmp'] == '1.0' ? 'checked="checked"' : ''; ?> />
<input type="hidden" name="ip" value="<?php echo $s['ip']; ?>"/>
<input type="hidden" name="rev" value="<?php echo $g['rev']; ?>"/>
<input type="hidden" name="rom" value="<?php echo $s['rom']; ?>"/>
<input type="hidden" name="gpio" value="<?php echo $s['gpio']; ?>"/>
<input type="hidden" name="onoff" value="simpleip" />
</form>
</td>
<!-- Rest of the page not important here -->
If I refresh the page manually, it looks as expected.

That is because BootstrapToggle parses the page at the initial pageload looking for nodes with [data-toggle="toggle"]. So, when you load new content to the page, the new DOM structure does not get parsed automatically. In order to initialize the new checkboxes as BootstrapToggle objects, you have to call $('[data-toggle="toggle"]').bootstrapToggle(); manually after the new content has been placed into the page.
As jQuery.load() accepts a callback function that is executed when the request completes as it’s second argument, you can implement the solution above like this:
$('.swcon').load('status/controls.php', function() {
$('[data-toggle="toggle"]').bootstrapToggle({
size : 'mini',
// additional settings if necessary
});
});

PHP - How can I get the name from input type hidden and $_POST to another php?

I wish can pass the value of getvenueurl to another php named map.php .
I use input type hidden to to echo in current page:
<input type="hidden" name="getvenueurl" value="<?php echo $show_venue['url']; ?>"/>
and I wish when i click the button <a href="map.php" target="_blank"><input type="button" class="button" value="MAP" style="width:100px;"> in map.php show the correct value of getvenueurl.
In current page:
<?php
$read_venue = mysql_query("select * from venue where theme_name = '$title'");
while($show_venue = mysql_fetch_array($read_venue))
{
?>
<form method="post" action="#tab5">
<center><table border="1" class="venuetb">
<tr>
<input type="hidden" name="getvenue" value="<?php echo $show_venue['venue']; ?>"/>
<input type="hidden" name="getvenueprice" value="<?php echo $show_venue['price']; ?>"/>
<input type="hidden" name="getvenueurl" value="<?php echo $show_venue['url']; ?>"/>
<td style="width:20%;"><center><div class="imgvenue"><img src="<?php echo 'venueimg/'.$show_venue['venueimg']; ?>" /></div></center></td>
<td ><center><div class="bine"><?php echo $show_venue['venue']; ?> - RM <?php echo $show_venue['price']; ?></div></center></br>
<div class="dv"><p> <b>Address : </b><?php echo $show_venue['address']; ?></p>
<p> <b>Detail : </b><?php echo $show_venue['detail']; ?></p>
<b> Contact No: </b><?php echo $show_venue['contact']; ?></div>
</td>
<td style="width:20%;">
<center><input type="button" class="button" value="MAP" style="width:100px;">
<input type="submit" class="button" style="width:100px;" value="CHOOSE" name="choose_venue"></center>
</td>
</tr>
</table></center><br>
</form>
<?php
$_SESSION['theurl'] = $show_venue['url'];
}
?>
<?php
if(isset($_POST['choose_venue']))
{
$getvenue = $_POST['getvenue'];
$getvenueprice = $_POST['getvenueprice'];
$savevenue = mysql_query("insert into selectvenue(user,title,venuename,venueprice) values('$username','$title','$getvenue','$getvenueprice')");
if($savevenue)
{
echo"<center>$getvenue save.</center>";
}
else
{
echo "Failed.";
}
}
?>
</div>
I have try to use session to pass the value of getvenueurl but seen it is failed, because it will only show the last column value for all output that in while loop.
In map.php:
<table class="mapping">
<tr>
<td>
<?php
$theurl = $_SESSION['theurl'];
echo $theurl;?>
</td>
</tr>
</table>
How can I get the correct value to my map.php ?

u can pass value through anchor tag this way..i hope this will help u.
<input type="button" class="button" value="MAP" style="width:100px;">

Instead of
<input type="button" class="button" value="MAP" style="width:100px;">
write this code
<input type="button" class="button" onclick="submit_to_map()" value="MAP" style="width:100px;">
Then place this javascript code on the page.
<script type="text/javascript">
function submit_to_map() {
var form = document.getElementById("form-id");
form.action = "map.php";
form.submit();
}
</script>
Then you can get the value of all elements with $_POST[] inside the form from map.php. Hope this will help you

Confirm you have <?php session_start(); ?> on beginning of each page !

div hide and show inside PHP from checkbox

I have button click event in html page where I am calling a PHP file. inside the php I have two div where I want to show hide according to the check box I have ...
now it shows two check box and the show div. but i want load the show div only if user checks the first check box how can i achieve this? pls help.here the PHP Code
<div id="dialog_title">
<input type="checkbox" name="First" value="First">
First List<br>
<input type="checkbox" name="Second" value="Second">Second
</div>
<div id="Show div">
<table>
<tr>
<th> Name </th>
<th> Address </th>
</tr>
<?php
foreach ( $deviceArr as $device) {
$id = $device['id'];
$name = $device ['name'];
$Address = $device['address'];
?>
<tr class="font1">
<td> <input type="text" class="g_input_text" name="name[]" value="<?php echo $name; ?>" /> </td>
<td>
<input type="text" class="g_input_text" name="address[]" value="<?php echo $Address; ?>" />
<input type="hidden" name="id[]" value="<?php echo $id; ?>" />
</td>
</tr>
<?php
}
?>
</table>
</div>

When the page is loaded hide the show div i named first_list_bx and give an id as first_chk_bx to first check box like:
<input type="checkbox" name="First" value="First" id="first_chk_bx">
<div id="first_list_bx" style="display:none;">
//code
</div>
Then use jquery for detecting checkin of checkbox and show the first_list_bx like:
$('#first_chk_bx').click(function() {
if($(this).is(":checked")){
$("#first_list_bx").show();
}
else{
$("#first_list_bx").hide();
}
});

This is what you expecting?
$(document).ready(function() {
$('#Show').hide();
$("input[name=First]").click(function () {
$('#Show').toggle();
});
});
It's done in JQuery. Find Demo
Note: Change <div id="Show div"> to <div id="Show">

as you tagged your question with javascript try this js function in your html like this
HTML
<div id="dialog_title">
<input type="checkbox" name="First" value="First" onclick="javascript:show_hide(this, 'Show_div')">
First List<br>
<input type="checkbox" name="Second" value="Second">Second
</div>
<div id="Show_div" style="display:none">
<table>
<tr>
<th> Name </th>
<th> Address </th>
</tr>
<?php
foreach ( $deviceArr as $device) {
$id = $device['id'];
$name = $device ['name'];
$Address = $device['address'];
?>
<tr class="font1">
<td> <input type="text" class="g_input_text" name="name[]" value="<?php echo $name; ?>" /> </td>
<td>
<input type="text" class="g_input_text" name="address[]" value="<?php echo $Address; ?>" />
<input type="hidden" name="id[]" value="<?php echo $id; ?>" />
</td>
</tr>
<?php
}
?>
</table>
</div>
JAVASCRIPT
<script>
function show_hide(my_obj, id)
{
var chk = my_obj.checked;
if(chk===true)
{
document.getElementById(id).style.display="block";
}
else
{
document.getElementById(id).style.display="none";
}
}
</script>

Prepend after ajax success

My ajax success function doesn't execute the script after it has sent the data to my database, the data saves fine on my database but after that everything stops there. What might be wrong?
Javascript Code:
$(document).ready(function() {
$(".wall_update").click(function() {
var element = $(this);
var boxval = $("#content").val();
var dataString = 'content=' + boxval;
$("#form1").validationEngine({
type: "POST",
ajaxSubmit: true,
ajaxSubmitFile: "update_ajax.php",
cache: false,
success: function(html) {
alert('success');
$("ol#update").prepend(html);
$("ol#update li:first").slideDown("slow");
document.getElementById('content').value = '';
$('#content').value = '';
$('#content').focus();
$("#flash").hide();
}
});
});
});​
update_ajax.php
<?php
include("db.php");
include("tolink.php");
if(isSet($_POST['content']))
{
$id=time();//Demo Use
$msg=$_POST['content'];
$date=date("M j, Y ");
$sql=mysql_query("insert into appointments(message,date_sent)values('$msg','$date')");
$result=mysql_query("select * from appointments order by msg_id desc");
$row=mysql_fetch_array($result);
$id=$row['msg_id'];
$msg=$row['message'];
$date=$row['date_sent'];
$msg= nl2br($msg);
$msg="<br>{$msg}<br>{$date}";
}
?>
<li class="bar<?php echo $id; ?>">
<div align="left" class="post_box">
<span style="padding:10px"><?php echo $msg; ?> </span>
<span class="delete_button">X</span>
<span class='feed_link'>comment</span>
</div>
<div id='expand_box'>
<div id='expand_url'></div>
</div>
<div id="fullbox" class="fullbox<?php echo $id; ?>">
<div id="commentload<?php echo $id; ?>" >
</div>
<div class="comment_box" id="c<?php echo $id; ?>">
<form method="post" action="" name="<?php echo $id; ?>">
<textarea class="text_area" name="comment_value" id="textarea<?php echo $id; ?>">
</textarea><br />
<input type="submit" value=" Comment " class="comment_submit" id="<?php echo $id; ?>"/>
</form>
</div>
</div>
</li>
HTML script
<div align="left">
<form method="post" name="form" action="" id="form1">
<table cellpadding="0" cellspacing="0" width="500px">
<tr><td align="left"><div align="left"><h3>What are you doing?</h3></div></td></tr>
<tr>
<td style="padding:4px; padding-left:10px;" class="update_box">
<textarea class="validate[custom[last]] text-input" cols="30" rows="10" style="width:480px;font-size:14px; font-weight:bold" name="content" id="content" ></textarea><br />
<input type="submit" value="Update" name="submit" class="wall_update"/>
</td>
</tr>
</table>
</form>
</div>
<ol id="update" class="timeline">
// Display here after sending data to the database
</ol>

$('#content').value = '';
jQuery doesn't have a value property, you should use val:
$('#content').val('');
value is a property of the DOM Input object.