I have a simple table (dynamically generated from an array) where i can put the amount of pieces so the price can calculate automaticly (on blur) in the price field. Both fields are form-input fields.
So the source therefore looks like this:
<?php
foreach($ItemArray['1'] as $key => $value) {
echo '
<tr>
<td height="30" valign="middle">'.$value['nr'].'</td>
<td valign="middle">'.$value['product'].'</td>
<td valign="middle">'.$value['describe'].'</td>
<td valign="middle" id="stockprice_'.$key.'">
<input name="Field_Price_'.$key.'" id="Field_Price_'.$key.'" value="'.$value['price'].'" type="text" /></td>
<td valign="middle" class="box_darker" id="amount_'.$key.'">
<input name="Field_Amount_'.$key.'" id="Field_Amount_'.$key.'" type="text" /></td>
<td valign="middle" id="price_'.$key.'">
<input name="Field_Total_'.$key.'" id="Field_Total_'.$key.'" type="text" />
</td>
</tr>'; }
;?>
The way i would realize that is when a user inputs any amount (in "Field_Amount_") and go out from this (onblur) so the amount field should take the value (from "Field_Amount_") and then have to put the total price (in "Field_Total_"). So i try this solution, but it won't work.
$(document).on('blur', '[id^=Field_Amount_]', function(){
Amount = $(this).parent().find('[id^=Field_Amount_]').val();
StockPrice = $(this).parent().find('[id^=Field_Price_]').val();
Price = $(this).parent().find('[id^=Field_Total_]');
RowPrice = Amount * StockPrice;
if(Amount) { $(Price).text(accounting.formatNumber(RowPrice, 2, ".", ","));}
});
Can anyone give me a suggestion how i have to do this? Many thanks.
Thanks a lot for helping me.
I have a feeling that the code:
$(this).parent().find('input[id^=Field_Amount_]').val();
actually points to the <td> tag itself.
The `$(this)` is actually pointing to the input field of the amount.
var amount = $(this).val();
//field - td - tr
var stockPrice = $(this).parent().parent().find('input[id^=Field_Price_]').val();
and so forth...
Change your selector from [id^=Field_Amount_] to input[id^=Field_Amount_]
Related
I have following code
<tbody>
<tr>
<td style="width:40%">
<select id="pname.0" name="pname[]" class="form-control ">
<?php
$this->db->order_by('name','asc');
$prod = $this->db->get('product')->result_array();
foreach($prod as $row): ?>
<option data-price="<?php echo $row['price'];?>" value="<?php echo $row['prod_id'];?>" >
<?php echo ucwords($row['name']);?>
</option>
<?php endforeach; ?>
</select>
</td>
<td style="width:10%">
<input class="form-control" onchange="javascript:calc();" id="item_quantity.0" name="qnty[]" value=""/>
</td>
<td class="text-right" style="width:10%">
<input class="form-control text-right" onchange="javascript:calc();" id="item_price.0" name="price[]" value=""/>
</td>
<td class="text-right" style="width:10%">
<input class="form-control text-right" id="subtot.0" readonly name="item_sub_total" value=""/>
</td>
</tr>
</tbody>
Now I want to get the value of data-price attribute of selected option on change in Dropdown to the textbox having dynamic id item_price_0. This is changing as I have added the add row button. When I click on Add row, the id will become item_price_1.
Kindly help me how can I get these value using jquery or javascript
Is this what you were after?
//if your table has an id or class, use it as tag selector is not good without context.
//$(".tableClass") OR $("#tableID")
$("table").on('change', "select[id^='pname']", function() {
var $row = $(this).closest("tr");
$row.find("input[id^='item_price']").val( $(this).find('option:selected').data("price") );
});
So, to use . in selectors, you need to escape them as mentioned (2nd para) in jQuery selectors API
Demo#fiddle
You can listen the change on your element, and get the price attribute like so:
$('#pname.0').on('change', function(){
var price = $(this).find('option:selected').data('price');
});
PS: I'm not sure you can use "." in ID attribute.
First assign a class to all select. (in addition to "form-control"). I suppose selects have test class
var selectedPrices = [];
var i = 0;
$(".test").each(function(){
selectedPrices[i] = $(this).find(":selected").attr("data-price");
i++;
});
Now, selectedPrices is an array of prices. You can do anything you want with it.
I am getting data from the database:
<table>
<?php
$select_data = mysql_query(" select * from `data_table` ") or die(mysql_error());
while($data_row = mysql_fetch_array($select_data))
{
?>
<tr>
<td>
<img src="../Stuff-site_data_images/<?php echo$data_row['data_image_name']?>" width="100" height="100" />
</td>
<td> <?php echo $data_row['data_image_name'];?> </td>
<td> <?php echo $data_row['data_description'];?> </td>
I want to get data from here:
<td align="center" class="row_id">
<input class="inner_row_id" type="hidden" value="<?php echo $data_row['data_id'];?>" name="show_detail_button" id="show_detail_button"> Show All
</td>
I want to get data from here:
</tr>
<?php
}
?>
</table>
so as far as I know jQuery will conflict when there is more than 1 id so that's why I used CSS class names "row_id" & "inner_row_id".
When I click on "row_id" I want the value of "inner_row_id"
and for that I have written the code below:
$(".row_id").click(function(e){
var row_id = $(".inner_row_id").val();
alert("Le click thyuu....");
});
Is there any one who suggest me what to do in this...
This should work
$(".row_id").click(function(e){
alert($(this).find('.inner_row_id').val());
})
The "click" function gives you access to this, which is the element that you clicked on. Find then looks for any decedents of the element which have class .inner_row_id.
Link to jsFiddle
As I see you are creating the input dynamically so use below JS:
$(".row_id").on('click',function(e){
var row_id = $(this).children('.inner_row_id').val();
alert("Le click thyuu....");
});
DEMO.
sorry for the bulk of code :)
I need to input a client name in the input textfield name clientname then i need to output the client information from my database when i click a button name loadcliinfo. But the problem is i don't know how will i get the data inputted in clientname? so I used $_POST['clientname']. The code is not working.
the code i pasted below is located on the same file.
<tr>
<td width="6"></td>
<td width="155">Client Name<font color="#990000">*</font></td>
<td width="218"><input type="text" name="clientname" id="clientname" required= "required" class="forinput" value="<?php echo $clientname ?>"/></td>
<td width="148"><input type="button" name="loadcliinfo" value="Load Client Info" onClick="loadclientinfo()"/></td>
</tr>
<tr>
<td width="6"></td>
<td width="155">Client Address<font color="#990000">*</font></td>
<td width="218"><p id="clientadd" class="readonly"></p></td>
<td width="148">Contact Name<font color="#990000">*</font></td>
<td width="230"><p id="clientcontactname" class="readonly"></p></td>
<td width="8"></td>
</tr>
<tr class="shade">
<td width="6"></td>
<td width="155">Email Address<font color="#990000">*</font></td>
<td width="218"><p id="clientemail" class="readonly"></p></td>
<td width="148">Contact No<font color="#990000">*</font></td>
<td width="230"><p id="clientaddcontact" class="readonly"></p></td>
<td width="8"></td>
</tr>
my php code
<?php
$name=isset($_POST['clientname'])? $_POST['clientname'] : '';
I get the data using this statement isset($_POST['clientname'])? $_POST['clientname'] : '' and store it in the variable $name but when i output the variable its empty.
$csql="Select address, email, contactperson, contactno from client where name='$name'";
$result=$db->prepare($csql);
$result->execute();
while($resu= $result->fetch(PDO::FETCH_ASSOC))
{
echo '<input type="hidden" id="add" value="'.$resu['address'].'"/>';
echo '<input type="hidden" id="email" value="'.$resu['email'].'"/>';
echo '<input type="hidden" id="contactperson" value="'.$resu['contactperson'].'"/>';
echo '<input type="hidden" id="contactno" value="'.$resu['contactno'].'"/>';
}
?>
My loadclientinfo function
<script>
function loadclientinfo()
{
var add=document.getElementById("add");
var email=document.getElementById("email");
var contactperson=document.getElementById("contactperson");
var contactno=document.getElementById("contactno");
document.getElementById("clientadd").innerHTML = add.value;
document.getElementById("clientemail").innerHTML = email.value;
document.getElementById("clientcontactname").innerHTML = contactperson.value;
document.getElementById("clientcontact").innerHTML = contactno.value;
}
</script>
I think getting data from clientname is the problem. Is there any way i could get the data from clientname on the same page?
thanks :D
$_POST and $_GET get their information from an html form (for the most part). You have the input fields, but no form. You need to have something along the following:
<form method="post" action="myphpscript.php">
<input type="text" .... >
<input type="submit" .... >
</form>
That method attribute is important because that determines what gets put into $_POST and what gets put into $_GET. Then your action will be the php script that it goes to. And lastly, those variables don't get stored into the local POST session (assuming your method is "post") until the submit button is hit. Now if you want to do this whole thing without refreshing the page, then you'll have to do a bit of AJAX work to call the PHP script when the "submit" button is hit.
But that's basically the problem. Nothing is getting put into local storage. Simply having a misc. input field doesn't do anything. If you don't want to use a form, then you'll have to figure out how to get the data some other way, without $_POST. You cooouulldd contruct a GET url then use $_GET but that's not typically recommended as the user can plainly see the variable values in the address bar like: (your url)?clientname=foobar.
More on PHP with POST and GET
I have a great working grid, dynamically populated from my database, powered by Grider, but when I AJAX change a grid value via document.getElemtnById, the cell value in the grid changes, but Grider does not recalculate using that value like it does when you enter your own value.
How can I make Gridr recalculate the grid once my document.getElementById AJAX updates the value of a cell?
Gridr: https://github.com/boriscy/grider/
for ($num = 0; $num<=5; $num++){
print "<tr>
<td style=\"display:none\"></td>
<td>
<select name=\"det[$num][item]\" onChange=\"getitemprice(this.value,$num);\">
$item_select
</select>
</td>
<td>
<input name=\"det[$num][price]\" id=\"price_$num\" type=\"text\" class=\"num\" value=\"10\" />
</td>
<td>
<input name=\"det[$num][quantity]\" type=\"text\" class=\"num\" value=\"1\" />
</td>
<td>
<input name=\"det[$num][discount]\" type=\"text\" class=\"num\" value=\"0\" />
</td>
<td style=\"display:none\"></td>
<td class=\"num\">
</td>
</tr>
";
}
$(document).ready(function(){
$('#table1').grider({countRow: true, countRowAdd: true});
});
i ended up just using:
document.getElementById('price_' + row).value = 200;
$('#price_' + row).trigger('change');
grider needed a trigger to calculate everything again, so I just made a trigger and it fired grider!
done.
I have array of checkboxes with the specified array textbox in the corresponding rows. If the user selects the particular checkbox, for example the first three checkboxes, I want to validate for the corresponding textboxes(empty validation). How can I make this? I have tried for the entire array textboxes and it works fine. But I want validation for the checked ones only. I give the code for your reference:
dml=document.forms['form1'];
// get the number of elements from the document
len = dml.elements.length;
for( i=0 ; i<len ; i++)
{
//check the textbox with the elements name
if (dml.elements[i].id=='noofdays[]')
{
// if exists do the validation and set the focus to the textbox
if (dml.elements[i].value=="")
{
alert("Please enter no of Days");
dml.elements[i].focus();
return false;
}
}
}
Thanks for your quick reply. But in my process . i am getting the checkbox value as id from my database. i have give my code for your referencce.
<? while(($count<$rpp) && ($i<$tcount))
{
mysql_data_seek($res,$i);
$_SESSION['cardid'][$i]=$row['id'];
$row = mysql_fetch_array($res);
?>
<tr>
<td align="center" bgcolor="#e9e9e9" class="running_text"><input name="id[]" type="checkbox" id="id[]" value="<?=$row['jobid']?>" onchange="enableTextField(this)" /></td>
<td height="28" align="center" bgcolor="#e9e9e9" class="running_text"><?=$row['jobtitle']?></td>
<td align="center" bgcolor="#e9e9e9" class="running_text"><?=$row['jobcategoryid']?></td>
<td align="center" bgcolor="#e9e9e9" class="running_text"><?=$row['practicename']?></td>
<td align="center" bgcolor="#e9e9e9" class="running_text"><?=$row['subscriptiontype']?></td>
<td width="82" align="center" bgcolor="#e9e9e9" class="running_text"><input type="text" size="1" value="0" name="noofdays[<?php echo $row['jobid']; ?>]" id="noofdays[]">
< /td>
<td width="28" align="center" bgcolor="#e9e9e9" class="running_text"><img src="images/view-detail-icon.png" width="16" height="16" title="View" /></td>
<td width="31" align="center" bgcolor="#e9e9e9" class="running_text"><a onClick="return del(<?=$row['jobid']?>)" class="deleteimage"><img src="images/Delete-icon.png" width="16" height="16" title="Delete" /></a></td>
</tr>
<? $i++;
$count++;
} ?>
Give your checkbox a value that will match a class name for your text inputs. Group your
text inputs with a class name.
<input type="checkbox" value="lips"/> <--------Grouper
<input type="text" class='lips' /> <-Groupeee
<input type="text" class='lips' /> <-Groupeee
<input type="text" class='lips' /> <-Groupee
<script type="text/javascript">
var ckBxs = document.querySelectorAll('input[type=checkbox]'),
i = ckBxs.length;
while (i--) {
ckBxs[i].onchange = checkBoxCheck;
};
function checkBoxCheck() {
var txBxs = document.getElementsByClassName(this.value),
i = cxBxs.length;
while (i--) {
switch (txBxs[i].class) {
case 'lips':
if (txBxs[i].value != 'To what ever your checking for')
{ alert('You\'re in focus Fool!'); };
break;
//
case 'nextClassGroup':
if (txBxs[i].value != 'To what ever your checking for')
{ alert('You\'re in focus Fool!'); };
break;
};
};
};
</script>