I'm trying create a form where when the "+" button is pressed, a new row of four input blank boxes is created. Now, when "+" is pressed, it copies the row (and anything typed in it) identically.
How can I create a blank row? How can I have only one "+" button rather than a new one on each new column?
Heres the page: http://myvirtualltciguy.com/Client_Intake_Meds.html
You can try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
Meds - Test
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="My Virtual LTCI Guy">
<meta name="keywords" content="My Virtual LTCI Guy">
<meta name="author" content="My Virtual LTCI Guy">
<link rel="stylesheet" href="http://myvirtualltciguy.com/css/ltci_style.css" type="text/css" media="screen" charset="utf-8">
<script type="text/JavaScript">
function addOneRow(){
//table
var table = document.getElementById('mytable');
//body of the table
var tabBody = table.getElementsByTagName("TBODY").item(0);
var numberRow = table.rows.length;
//***********Row
var row = table.insertRow(-1); // appends to the end
//columns
var column = row.insertCell(-1);
column.id = 'column_' + numberRow;
column.innerHTML = '<input name="button" type="button" value="+" onclick="addOneRow()" style="height:20px; font-size:11px;">';
column = row.insertCell(-1);
column.innerHTML = '<input type="text" name="textfield_a" style="width:105px;">';
column = row.insertCell(-1);
column.innerHTML = '<input type="text" name="textfield_b" style="width:105px;">';
column = row.insertCell(-1);
column.innerHTML = '<input type="text" name="textfield_c" style="width:105px;">';
column = row.insertCell(-1);
column.innerHTML = '<input type="text" name="textfield_d" style="width:105px;">';
column = row.insertCell(-1);
column.innerHTML = '<select name="select" style="visibility:hidden;"></select>';
tabBody.appendChild(row);
numberRow--;
var previousButton = document.getElementById('column_'+numberRow);
previousButton.innerHTML = "";
}
</script>
</head>
<body>
<div id="contain">
<div style="padding:20px 0px 10px 40px;">
<b>Medications:</b>
</div>
<div style="padding:0px 0px 0px 35px;">
<form action="" method="get">
<table id="mytable" width="604" cellpadding="5px">
<thead>
<tr>
<td width="35">
</td>
<td width="109">
Name:
</td>
<td width="106">
Dose:
</td>
<td width="112">
Frequency:
</td>
<td width="153">
Reason Prescribed:
</td>
<td width="13">
</td>
</tr>
</thead>
<tbody>
<tr>
<td id="column_1" width="24">
<input name="button" type="button" value="+" onclick="addOneRow()" style="height:20px; font-size:11px;">
</td>
<td width="105">
<input type="text" name="textfield_a" style="width:105px;">
</td>
<td width="105">
<input type="text" name="textfield_b" style="width:105px;">
</td>
<td width="105">
<input type="text" name="textfield_c" style="width:105px;">
</td>
<td width="105">
<input type="text" name="textfield_d" style="width:105px;">
</td>
<td width="56">
<select name="select" style="visibility:hidden;">
</select>
</td>
</tr>
</tbody>
</table>
</form>
</div><img src="http://myvirtualltciguy.com/img/ltci_line.png" style="padding:20px 0px 20px 40px;">
<div class="submit2">
<input type="submit" value="Submit" style="height:30px;">
</div>
</div>
</body>
</html>
Adding a new row with jQuery (doing DOM manipulation like this by hand is painfully tedious):
<table id="data">
<tr>
<td>
<label>
Foo
<input name="foo[]" />
</label>
</td>
<td>
<label>
Bar
<input name="bar[]" />
</label>
</td>
<td>
<label>
Baz
<input name="baz[]" />
</label>
</td>
<td>
<label>
Qux
<input name="qux[]" />
</label>
<button id="add">+</button>
</td>
</tr>
</table>
$(function() { // will run after the DOM tree loaded
$('#add').click(function() {
$('#add').detach();
$('#data tr:last').clone().val(null).insertAfter($('#data tr:last'));
$('#add').append('#data td:last');
});
});
Using input names like foo[] works nicely with PHP, which will return all the inputs in that column in an array named foo. If you don't want that, you have to change field names in the new row manually. Also, if you want an accessible site, you should have a non-javascript fallback for adding new rows... things get complicated from there.
Related
im planning to display my output thru innerHTML but the javascript cant seem to display my input just like i wanted. when user enter input into the form, i want to display the input by using innerHTML.
my attempt output is just in a normal list similar to something like this:
to students
output 1
output 2
output 3
to organizer
k1
k2
k5
<html>
<head>
<title>part b</title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<form onsubmit="printChecked()">
<table>
<tr>
<th colspan="2">
activities
</th>
</tr>
<tr>
<td colspan="2">
list 3 kind of activities that you interest
</td>
</tr>
<tr>
<td>
1. to students
</td>
<td>
<textarea name = "pelajar1" rows = "4" cols = "110"></textarea>
<textarea name = "pelajar2" rows = "4" cols = "110"></textarea>
<textarea name = "pelajar3" rows = "4" cols = "110"></textarea>
</td>
</tr>
<tr>
<td>
TO ORGANIZER
</td>
<td>
<input type="checkbox" name="kl" value="communication">K1
<br>
<input type="checkbox" name="kl" value="problems">K2
<br>
<input type="checkbox" name="kl" value="teamwork">K3
<br>
<input type="checkbox" name="kl" value="info">K4
<br>
<input type="checkbox" name="kl" value="business">K5
<br>
<input type="checkbox" name="kl" value="ethics">K6
<br>
<input type="checkbox" name="kl" value="leadership">K7
<br>
</td>
</tr>
</table>
<br><br>
<input type="Submit" value="Submit">
</form>
<script>
function printChecked()
{
var pel1 = document.getElementsByName('pelajar1');
var pel2 = document.getElementsByName('pelajar2');
var pel3 = document.getElementsByName('pelajar3');
var items=document.getElementsByName('kl');
var selectedItems="";
for(var i=0; i<items.length; i++){
if(items[i].type=='checkbox' && items[i].checked==true)
selectedItems+=items[i].value+"\n";
}
document.getElementsByName("pelajar1").innerHTML = pel1;
document.getElementsByName("pelajar2").innerHTML = pel2;
document.getElementsByName("pelajar3").innerHTML = pel3;
document.getElementsByName("kl").innerHTML = items;
}
</script>
</body>
</html>
try this and see console
<html>
<head>
<title>part b</title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<th colspan="2">activities</th>
</tr>
<tr>
<html>
<head>
<title>part b</title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<form onsubmit="printChecked">
<table>
<tr>
<th colspan="2">activities</th>
</tr>
<tr>
<td colspan="2">
list 3 kind of activities that you
interest
</td>
</tr>
<tr>
<td>1. to students</td>
<td>
<textarea
id="pelajar1"
rows="4"
cols="110"
></textarea>
<textarea
id="pelajar2"
rows="4"
cols="110"
></textarea>
<textarea
id="pelajar3"
rows="4"
cols="110"
></textarea>
</td>
</tr>
<tr>
<td>TO ORGANIZER</td>
<td>
<br />
<input
type="checkbox"
id="k1"
value="communication"
/>K1
<input
type="checkbox"
id="k2"
value="problems"
/>K2
<br />
<input
type="checkbox"
id="k3"
value="teamwork"
/>K3
<br />
<input
type="checkbox"
id="k4"
value="info"
/>K4
<br />
<input
type="checkbox"
id="k5"
value="business"
/>K5
<br />
<input
type="checkbox"
id="k6"
value="ethics"
/>K6
<br />
<input
type="checkbox"
id="k7"
value="leadership"
/>K7
<br />
</td>
</tr>
</table>
<br /><br />
<input
type="button"
onclick="printChecked()"
value="Submit"
/>
</form>
<div id="form"></div>
<script>
function printChecked() {
var pel1 =
document.getElementById("pelajar1");
var pel2 =
document.getElementById("pelajar2");
var pel3 =
document.getElementById("pelajar3");
var items = [];
for (let i = 0; i < 7; i++) {
var a = document.getElementById(
"k" + (i + 1),
);
a.checked ? items.push(a.value) : null;
}
console.log(
"1 : " +
pel1.value +
"\n2 :" +
pel2.value +
"\n3 :" +
pel3.value,
);
items.forEach((element) => {
console.log(element);
});
}
</script>
</body>
</html>
</tr>
</table>
</form>
</body>
</html>
Okay i am not so clear about what you want to achieve in here, i believe you want the form submit not to do submission and get the details in the function for some kind of computation , i use this as for a javascript approach for preventing default form submit
make use of a return function that returns false stating not to submit the form as in below example
if this satisfies your query, please refer=>
function printChecked() {
var pel1 = document.getElementsByName('pelajar1');
var pel2 = document.getElementsByName('pelajar2');
var pel3 = document.getElementsByName('pelajar3');
var items = document.getElementsByName('kl');
var selectedItems = "";
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'checkbox' && items[i].checked == true)
selectedItems += items[i].value + "\n";
}
console.log("pel1-data=> "+pel1[0].value);
console.log("pel2-data=> "+pel2[0].value);
console.log("pel3-data=> "+pel3[0].value);
console.log("checkbox-data=> "+selectedItems);
return false;
}
table,
th,
td {
border: 1px solid black;
}
<form onsubmit="return printChecked()">
<table>
<tr>
<th colspan="2">
activities
</th>
</tr>
<tr>
<td colspan="2">
list 3 kind of activities that you interest
</td>
</tr>
<tr>
<td>
1. to students
</td>
<td>
<textarea name="pelajar1" rows="4" cols="110"></textarea>
<textarea name="pelajar2" rows="4" cols="110"></textarea>
<textarea name="pelajar3" rows="4" cols="110"></textarea>
</td>
</tr>
<tr>
<td>
TO ORGANIZER
</td>
<td>
<input type="checkbox" name="kl" value="communication">K1
<br>
<input type="checkbox" name="kl" value="problems">K2
<br>
<input type="checkbox" name="kl" value="teamwork">K3
<br>
<input type="checkbox" name="kl" value="info">K4
<br>
<input type="checkbox" name="kl" value="business">K5
<br>
<input type="checkbox" name="kl" value="ethics">K6
<br>
<input type="checkbox" name="kl" value="leadership">K7
<br>
</td>
</tr>
</table>
<br><br>
<input type="Submit" value="Submit">
</form>
you can see return for onsubmit of form which gets value from the function printChecked() -> see last return statement in function
Additional
for jquery inside the called function definition we can just add the received event's preventDefault function
$("form").submit(function(event){
event.preventDefault();
});
Edit-> prints data on the same page using innerHtml
function printChecked() {
var pel1 = document.getElementsByName('pelajar1');
var pel2 = document.getElementsByName('pelajar2');
var pel3 = document.getElementsByName('pelajar3');
var items = document.getElementsByName('kl');
var selectedItems = "";
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'checkbox' && items[i].checked == true)
//selectedItems += items[i].value + "\n";
//add values as li elements
selectedItems += '<li>'+ items[i].value + '</li>';
}
//show list on submit
document.getElementById("toStudents").style.display = "block";
document.getElementById("toOrganizer").style.display = "block";
//add tostudents text area values in to list
document.getElementById("pelajar1").innerHTML=pel1[0].value;
document.getElementById("pelajar2").innerHTML=pel2[0].value;
document.getElementById("pelajar3").innerHTML=pel3[0].value;
//add toorganizer checkbox values in to list
document.getElementById("toOrganizer").innerHTML=selectedItems;
//just printing values in console
//console.log("pel1-data=> "+pel1[0].value);
//console.log("pel2-data=> "+pel2[0].value);
//console.log("pel3-data=> "+pel3[0].value);
//console.log("checkbox-data=> "+selectedItems);
return false;
}
table,
th,
td {
border: 1px solid black;
}
/*list is hidden at first*/
#toStudents,#toOrganizer{
display:none;
list-style:none;
}
<form onsubmit="return printChecked()">
<table>
<tr>
<th colspan="2">
activities
</th>
</tr>
<tr>
<td colspan="2">
list 3 kind of activities that you interest
</td>
</tr>
<tr>
<td>
1. to students
</td>
<td>
<textarea name="pelajar1" rows="4" cols="110"></textarea>
<textarea name="pelajar2" rows="4" cols="110"></textarea>
<textarea name="pelajar3" rows="4" cols="110"></textarea>
</td>
</tr>
<tr>
<td>
TO ORGANIZER
</td>
<td>
<input type="checkbox" name="kl" value="communication">K1
<br>
<input type="checkbox" name="kl" value="problems">K2
<br>
<input type="checkbox" name="kl" value="teamwork">K3
<br>
<input type="checkbox" name="kl" value="info">K4
<br>
<input type="checkbox" name="kl" value="business">K5
<br>
<input type="checkbox" name="kl" value="ethics">K6
<br>
<input type="checkbox" name="kl" value="leadership">K7
<br>
</td>
</tr>
</table>
<br><br>
<input type="Submit" value="Submit">
<h2>To Students</h2>
<ul id="toStudents">
<li id="pelajar1"></li>
<li id="pelajar2"></li>
<li id="pelajar3"></li>
</ul>
<h2>To Organizer</h2>
<ul id="toOrganizer">
</ul>
</form>
the issue you seem to be experiencing is from the page reloading on the form submit BEFORE the JS function is called. Based on your code, you are calling printChecked() onsubmit when the button is clicked.
To fix your issue, look into Stop form refreshing page on submit, which, among other things, would involve adding return false to your onsubmit call. Other solutions from the same page mention not using button type="submit", and instead focusing on using the type="button" with a separate call from there onclick.
Hopefully this helps!
Why i dont get the javascript value after calculation in input tag of my htm given
`id=""result"`
while i get this in span id and using document.write(num);
<?php include ('header.php'); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Calculator </title>
</head>
<body>
<form>
<table>
<tr>
<td>
<label style="padding-top: 5px" >Enter Your Per KG Price : </label>
</td>
<td style="padding-left:15px;">
<input type="tex" id="perkg" placeholder="Enter Per KG Price">
</td>
</tr>
<tr>
<td>
<label style="padding-top: 10px" >Enter Your Price : </label>
</td>
<td style="padding-left:15px; padding-top: 10px">
<input id="required" placeholder="Desired Amount">
</td>
</tr>
<tr>
<td>
<input type="button" onClick="multiply()" Value="Multiply" />
</td>
</tr>
<td>
<label style="padding-top: 10px" > Weight Given To Customer In Grams </label>
</td>
<td style="padding-left:15px; padding-top: 10px">
<input id="result" value="" placeholder="In Grams">
</td>
</tr>
</table>
<input type="button" onClick="divideBy()" Value="Divide" />
<p>The Result is : <br>
<span id = "results"></span>
</p>
</form>
<script type="text/javascript">
function multiply()
{
var num1 = document.getElementById("perkg").value;
var num2 = document.getElementById("required").value;
var num = (1000/num1) * num2;
document.getElementById("result").innerHTML = num;
//document.write(num); its working
}
</script>
</body>
</html>
To update input value attribute use value property instead of innerHTML
document.getElementById("result").value = num;
The function below is used to find the reference number then compare it, then if the corresponding value is found the cell values are modified according to the input boxes. This works great, however, how do I go about modifying the existing function below to capture the value between the
<td><div>this value here</div></td>
Here is the Javascript in question:
function changeit() {
var valueToFind = $('#number').val();
$('#data > tbody> tr').each(function(index) {
console.log(index);
var firstTd = $(this).find('td:first');
if ($(firstTd).text() == valueToFind) {
console.log("found: " + index + ":" + valueToFind);
$(this).find('td:eq(1)').text($('#item').val());
$(this).find('td:eq(2)').text($('#color').val());
}
})
}
Here is the HTML Markup:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
</head>
<body>
Number:*
<input type="text" id="number">
<br> Items:
<input type="text" id="item">
<br> Color:
<input type="text" id="color">
<br>
<br>
<input type="button" onclick="changeit()" value="save">
<br>
<table id="data" style="width: 100%" cellspacing="1" class="style1">
<tr>
<td>
<div><b>Number*</b></div>
</td>
<td>
<div><b>items</b></div>
</td>
<td>
<div><b>Colors</b></div>
</td>
</tr>
<tbody>
<tr>
<td>
<div>
<div>123</div>
</div>
</td>
<td>
<div>Boats</div>
</td>
<td>
<div>red</div>
</td>
</tr>
<tr>
<td>
<div>456</div>
</td>
<td>
<div>Vehicles</div>
</td>
<td>
<div>blue</div>
</td>
</tr>
<tr>
<td>
<div>789</div>
</td>
<td>
<div>Motorcycles</div>
</td>
<td>
<div>green</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
change
var firstTd = $(this).find('td:first');
to
var firstTd = $(this).find('td:first div');
I have index.jsp page.I am trying to call function on button click which will calculate sum of price column .But i get following error after running
Uncaught RangeError: Maximum call stack size exceeded in index.jsp
index.jsp is here
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Online Shopping</title>
<style>
tr, th, td{
padding:5px;border:1px solid black;border-collapse:collapse;
}
</style>
<script type="text/javascript" >
function onclick(){alert("in onclick")
var result=0;
var tableElem = document.getElementById(tableId);
var tableBody = tableElem.getElementsByTagName("tbody").item(0);
var i;
var howManyRows = tableBody.rows.length;
for (i=0; i<(howManyRows); i++)
{
var thisTrElem = tableBody.rows[i];
var thisTdElem = thisTrElem.cells[1];
var thisTextNode = thisTdElem.childNodes.item(0);
var thisNumber = parseFloat(thisTextNode.data);
if (!isNaN(thisNumber))
result += thisNumber;
} // end for
alert(result)
}
</script>
</head>
<body>
<h1 align="center">My Shopping</h1>
<table align="center" id="tableId" >
<thead >
<th>Book Name</th>
<th> Price(in Rs.)</th>
<th>Select</th>
</thead>
<tbody>
<tr align="center" >
<td>
Core java
</td>
<td>
200
</td>
<td>
<input type="checkbox" name="order">
</td>
</tr>
<tr align="center">
<td>
Advance java
</td>
<td>
300
</td>
<td>
<input type="checkbox" name="order">
</td>
</tr>
<tr align="center">
<td>
Rich dad poor dad
</td>
<td>
210
</td>
<td>
<input type="checkbox" name="order">
</td>
</tr>
</tbody>
</table>
<br/>
<div align="center">
<button style="background-color: yellow" onclick="onclick()">Add to cart</button>
</div>
Please help me
Thanks
You are calling onclick = onclick(). I think it's a recursion which will never end.
rename your function onclick to addToCart.
<button style="background-color: yellow" onclick="addToCart()">Add to cart</button>
And in the second line of function you are saying
document.getElementById(tableId); //it will return null because tableId is not defined wrap it in quotes
use
document.getElementById('tableId'); //
Currently, I have a two table rows with two textboxes. I want to buid a button which allows the user to add and subtract an author row depending on how many they want. Once they increase the amount of authors they need for input, the user clicks on the generate button, the input from the textboxes will be outputed at the bottom of the page. I was trying to pull this off with javascript and jQuery. I am a ten day old student with javascript and jQuery and feel as if I have bit off more than I can chew.
An example of what I want can be found at this lnk: http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/. However, I need the input from the textboxes outputed on the same page.
<!DOCTYPE html>
<head>
</head>
<body>
<table>
<tbody>
<tr>
<td>Author</td>
<td><input type="text" id="1" class="normalinput" placeholder="Last"></td>
<td><input type="text" id="2" class="normalinput" placeholder="First"></td>
</tr>
<tr>
<td>Second Author (If Any)</td>
<td><input type="text" id="3" class="normalinput" placeholder="Last"></td>
<td><input type="text" id="4" class="normalinput" placeholder="First"></td>
</tr>
</tbody>
</table>
<br>
<br>
<output id="20"></output>
<br>
<br>
</body>
</html>
<script type=text/javascript>
function myFunction()
{
var firstlast=document.getElementById("1").value;
if (firstlast==null || firstlast=="")
{
firstlast;
}
else if(firstlast!=null || firstlast!="")
{
firstlast=document.getElementById("1").value + ", ";
}
var firstfirst=document.getElementById("2").value;
if (firstfirst==null || firstfirst=="")
{
firstfirst;
}
else if(firstfirst!=null || firstfirst!="")
{
firstfirst=document.getElementById("2").value + ". ";
}
var secondlast=document.getElementById("3").value;
if (secondlast==null || secondlast=="")
{
secondlast;
}
else if(secondlast!=null || secondlast!="")
{
secondlast=document.getElementById("3").value + ", ";
}
document.getElementById("20").innerHTML = firstlast + firstfirst + secondlast;
}
</script>
The jQuery
//wait for the document to be ready
$(document).ready(function()
{
// when generate authors is clicked
$("#generate-authors").click(function()
{
// get the first author row in your table
var author = $(".author-row:first");
// for the amount of authors put into the text box
// insert a copy of the row after the last row
for(i = 0; i < parseInt($("#author-amount").val()); i++)
$(".author-row:last").after(author.clone());
});
// when output data is clicked
$("#output-data").click(function()
{
// go through all the author rows
$(".author-row").filter(function()
{
// add them to the output element
$("#output").append("<p>" + $(this).find("[placeholder=\"Last\"]").val() + ", " + $(this).find("[placeholder=\"First\"]").val() + ".</p>");
});
});
});
The html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
// put the script here
</script>
</head>
<body>
<input id="author-amount" type="text" />
<input id="generate-authors" type="button" value="Generate" />
<br />
<input id="output-data" type="button" value="Output Data" />
<table>
<tbody>
<tr class="author-row">
<td>Author</td>
<td><input type="text" id="1" class="normalinput" placeholder="Last"></td>
<td><input type="text" id="2" class="normalinput" placeholder="First"></td>
</tr>
</tbody>
</table>
<br />
<output id="output"></output>
</body>
</html>
See this Example might be this is that what you want
HTML
<table id="table">
<tbody>
<tr>
<td>Author</td>
<td><input type="text" id="1" class="normalinput" placeholder="Last"></td>
<td><input type="text" id="2" class="normalinput" placeholder="First"></td>
</tr>
<tr>
<td>Second Author (If Any)</td>
<td><input type="text" id="3" class="normalinput" placeholder="Last"></td>
<td><input type="text" id="4" class="normalinput" placeholder="First"></td>
</tr>
</tbody>
</table>
<input type="button" id="generat" value="add">
<input type="button" id="remove" value="remove">
<input type="button" id="display" value="display">
<output id="20"></output>
JS
$(document).ready(function(){
$("#generat").click(function(){
var clone = $("#table tr:first").clone();
$("#table tbody:last").append(clone);
});
$("#remove").click(function(){
$("#table tbody tr:last").remove();
});
$("#display").click(function(){
$("#20").html("");
$("table tr").each(function(){
$(this).find("input").each(function(){
$("#20").append(($(this).val()));
});
});
})
});
LINK