Elements of the file called from post method not accessible in jquery - javascript

Please help me. I have a php file that will be called by post method of jQuery. The html elements from this php file cannot be accessible in jquery.
Here comes my code snippet.
In query:
var getFinishOptions = $.post("ajax_finish_options.php",
{ event_id: event_name},
function(data)
{
$("#TimeToFinish").append(data);
}
);
HTML:
<div id="TimeToFinish"> </div>
PHP:
<tr style="width: 100%">
<th style="width: 100%" colspan="2"><?php echo $FinishCategory[0]; ?> </th>
<th style="width: 100%" colspan="3"><?php echo $FinishCategory[1]; ?> </th>
<th style="width: 100%" colspan="3"><?php echo $FinishCategory[2]; ?> </th>
</tr>
<tr>
<td> Option 1 </td>
<td> Option 2 </td>
<td> Option 1 </td>
<td> Option 2 </td>
<td> Option 3 </td>
<td> Option 1 </td>
<td> Option 2 </td>
<td> Option 3 </td>
</tr>
<tr>
<td> <input type="radio" class="FinishOptions" name="FinishOptions" value="<?php echo $FinishOption[$FinishCategory[0]][$event_id][0]; ?>" /> <?php echo $FinishOption[$FinishCategory[0]][$event_id][0]; ?> </td>
<td> <input type="radio" class="FinishOptions" name="FinishOptions" value="<?php echo $FinishOption[$FinishCategory[0]][$event_id][1]; ?>" /> <?php echo $FinishOption[$FinishCategory[0]][$event_id][1]; ?> </td>
<td> <input type="radio" class="FinishOptions" name="FinishOptions" value="<?php echo $FinishOption[$FinishCategory[1]][$event_id][0]; ?>" /> <?php echo $FinishOption[$FinishCategory[1]][$event_id][0]; ?> </td>
<td> <input type="radio" class="FinishOptions" name="FinishOptions" value="<?php echo $FinishOption[$FinishCategory[1]][$event_id][1]; ?>" /> <?php echo $FinishOption[$FinishCategory[1]][$event_id][1]; ?> </td>
<td> <input type="radio" class="FinishOptions" name="FinishOptions" value="<?php echo $FinishOption[$FinishCategory[1]][$event_id][2]; ?>" /> <?php echo $FinishOption[$FinishCategory[1]][$event_id][2]; ?> </td>
<td> <input type="radio" class="FinishOptions" name="FinishOptions" value="<?php echo $FinishOption[$FinishCategory[2]][$event_id][0]; ?>" /> <?php echo $FinishOption[$FinishCategory[2]][$event_id][0]; ?> </td>
<td> <input type="radio" class="FinishOptions" name="FinishOptions" value="<?php echo $FinishOption[$FinishCategory[2]][$event_id][1]; ?>" /> <?php echo $FinishOption[$FinishCategory[2]][$event_id][1]; ?> </td>
<td> <input type="radio" class="FinishOptions" name="FinishOptions" value="<?php echo $FinishOption[$FinishCategory[2]][$event_id][2]; ?>" /> <?php echo $FinishOption[$FinishCategory[2]][$event_id][2]; ?> </td>
</tr>
Final piece of jquery:
$("input[type=radio][name=FinishOptions]").click(function() {
alert($(this).val());
});
All i want is, to get the value of any of one checked radio button.
Please give your valuable comment.

The reason why you cant get the values is that, upon your final piece of jquery, upon execution, you are binding and element which does not yet exist (remember, the radio buttons inside the table are loaded dynamically, thru your ajax call).
Therefore, it will not work. You must use .on() in order to catch that after it has been loaded. (its like .live())
Consider this example:
// change the final piece of jquery
$('#TimeToFinish').on('click', 'input[type="radio"][name="FinishOptions"]', function() {
var value = $(this).val();
alert(value);
});

Related

Dynamic subtotal in php

In my project I need to make the subtotal of the line (quantite*montant) dynamicali.
For the moment I have there:
I want the montant total it is auto make 1*110 for example and it is directly displayed.
My code :
<div id="contenu">
<h2>Renseigner ma fiche de frais du mois <?php echo $numMois."-".$numAnnee ?></h2>
<form method="POST" action="index.php?uc=gererFrais&action=validerMajFraisForfait">
<div class="corpsForm">
<fieldset>
<legend>Eléments forfaitisés
</legend>
<table width=100%>
<tr>
<td>Libelle</td>
<td>Nombre</td>
<td>Montant unitaire</td>
<td>Montant total</td>
</tr>
<?php
foreach ($lesFraisForfait as $unFrais)
{
$idFrais = $unFrais['idfrais'];
$libelle = $unFrais['libelle'];
$quantite = $unFrais['quantite'];
$montant = $unFrais['montant'];
?>
<tr>
<td><?php echo $libelle ?></td>
<td><input type="number" id="idFrais" name="lesFrais[<?php echo $idFrais?>]" size="10" min="0" autocomplete="off" maxlength="5" value="<?php echo $quantite?>" onkeyup="calculer()">
<td><input type="text" id="montant" value="<?php echo $montant ?>" disabled></td>
</tr>
<?php
}
?>
</table>
</fieldset>
</div>
<div class="piedForm">
<p>
<input id="ok" type="submit" value="Valider" size="20" />
<input id="annuler" type="reset" value="Effacer" size="20" />
</p>
</div>
</form>
Here I added another Answer for you.
So basically in your FOREACH Loop you have to create INCREMENTAL VARIABLE
<?php
$incr = 1;
foreach ($lesFraisForfait as $unFrais)
{
$idFrais = $unFrais['idfrais'];
$libelle = $unFrais['libelle'];
$quantite = $unFrais['quantite'];
$montant = $unFrais['montant'];
?>
<tr>
<td><?php echo $libelle ?></td>
<td><input type="number" id="<?php echo 'idFrais'.$incr; ?>" size="10" min="0" autocomplete="off" maxlength="5" value="<?php echo $quantite?>" onkeyup="calculer(this)">
<td><input type="text" id="<?php echo 'montant'.$incr; ?>" value="<?php echo $montant ?>" disabled></td>
<td id='subtotal<?php echo $incr;?>'><?php echo $quantite*$montant; ?></td>
</tr>
<?php
$incr ++;
}
?>
Since you already have ONKEYUP='calculer' on your javascript code this below.
function calculer( e ){
var i = e.getAttribute('id').length;
var input_identifier = e.getAttribute('id').substring(i-1,i);
var subtotal = document.getElementById('subtotal'+input_identifier)
var quantity = e.value;
var montant = document.getElementById('montant'+input_identifier);
subtotal.textContent = parseInt(quantity) + parseInt(montant.value);
return;
}
This should work.
please add td for total :
<tr>
<td><?php echo $libelle ?></td>
<td><input type="number" id="idFrais" name="lesFrais[<?php echo $idFrais?>]" size="10" min="0" autocomplete="off" maxlength="5" value="<?php echo $quantite?>" onkeyup="calculer()">
<td><input type="text" id="montant" value="<?php echo $montant ?>" disabled></td>
<td><input type="text" value="<?php echo ($montant*$quantite) ?>" disabled></td>
</tr>
You just have to add the following 4th TD.
<td><?php echo $quantite*$montant; ?></td>
That should work.

Uncaught TypeError When Passing Variable from FancyBox Into Parent

i have a problem when i passing variable value from FancyBox. First, i will tell the code :
Here is the code in the FancyBox :
JavaScript
function post_value(no){
parent.setSelectedUser(document.forms[no]["NO_INDUK"].value);
parent.$.fancybox.close();
}
html
while($baris = mysqli_fetch_assoc($hasil))
{
//1 item($baris);
$no++;
?>
<tr>
<form name="<?php echo $no ?>" method='post'>
<td><?php echo $no ?></td>
<td><input id="NO_INDUK" class="form-control" type="text" name="NO_INDUK" size="5" value="<?php echo $baris["NO_INDUK"] ?>" readonly/></td>
<td><?php echo $baris["NAMA_SISWA"] ?></td>
<td><?php echo $baris["NAMA_WALI"] ?></td>
<td><?php echo $baris["ALAMAT"] ?></td>
<td>
<a class="btn btn-success" href="#" onclick='post_value(<?php echo $no ?>)'> Pilih</a>
</td>
</form>
</tr>
<?php
} //untuk while
?>
Then this is source page view :
html source view
<tr>
<form name="2" method='post'>
<td>2</td>
<td><input id="NO_INDUK" class="form-control" type="text" name="NO_INDUK" size="5" value="112312" readonly/></td>
<td>Angga Lisdiyanto</td>
<td>asa</td>
<td>asdsad</td>
<td>
<a class="btn btn-success" href="#" onclick='post_value(2)'> Pilih</a>
</td>
</form>
</tr>
<tr>
<form name="3" method='post'>
<td>3</td>
<td><input id="NO_INDUK" class="form-control" type="text" name="NO_INDUK" size="5" value="2543" readonly/></td>
<td>Fina Arzika Humaidah</td>
<td>Nur Kojim</td>
<td>Campurejo, Panceng, Gresik</td>
<td>
<a class="btn btn-success" href="#" onclick='post_value(3)'> Pilih</a>
</td>
</form>
</tr>
Then when i click the button 'Pilih', the FancyBox won't close and the value is not passed. If the javascript code like this one, it can successfull passing a value :
function post_value(no){
parent.setSelectedUser(no); //just test, passing from no value
parent.$.fancybox.close();
}
After debugging it with Chrome, there are error in this line :
parent.setSelectedUser(document.forms[no]["NO_INDUK"].value);
And the error message is :
Uncaught TypeError: Cannot read property 'NO_INDUK' of undefined
That is, i hope there are any reply and i would be very happy if there are someone can help me out.
Thanks :)
SOLVED (with my blacked eyes!).
So as #JFK said, onclick='post_value(n)' is passing form index not the form's name. So i try it out with adding several char in the form's name like this :
<form name="form<?php echo $no ?>" method='post' action="">
Then in the button is like this one :
onclick='post_value("form<?php echo $no ?>")'
And on the JavaScript :
function post_value(NamaForm){
parent.setSelectedUser(document.forms[NamaForm]["NO_INDUK"].value);
parent.$.fancybox.close();
}
That is.
Sorry for Indonesian language may confuse you. :)

how to insert multiple rows from array values with input

I have my table named i_table with columns:
id name req_qty req_date rcv_qty rec_date
1 metal 1 2014-03-04
2 spring 5 2014-03-04
in my html/php:
<form action="insert.php" method="post">
<?php $resource2=mysql_query("SELECT * FROM i_table",$con);
while($result2=mysql_fetch_array($resource2))
{
?>
<table>
<tr>
<td>
<input type="text" name="id" value="<?php echo $result2['id'];?>"/>
</td>
</tr>
<tr>
<td>
<input type="text" name="name" value="<?php echo $result2['name'];?>"/>
</td>
</tr>
<tr>
<td>
<input type="text" name="rcv[]" value="" />
</td>
</tr>
<tr>
<td>
<input type="date" name="rcv_date[]" value="" />
</td>
</tr>
</table>
<?php };?>
</form>
how can I insert in multiple arrays from an input according to their unique ID from db? pls help me here... huhu
In your form, add the id as the key -
<form action="insert.php" method="post">
<?php $resource2=mysql_query("SELECT * FROM i_table",$con);
while($result2=mysql_fetch_array($resource2))
{
?>
<table>
<tr>
<td>
<input type="text" name="id[<?php echo $result2['id'];?>]" value="<?php echo $result2['id'];?>"/>
</td>
</tr>
<tr>
<td>
<input type="text" name="name[<?php echo $result2['id'];?>]" value="<?php echo $result2['name'];?>"/>
</td>
</tr>
<tr>
<td>
<input type="text" name="rcv[<?php echo $result2['id'];?>]" value="" />
</td>
</tr>
<tr>
<td>
<input type="date" name="rcv_date[<?php echo $result2['id'];?>]" value="" />
</td>
</tr>
</table>
<?php };?>
</form>
Then on your insert.php where you post your form, get the id in your foreach -
<?php
if(isset($_POST['id'])){
foreach($_POST['id'] as $id=>$value){
$sql = "UPDATE `i_table` SET `name` = '".$_POST['name'][$id]."', `rcv_qty` = '".$_POST['rcv'][$id]."', `rec_date` = '".$_POST['name'][$id]."' WHERE `id` = ".$id."";
mysql_query($sql,$con);
}
}
?>
note the foreach() is just an example. You will want to sanitize your data before inserting/updating to prevent sql injection. see How can I prevent SQL injection in PHP?

Display radio button checked if json value is match to condition

I've following Json data
{"1":"2","2":"2"} this can be change as per conditions.
I'm trying to implement radio button checked if Json contain value same as radio button.
in Json first Value is radio name and 2nd is value that needs to match.
success : function(result){
//alert(JSON.stringify(result));
var contact = JSON.parse(result);
alert("First: " + contact + " Second: " + contact);
$('input[type=radio][name="' + group[contact[1]] + '"][value="' + contact[1] + '"]').prop('checked', true);
}
Following is my html form
<table width="50%" border="1" align="center" cellpadding="2" cellspacing="1" >
<th><td colspan='2'> <font color='#006699' size='3' face='Arial, Helvetica, sans-serif'><strong> Assign User Role </br></br></strong></font></td></th>
<tr bgcolor="#FFFFFF">
<td><strong>Select User:</strong></td>
<td><input type="text" name="assigned_to" id="assigned_to" /></td>
</tr>
<tr bgcolor="#FFFFFF">
<td><strong>Page Group</strong></td>
<td><strong>User Role </strong></td>
</tr>
<?php
foreach($groups as $key=>$value)
{ ?>
<tr bgcolor='#FFFFFF'>
<td><strong><?php echo $value; ?></strong></td>
<td>
<input type="radio" name="group[<?php echo $key; ?>]" id="chk_group1" value="1" />Viewer
<input type="radio" name="group[<?php echo $key; ?>]" id="chk_group2" value="2" />Approver
<input type="radio" name="group[<?php echo $key; ?>]" id="chk_group3" value="3" />Editor
<input type="radio" name="group[<?php echo $key; ?>]" id="chk_group3" value="4" />Adder
<input type="radio" name="group[<?php echo $key; ?>]" id="chk_group4" value="5" />Super Editor
<input type="radio" name="group[<?php echo $key; ?>]" id="chk_group5" value="6" />Blocked
</td>
</tr>
<?php
}
?>
</tr>
<tr></tr> <tr></tr> <tr></tr>
<tr bgcolor="#FFFFFF">
<td></td>
<td>
<input type="submit" name="submit" value="Submit"/>
</td>
</tr>
Traverse through radio elements collection using each() of jquery, check for matched radio value with json provided value and add check to matched radio.
According to your json as :
{"1":"2","2":"2"}
Insert below code in sucess function of ajax
success : function(result){
for(key in result){
$('input[type=radio]').each(function(){
if($(this).val() === result[key]){
$(this).prop('checked', true);
}
}
}
}

Table Row Sum Within PHP loop

I want to sum table rows dynamically as the user inputs values. Since the number of rows can vary I want to use a php loop to accomplish this. I'm having problems getting the loop to work correctly. If, for example, there are two individual rows to sum only the bottom row will be summed.
<script type="text/javascript">
var sumScoreF = function(a) {
var rowtotal = 0;
n = new Array();
for (i = 1; i <= 3; i++) {
if (parseInt(document.getElementById(a + i).value) > 0) {
n[i] = parseInt(document.getElementById(a + i).value);
rowtotal += n[i];
}
}
document.getElementById(a + 'total').value = rowtotal;
};
</script>
The following is an example of a single row sum. The total column continues to be summed as values are entered. This is a nice effect but not necessary.
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>total</td>
</tr>
<tr>
<td>
<input name="p1g1" id="p1g1" type="text" value="" onChange="sumScoreF('p1g')" />
</td>
<td>
<input name="p1g2" id="p1g2" type="text" value="" onChange="sumScoreF('p1g')" />
</td>
<td>
<input name="p1g3" id="p1g3" type="text" value="" onChange="sumScoreF('p1g')" />
</td>
<td>
<input name="p1gtotal" id="p1gtotal" type="text" value="" />
</td>
</tr>
</table>
Here is my attempt at looping additional rows using php and javascript. The first row will not sum but the second row will. I think the problem is with the javascript variable "m" in that it goes directly to the last row but I can't figure out how to fix it.
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>total</td>
</tr>
<?php for($j=1;$j<=3;$j++) { ?>
<script type="text/javascript">
var k = <?php echo json_encode($j); ?>;
var m = 'p'+k+'g';
</script>
<tr>
<td>
<input name="<?php echo 'p'.$j.'g1'; ?>" id="<?php echo 'p'.$j.'g1'; ?>" type="text" onChange="sumScoreF('m')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'g2'; ?>" id="<?php echo 'p'.$j.'g2'; ?>" type="text" onChange="sumScoreF('m')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'g3'; ?>" id="<?php echo 'p'.$j.'g3'; ?>" type="text" onChange="sumScoreF('m')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'gtotal'; ?>" id="<?php echo 'p'.$j.'gtotal'; ?>" type="text" />
</td>
</tr>
<?php } ?>
Any help is greatly appreciated. Thanks.
Used PHP to echo the loop variable within the onChange javascript function call:
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>total</td>
</tr>
<?php for($j=1;$j<=3;$j++) { ?>
<tr>
<td>
<input name="<?php echo 'p'.$j.'g1'; ?>" id="<?php echo 'p'.$j.'g1'; ?>" type="text" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'g2'; ?>" id="<?php echo 'p'.$j.'g2'; ?>" type="text" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'g3'; ?>" id="<?php echo 'p'.$j.'g3'; ?>" type="text" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'gtotal'; ?>" id="<?php echo 'p'.$j.'gtotal'; ?>" type="text" />
</td>
</tr>
<?php } ?>

Categories