Call Javascript from recurring loop with incremental IDs - javascript

I have this php site and i use javascript with it.
One of the pages is an entry form with 10 lines to enter data in.
One line in this case would be coded in this way:
echo "<td style='border-width: 0'><input type='text' id = 'price1' style = 'font-size: 10px' name='poline1[price]' size='7'></td>";
Right next to this input field there is a button:
echo "<td style='border-width: 0'><a href = 'javascript:void(0)' onClick = 'copyRow1;' class='button6'>Copy Down</a></td>";
Javascript function copyRow1 is as follows:
<script type="text/javascript">
function copyRow1() {
document.fabricorder.price2.value = document.fabricorder.price1.value;
}
</script>
It copies inputted value from input box ID = price1 into input box ID = price2.
I have 10 Javascript functions like this
copyRow1(), copyRow2(), copyRow3(), etc....
It works fine but I am trying to optimize all the code to make it easier for modifications and now I want to loop all my lines.
So I want change my line script in this way:
for ($i = 1; $i <= 10; ++$i){
echo "<tr>";
echo "<td style='border-width: 0'><input type='text' id = 'price$i' style = 'font-size: 10px' name='poline[$i][price]' size='7'></td>";
echo "<td style='border-width: 0'><a href = 'javascript:void(0)' onClick = 'copyRow($i);' class='button6'>Copy Down</a></td>";
echo "</tr>";
}
and my function this way:
<script type="text/javascript">
function copyRow(i) {
document.fabricorder.price(i+1).value = document.fabricorder.price(i).value;
}
</script>
Unfortunately this doesn't work. What am i doing wrong?

Try modifying your copyRow function to:
function copyRow(i) {
for (var j=i,numRows=document.fabricorder.length;j<numRows;j++) {
document.fabricorder["price"+(j+1)].value = document.fabricorder["price"+(j+1)].value;
}
}
You need to loop over all input fields, copying each value to the next. It's hard to give you 100% working code without seeing 100% of your code. Can you put it in a JSFiddle?

Related

Display script variables in table td

I want to display a calculated value in a table without using input..
Here is my script....
<script type="text/javascript">
function totalIt() {
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementsByName("total")[0].value = total.toFixed(0);
}
</script>
and my html is....
echo "<td align='right' data-label='Option Prices'> **DISPLAY THE VALUE HERE** </td>";
If I am reading your question correctly you can use the following (i.e., you want to display the calculated value without using an input field):
document.querySelector('[data-label="Option Prices"]').innerText = total.toFixed(0);
If you want to format your answer like "15,900" which is a US English locale standard use the following
document.querySelector('[data-label="Option Prices"]').innerText = new Intl.NumberFormat().format(total.toFixed(0))
More types of formatting and documentation here

HTML form select to drive PHP/SQLSRV results

I'm working on a very basic web page to facilitate data entry. I have it working with PHP talking to SQL Server to both enter and display data. At the simplest level, they'll select a store from a dropdown and enter some data, then hit submit.
I'm trying to dynamically display the last 7 days worth of data when their store is chosen from the form select input. How do I get the Select value to drive the SQL query? I found how to use onchange to fire a javascript function, which I can alert the value. Do I really need to then use jquery or AJAX to link that back to the PHP select query or is there a simpler way to approach this?
I'm trying to learn this all from scratch and am quite admittedly out of my element. Here are some snippets of what I've got:
...
<script>
function OnSelectChange(obj)
{
alert(obj.options[obj.selectedIndex].value);
}
</script>
...
<td align="right">Store</td><td width="125"><select style="width:100%" name="store" onchange="OnSelectChange(this)">
...
<?php
$tsql = "select * from test where DateStamp >= getdate()-7";
$stmt = sqlsrv_query($conn, $tsql);
//generate table view of data
echo "<table>";
echo "<tr><td>Store ID</td><td>Date</td><td>Data</td></tr>";
while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC))
{
$StoreID = $row['StoreID'];
$DateStamp = $row['DateStamp'];
$Donations = $row['Data'];
echo "<tr><td>".$StoreID."</td><td>".$DateStamp."</td><td>".$Data."</td></tr>";
}
echo "</table>";
?>
I've found a lot of helpful information to get me this far, but am stuck now.
Thank you in advance.
Got it! For anyone else looking, here are relevant snippets of code:
<style>
.hideable {
visibility: collapse;
}
</style>
...
<script language="JavaScript">
function OnSelectChange(cl)
{
var els = document.getElementsByClassName('hideable');
for(var i=0; i<els.length; ++i){
var s = els[i].style;
s.visibility = 'collapse';
};
var els = document.getElementsByClassName(cl);
for(var i=0; i<els.length; ++i){
var s = els[i].style;
s.visibility = 'visible';
};
}
</script>
...
<select style="width:100%" name="store" onchange="OnSelectChange(this.value)">
...
echo "<tr class='hideable ".$StoreID."'><td>".$StoreID."</td><td>".$DateStamp."</td><td>".$Data."</td></tr>";
Leveraging dual classes upon the table (tr) creation and the collapse CSS style property was key.

Why does using innerHTML in javascript echo extra quotation?

I have PHP page have textbox with button and when click on button text in text box insert to database and textbox change to label and that text show on label but when i change label text with javascript echo extra quotation :
php code:
echo "<label id='crlabel".$counterRecord."'></label>";
echo "<input name='cr_number1' id='cr_number".$counterRecord."' type='text'>";
echo "<input class='pad' type='button' id='cr".$counterRecord."' style='background-color:#428bca' value='s'>";
js code:
for (var i = 1; i < 21; i++) {
(function(cr) {
$("#cr"+cr).click(function () {
$.get("cr.php", {
id: $("#recordid"+cr).val(),
cr_number:'"' +$("#cr_number"+cr).val()+ '"'
},function(data){if(data =="cr"){
alert("cr submitted before you");}else{
$("#cr_number"+cr).fadeOut(500);
$("#cr"+cr).fadeOut(500);
document.getElementById('crlabel'+cr).innerHTML = data;
$("#crlabel"+cr).fadeIn(500);});
}
});
})(i);}
cr.php:
$cr_number=$_GET['cr_number'];
if ($row["cr_number"]!=""){
echo "cr";}
else{mysql_query("UPDATE cr SET cr_number=".$cr_number." WHERE id=".$id.";",$con);echo $cr_number;}
this code work fine but i doesn't like extra qoutation start and end of data show
example: "3443"
what I want:3443
You pass the following data
{
id: $("#recordid"+cr).val(),
cr_number:'"' +$("#cr_number"+cr).val()+ '"'
}
where you add a quote to the start and end of cr_number. As a result $_GET['cr_number'] will hold those quotes inside the values and when you
echo $cr_number;
the quotes will be in the response. So the response contains the quotes and when you put it into innerHTML, it will contain them. To modify this behavior to not contain the quotes, make sure you do not add them in the first place to the data:
{
id: $("#recordid"+cr).val(),
cr_number:$("#cr_number"+cr).val()
}

remain the value of input after hide

I have an edit function where their is a function that has hide/show if i click edit. My problem is how can i remain the value of row if im going to hide it?
for example i have this dialog
and decided to edit sample 1(first row)
and then i decided i realize that i dont want to edit sample 1 then close it (by clicking edit again) then i want to edit sample 5 but i got this error
here is my script
//show and hide update button checker
function update_contain(){
var row = jQuery(".beneficiaries_rows input[type='text']:visible").length;
if(row > 0){
jQuery('.ui-dialog-buttonpane button:contains("Update")').button().show();
}else{
jQuery('.ui-dialog-buttonpane button:contains("Update")').button().hide();
}
}
//beneficiaries edit
jQuery(".edit_beneficiaries").click(function(){
var row = jQuery(this).closest(".beneficiaries_rows");
var show = row.find(".hide");
var hide = row.find(".show");
if(jQuery(show).is(":visible")){
jQuery(show).css({"display":"none"});
jQuery(hide).css({"display":"inline-block"});
}else{
jQuery(hide).css({"display":"none"});
jQuery(show).css({"display":"inline-block"});
}
update_contain();
});
HTML
<table style="border: 2px solid black;margin:auto;">
<tr>
<th style="width:145px;"><center>Name<center></th>
<th><center>Action</center></th>
</tr>
<?php
while($row1 = mysql_fetch_array($result1)){
echo "<tr class='beneficiaries_rows' id='".$row1['id']."' data-id='".$row1['ben_id']."'>";
echo "<td><input class='hide' type='text' name='bename_update' value='".$row1['name']."'></div>";
echo "<div class='show'>".$row1['name']."</td>";
echo "<td>";
echo "<center><button class='del_beneficiaries'>X</button><button class='edit_beneficiaries'>Edit</button></center>";
echo "</td>";
echo "</tr>";
}
?>
</table>
P.S im not good in english thats why im posting a picture to elaborate
my question
You'll want to set the text inside your label with something like this
jQuery("[selector for your label]").html(jQuery("[selector for input]").val());
I suggest doing this on click, just before you hide the input.
edit; since you're not really following:
jQuery(".edit_beneficiaries").click(function(){
var row_display = jQuery(this).parents("tr").find(".show");
var row_edit = jQuery(this).parents("tr").find(".hide");
jQuery(row_display).html(jQuery(row_edit).val());
});

How to get value from multiple different textbox through javascript

<html>
<head>
<script>
function showUser()
{
for (var i = 0; i < 10; i++)
{
var internal = document.getElementById("inte[i]").value; /* but its not working */
var external = document.getElementById("exte[i]").value;
}
}
</script>
</head>
<body>
<?php
for (i = 0; i < 10; i++)
{
echo "<td><input type='text' name='internal' id = 'inte[$i]' width='30'/> </td>";
echo "<td><input type='text' name='external' id = 'exte[$i]' width='30'/> </td>";
}
echo "<td><input type='submit' name='submit1' value='Save Marks' width='30' onclick = 'showUser()' /></td>";
?>
</body>
<html>
i am using the above code but i cant get 10 values of different textboxes
how to fetch these value through java script and i want to save it to database kindly help me
i am using the above code but i cant get 10 values of different textboxes
how to fetch these value through java script and i want to save it to database kindly help me
You are not placed i value in getElementById
Replace your
document.getElementById("inte[i]").value;
as
document.getElementById("inte["+i+"]").value;
Make your for loop as
for (var i=0; i<10; i++)
{
var internal = document.getElementById("inte["+i+"]").value; /* but its not working */
var external = document.getElementById("exte["+i+"]").value;
}
This isn't doing what you think:
getElementById("inte[i]")
That's just a string, the i value doesn't get interpreted into an integer. This would:
getElementById("inte[" + i + "]")
When your Javascript for loop runs you are are overwriting your var internal and external each time so after the for loop runs you will only have the last value that was assigned to the variables. You should use an array and push the values of the text boxes into it.
var internal = new Array();
var external = new Array();
for (var i=0; i<10; i++)
{
internal.push(document.getElementById("inte["+i+"]").value); /* but its not working */
external.push(document.getElementById("exte["+i+"]").value);
}

Categories