<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);
}
Related
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
I'm making a code where if you press the button after the name it will move to the other list. Pressing a button give me the error: "missing ) after argument list". I can't seem to find anything wrong in the code.
<!DOCTYPE html>
<html>
<title>Favoritter</title>
<body>
<p>Hotell</p>
<p id="hotellDiv"></p>
<p>Favoritter</p>
<p id="favDiv"></p>
</body>
<script>
let hotelliste = ["Norwegian Wild", "Stofjord Hotel", "Norefjell Ski og Spa", "Brikdalsbre Fjellstove", "Gudvangen Fjordtell"];
let favoritter = [];
skrivhliste();
skrivfliste();
function skrivhliste(){
document.getElementById("hotellDiv").innerHTML = "";
for (var j = 0; j < hotelliste.length; j++){
document.getElementById("hotellDiv").innerHTML += hotelliste[j] + "<input type=\"button\" onclick=\"leggTil("+hotelliste[j]+")\"><br>";
}
}
function skrivfliste(){
document.getElementById("favDiv").innerHTML = "";
for (var j = 0; j < favoritter.length; j++){
document.getElementById("favDiv").innerHTML += favoritter[j] + "<input type=\"button\" onclick=\"fjern("+favoritter[j]+")\"><br>";
}
}
function leggTil(hotell){
if (hotelliste.indexOf(hotell) > -1) {
hotelliste.splice(hotelliste.indexOf(hotell), 1);
}
favoritter.push(hotell);
skrivhliste();
}
function fjern(hotell){
if (favoritter.indexOf(hotell) > -1) {
favoritter.splice(favoritter.indexOf(hotell), 1);
}
hotelliste.push(hotell);
skrivfliste();
}
</script>
</html>
Look at this:
"<input type=\"button\" onclick=\"fjern("+favoritter[j]+")\">
What string are you going to end up with when you insert the value of favoritter[j]?
<input type="button" onclick="fjern(Norwegian Wild)">
There you don't have the string "Norwegian Wild", you have the variable Norwegian followed by a space followed by the variable Wild (and neither of those variables exist).
If you are programatically generating JavaScript then you need to generate the quotes that go around strings you generate.
This is hard to do well. Especially when that JS gets embedded in HTML that you are also generating on the fly. You have multiple levels of escape sequences to deal with.
Avoid generating strings like this. Use direct DOM methods instead.
For example:
Once, so it can be reused:
function clickHandler(event) {
const button = event.currentTarget;
const hotel = button.dataset.hotel;
leggTil(hotel);
}
Then inside your loop:
const button = document.createElement('input');
button.type = 'button';
button.value = 'display label';
button.dataset.hotel = hotelliste[j];
button.addEventListener('click', clickHandler);
document.getElementById("hotellDiv").appendChild(button);
Your code is ok, please make a string into onclick function like below.
Pass the value in single quotes into both onclick function.
document.getElementById("favDiv").innerHTML += favoritter[j] + "<input type=\"button\" onclick=\"fjern('"+favoritter[j]+"')\"><br>";
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.
I'm working on a personal project and I've run into an issue that I haven't been able to solve.
Here is a function that generates new table rows into a table (with id of "tableData") when a button is clicked:
function addNewRow(){
var tableEl = document.getElementById("tableData");
var newLine = '<tr class="newEntry">';
var classArray = ["classA", "classB", "classC", "classD"];
for (var i = 0; i < classArray.length; i++){
newLine += '<td><input class="' + classArray[i] + '"></td>';
}
newLine += '</tr>';
tableEl.insertAdjacentHTML("beforeend", newLine);
}
document.getElementById("addRow").addEventListener("click", addNewRow, false);
//the element with id="addRow" is a button
I've simplified the code for the above function for the sake of readability as it's not the focus of the problem. When the button is clicked, a new row is added successfully.
The problematic part involves another function that takes the sum of the respective classes of each row and displays them in a div.
The goal is to get the sum of the values of all input fields with matching class names. For example, let's say I use the addNewRow function to get six rows. Then I want to have the div showing the sum of the values of all input fields with the class name of "classA"; the number in that div should be the sum of those six values, which gets updated as I type in the values or change the existing values in any of the input fields with class name of "ClassA".
function sumValues(divId, inputClass){
var sumVal = document.getElementsByClassName(inputClass);
var addedUp = 0;
for (var j = 0; j < sumVal.length; j++){
addedUp += Number(sumVal[j].value);
}
document.getElementById(divId).innerHTML = addedUp;
}
Here are a couple (out of several) failed attempts:
document.input.addEventListener("keyup", sumValues("genericDivId", "classA"), false);
document.getElementsByClassName("classA").onkeyup = function(){sumValues("genericDivId", "classA");}
Unfortunately, after scouring the web for a solution and failing to find one, I just added an event listener to a button that, when clicked, would update the div to show the sum of values. Also had to modify the sumValues function to take values from an array rather than accepting arguments.
My question is: How can I modify the code so that the sum value updates as I type in new values or change existing values using pure Javascript (vanilla JS)?
You are very close, document.getElementsByClassName() returns an array of DOM objects, you need to set the onkeyup function for each and every element by looping through that array.
var classA = document.getElementsByClassName('classA'); // this is an array
classA.forEach(function(elem){ // loop through the array
elem.onkeyup = function(){ // elem is a single element
sumValues("genericDivId", "classA");
}
}
Hopefully this fixes your issue
Maybe the example below is not same with your situation, but you'll get the logic, easily. Anyway, do not hesitate to ask for more guide.
document.getElementById("row_adder").addEventListener("click", function() {
var t = document.getElementById("my_table");
var r = t.insertRow(-1); // adds rows to bottom - change it to 0 for top
var c = r.insertCell(0);
c.innerHTML = "<input class='not_important_with_that_way' type='number' value='0' onchange='calculate_sum()'></input>";
});
function calculate_sum() {
var sum = ([].slice.call(document.querySelectorAll("[type=number]"))).map(e=>parseFloat(e.value)).reduce((a, b) => a+b);
document.getElementById("sum").innerHTML = sum;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<p>
<strong>Sum</strong>:<span id="sum">0</span>
</p>
</div>
<button id="row_adder">
Click me
</button>
<table id="my_table">
</table>
</body>
</html>
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?