I have a problem with JavaScript. When I push the "Add" button I want to create a table with the listings from the form.
So for example:
New course: name: A, content: B => Add
|name|content
| A | B
And every new record comes to the end of the table.
Do you have an idea how can I do this? With PHP I would be easy but I want to do it with JavaScript.
My idea is to add this code into script:
document . addEventListener( 'DOMContentLoaded', registerCallbacks ); function registerCallbacks( ) { var addButton = document.getElementById( 'add‘ ); addButton.addEventListener( 'click', function( evt ){ add( ); evt.preventDefault( ); } );
document.addEventListener('DOMContentLoaded', registerCallbacks);
function registerCallbacks() {
var addButton = document.getElementById('add‘ ); addButton.addEventListener( '
click ', function( evt ){ add( ); evt.preventDefault( ); } );
<html>
<body>
<form id="new">
<label for="name">Name of lecture: <br>
<input class="text" type="text" id="name"></input><br>
<label for="content">Content: <br>
<textarea class="text" id="content"></textarea><br>
<button id="add"> Add </button>
</form>
<script>
</script>
</body>
</html>
So step one is to activate the button:
// Here we call the function Add() if someone clicks the button.
<button id="add" onclick="Add()"> Add </button>
Now we want to add the Javascript function Add() to our script:
function Add() {
// We request here all the information what the user fill out.
}
So here is a working snippet:
let table = document.getElementById("table");
function Add() {
// We request here all the information what the user fill out.
let name = document.getElementById("name").value,
content = document.getElementById("content").value;
// Add to table
table.innerHTML += "<tr><td>" + name + "</td><td>" + content + "</td></tr>"
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 3px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<label for="name">Name of lecture: <br>
<input class="text" type="text" id="name"><br>
<label for="content">Content: <br>
<textarea class="text" id="content"></textarea><br>
<button id="add" onclick="Add()"> Add </button>
<table id="table">
<tr>
<th>Lecture</th>
<th>Content</th>
</tr>
</table>
Hope this will work
$(document).ready(function() {
$("#add").click(function(){
var name=document.getElementById("name").value;
var content=document.getElementById("content").value;
$("#table").find('tbody').append("<tr><td class='column'>"+name+"</td><td class='column'>"+content+"</td></tr>");
});
});
<html>
<head>
<title>Add New Row</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.head {
border: 1px solid ;
background:#AEB6BF;
}
.column {
border: 1px solid ;
background:#EAEDED;
}
</style>
</head>
<body>
<label for="name">Name of lecture: <br>
<input class="text" type="text" id="name"></input><br>
<label for="content">Content: <br>
<textarea class="text" id="content"></textarea><br>
<button id="add"> Add </button>
<table id="table" class="head">
<thead>
<tr>
<td>Name</td>
<td>Content</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
</script>
</body>
</html>
Here's a way to achieve it:
var add_button = document.getElementById("add");
var name_field = document.getElementById("name");
var content_field = document.getElementById("content");
var table = document.getElementById("table");
add_button.addEventListener("click", function(e) {
e.preventDefault();
table.style = "display: block;";
table.innerHTML += "<tr><td>" + name_field.value + "</td><td>" + content_field.value + "</td></tr>"
});
<head>
<title>HTML Formular Table</title>
</head>
<body>
<form id="new">
<label for="name">Name of lecture: <br>
<input class="text" type="text" id="name"></input><br>
<label for="content">Content: <br>
<textarea class="text" id="content"></textarea><br>
<button id="add"> Add </button>
</form>
<table id="table" style= "display: none;">
<tr>
<th>Name</th>
<th>Content</th>
</tr>
</table>
Related
How can i add a content to html table with input fields.
For example here is html code:
function add(){
var name = document.getElementById("name");
var surname = document.getElementById("surname");
var output = document.getElementById("output");
output.innerHTML = "<tr><td>"+name+"</td><td>"+surname+"</td></tr>"
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Document</title>
<style>
table,td{
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<form action="">
<div>
<label for="name">Name</label>
<input type="text" id="name">
</div>
<div>
<label for="name">Surname</label>
<input type="text" id="surname">
</div>
</form>
<input type="button" onclick="add();" value="Add">
<div>
<table id="output">
<thead><td>Name</td><td>Surname</td></thead>
<tbody></tbody>
</table>
</div>
</body>
</html>
I want to output my input fields in the table like rows.. but it does not work i dont know where is my problem i get [object HTMLInputElement].
And how can i make it work for entering more values because like this i can only enter one row
How about using this code?
It adds surname and name below the thead.
function add(){
var name = document.getElementById("name");
var surname = document.getElementById("surname");
var output = document.querySelector("#output tbody");
output.innerHTML += "<tr><td>"+name.value+"</td><td>"+surname.value+"</td></tr>"
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Document</title>
<style>
table,td{
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<form action="">
<div>
<label for="name">Name</label>
<input type="text" id="name">
</div>
<div>
<label for="name">Surname</label>
<input type="text" id="surname">
</div>
</form>
<input type="button" onclick="add();" value="Add">
<div>
<table id="output">
<thead><td>Name</td><td>Surname</td></thead>
<tbody></tbody>
</table>
</div>
</body>
</html>
you should assign the value of the input fields like below.
function add(){
var name = document.getElementById("name");
var surname = document.getElementById("surname");
var output = document.getElementById("output");
output.innerHTML = "<tr><td>"+name.value+"</td><td>"+surname.value+"</td></tr>"
}
Try:
Give tbody an id to avoid removing thead
<tbody id="output2"></tbody>
function add(){
var name = document.getElementById("name");
var surname = document.getElementById("surname");
var output = document.getElementById("output2");
output.innerHTML = "<tr><td>" + name.value + "</td><td>" + surname.value + "</td></tr>";
}
You are trying to insert an HTML input element instead of the value of the element.
To make multiple entries possible try the last line of the function to:
output.innerHTML += "<tr><td>" + name.value + "</td><td>" + surname.value + "</td></tr>";
After click on submit button I get the result in innerhtml. I need to copy the results using the copy button. Please help me out....
Script mentioned below :enter link description here
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
.form-row{
margin-bottom:18px;
}
div {
background-color: lightblue;
width: 650px;
padding: 35px;
}
<!--<div> I don't think that you really want this here -->
</style>
</head>
<body>
<script type="text/javascript">
function getDisplay(){
var items=document.getElementsByName('acs');
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.getElementById("display").innerHTML = "Valid ID,POA docs received, "+"Profile Edited :"+selectedItems+", releasing.";
}
function getclear(){
document.getElementById("display").innerHTML = "";
var items = document.getElementsByName('acs');
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'checkbox') items[i].checked = false;
}
}
</script>
<div id="whole">
<font size="4">Profile Edited :</font>
<p>
<input type="checkbox" name="acs" value="Name" style="height:18px; width:18px;" ><font size="3"> Name</font>
<input type="checkbox" name="acs" value="Address" style="height:18px; width:18px;"><font size="3"> Address</font>
<input type="checkbox" name="acs" value="DOB" style="height:18px; width:18px;"><font size="3"> DOB</font>
<input type="checkbox" name="acs" value="No" style="height:18px; width:18px;"><font size="3"> No</font>
</p>
<p>
<button onclick="getDisplay();" style="height:30px; width:100px" >Submit</button>
<button onclick="getclear();" style=" height:30px; width:100px" >Clear</button>
<button onclick="getCopy();" style=" height:30px; width:100px" >Copy</button>
</p>
</div>
<font size="5">Notes:</font>
<div id="display"></div>
</body>
</html>
It is a bit tricky, because as it is not a TextElement you can not select() it as a text.
So what we do here is to get the innerText of the div element, then we create a Textarea element an we append the value, then we can select() it and copy it to the clipboard, here you have the working code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
.form-row{
margin-bottom:18px;
}
div {
background-color: lightblue;
width: 650px;
padding: 35px;
}
<!--<div> I don't think that you really want this here -->
</style>
</head>
<body>
<script type="text/javascript">
function getDisplay(){
var items=document.getElementsByName('acs');
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.getElementById("display").innerHTML = "Valid ID,POA docs received, "+"Profile Edited :"+selectedItems+", releasing.";
}
function getclear(){
document.getElementById("display").innerHTML = "";
var items = document.getElementsByName('acs');
for (var i = 0; i < items.length; i++) {
if (items[i].type == 'checkbox') items[i].checked = false;
}
}
function copyToClipBoard() {
var str = document.getElementById('display').innerText;
var el = document.createElement('textarea');
el.value = str;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
};
</script>
<div id="whole">
<font size="4">Profile Edited :</font>
<p>
<input type="checkbox" name="acs" value="Name" style="height:18px; width:18px;" ><font size="3"> Name</font>
<input type="checkbox" name="acs" value="Address" style="height:18px; width:18px;"><font size="3"> Address</font>
<input type="checkbox" name="acs" value="DOB" style="height:18px; width:18px;"><font size="3"> DOB</font>
<input type="checkbox" name="acs" value="No" style="height:18px; width:18px;"><font size="3"> No</font>
</p>
<p>
<button onclick="getDisplay();" style="height:30px; width:100px" >Submit</button>
<button onclick="getclear();" style=" height:30px; width:100px" >Clear</button>
<button onclick="copyToClipBoard();" style=" height:30px; width:100px" >Copy</button>
</p>
</div>
<font size="5">Notes:</font>
<div id="display"></div>
</body>
</html>
Ok, I think this is what you want...
Javascript:
function copyToClipboard() {
document.querySelector('#display').select();
document.execCommand('copy');
}
And I couldn't figure out how to take it from anything but an input, so if you do this, and then style the input with no borders so it doesn't look like an input...
<button id="copyToClipboard" onclick="copyToClipboard()" style=" height:30px; width:100px" >Copy</button>
<input id = "display" name="exampleClipboard" style="width:500px; border: none;" type="text">
I played around with the first answer and couldn't get it to work for me either. So I tried it this way. Note: I'm giving you a function that creates a dialog for testing. The actual function is shown below. But I switched to a textarea instead of a div which may not be quite what you want.
function innerHtmlTest() {
var html='<textarea rows="2" cols="40" id="display" style="border:none;">This is just a text string.</textarea>';
html+='<br /><input type="button" value="Copy" onClick="getHtml();" />';
html+='<br /><textarea rows="2" cols="40" id="dsply" placeholder="Paste Here"></textarea>';
html+='<script>function getHtml(){ document.getElementById("dsply").select();document.execCommand("copy");}</script>';
var userInterface=HtmlService.createHtmlOutput(html);
SpreadsheetApp.getUi().showModelessDialog(userInterface, "Copy");
}
function getHtml(){
document.getElementById("display").select();
document.execCommand("copy");
}
So perhaps you would like to change to a text area instead of a div. I use this technique with text boxes a lot but never tried it before with a div.
I'm creating a table with two fields, and I'm trying to do:
When I register an user, the username will be displayed, with this username when I click a button, the cell field will be filled with the username and the button will be hidden (ok until now).
When I click on the button of the second cell, this data will be passed to that cell and the past cell will be reset to the first name.
This second part I'm trying but seems impossible, what I can do for solve this?
<script>
var list = document.getElementById('users');
function addUser(){
var username = document.getElementById('username').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(username));
list.appendChild(entry);
return false;
}
var hidden = false;
function teste(){
hidden = !hidden;
if(hidden) {
document.getElementById('testebut').style.visibility = 'hidden';
var coe = document.getElementById('username').value;
document.getElementById('lbl1').innerHTML = "user: " + coe;
} else {
document.getElementById('testebut2').style.visibility = 'visible';
}
}
</script>
<style>
table, th, td {
border: 1px solid black;
}
</style>
<html>
<head>
</head>
<body>
<fieldset>
<form id="myform" onsubmit="return addUser()">
<h2>Add a User:</h2>
<input id="username" type="text" name="username" placeholder="name"/>
<input id="email" type="email" name="email" placeholder="email"/>
<button type="submit">add user</button>
</form>
<h2>UsersList:</h2>
<ul id="users"></ul>
</fieldset>
<table>
<tr>
<th>User</th>
<th>User</th>
</tr>
<tr>
<td id="lbl1">---<button id="testebut" onClick="teste();">X</button></td>
<td id="lbl2">---<button id="testebut2">X</button></td>
</tr>
</table>
</body>
</html>
I have made several changes to your code to achieve what in my opinion is you needed. Instead of events in HTML I created some event listeners using JavaScript. I hope this is of help to you.
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<fieldset>
<form id="myform" >
<h2>Add a User:</h2>
<input id="username" type="text" name="username" placeholder="name"/>
<input id="email" type="email" name="email" placeholder="email"/>
<button type="submit" id="addUserBtn">add user</button>
</form>
<h2>UsersList:</h2>
<ul id="users"></ul>
</fieldset>
<table>
<tr>
<th>User</th>
<th>User</th>
</tr>
<tr>
<td>
<span id="lbl1">---</span>
<button id="testebut">X</button>
</td>
<td>
<span id="lbl2">---</span>
<button id="testebut2">X</button>
</td>
</tr>
</table>
</body>
</html>
<script>
var list = document.getElementById('users');
if ( document.getElementById( "addUserBtn" ) ) {
document.getElementById( "addUserBtn" ).addEventListener( "click", function( e ) {
//prevent the page from reloading and add the user to the list
e.preventDefault();
addUser();
});
}
function addUser(){
var username = document.getElementById('username').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(username));
list.appendChild(entry);
}
//get all the teste buttons
let testeButtons = document.querySelectorAll( "button[id^='testebut']" );
//add event listener to all the teste buttons
for ( let i = 0; i < testeButtons.length; i++ ) {
testeButtons[ i ].addEventListener( "click", function( e ) {
teste( e.target.id );
});
}
function teste( id ){
let resetField = "---";
//this will only get the last username in the list
let userName = document.getElementById('username').value;
//check if clicked button is testebut and that it's not hidden
//then add the user name to the field and reset the other field
if ( id === "testebut" ) {
document.getElementById( "lbl1" ).innerHTML = "user: " + userName;
document.getElementById( "lbl2" ).innerHTML = resetField;
} else if ( id === "testebut2" ) {
document.getElementById( "lbl2" ).innerHTML = "user: " + userName;
document.getElementById( "lbl1" ).innerHTML = resetField;
}
}
</script>
We will have a set of records where the user will select what color they want that section to be. As you can see I'm duplicating script code so that I can change the colors of a div. This value will be stored in mysql and retrieved when the user access the page again. Is there a way to format this code so that it's not duplicated 500 times? Thank you for your help. --newbie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.3.min.js"></script>
<style type="text/css">
#full {
background-color: #ffffff;
}
</style>
<title></title>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function(){
$(".theme").change(function()
{var background = $("#color1").val();
$("#full").css("background-color", background);
});
$(".theme2").change(function()
{var background = $("#color2").val();
$("#full2").css("background-color", background);
});
$(".theme3").change(function()
{var background = $("#color3").val();
$("#full3").css("background-color", background);
});
});
});//]]>
</script>
<link rel="stylesheet" href="css/color_picker.css" type="text/css" />
<script language="javascript" type="text/javascript" src="js/jquery.colorpicker.js"/></script>
<script type="text/javascript">
//Run the code when document ready
$(function() {
$('#color1').colorPicker({showHexField: false});
$('#color2').colorPicker({showHexField: false});
});
</script>
</head>
<body>
<body >
<label for="color">Color :</label> </td><td>
<div id="full">
<form method="post" action="">
<input id="color1" type="hidden" name="color1" value="" class="theme"/>
</div>
<div id="full2" border="1" width="100%">
<input id="color2" type="hidden" name="color2" value="" class="theme2"/>
</div>
<div id="full3" border="1" width="100%">
<input id="color3" type="hidden" name="color3" value="" class="theme3"/>
</div>
</form>
</body>
instead of using Id's, you can use classes like full and theme, so your html for any given set would look like
<form method="post" action="">
<div class="full">
<input id="color1" type="hidden" name="color1" value="" class="theme"/>
</div>
<div class="full" border="1" width="100%">
<input id="color2" type="hidden" name="color2" value="" class="theme"/>
</div>
<div class="full" border="1" width="100%">
<input id="color3" type="hidden" name="color3" value="" class="theme"/>
</div>
</form>
Then your javascript would look like
$('.theme').change(function() {
var $this = $(this);
var background= $this.val();
$this.closest('.full').css("background-color", background);
})
edit: fixed bug, changed from parent to closest so that .full doesn't have to be a direct parent of the input.
You can achieve this with a simple for loop.
If the number of colors is not static you can use the jquery "starts with" selector to get all of the elements and then take the length.
$(window).load(function(){
$(document).ready(function(){
//if the count is static you can just hardcode it
var colorCount = $("[id^='color']").length;
for(var i = 1; i <= colorCount; i++) {
var color = "#color" + i;
var full = "#full" + i;
var theme = ".theme" + i;
//only necessary because your first div does not have the number
if(i === 1) {
full = "#full";
theme = ".theme";
}
$(".theme").change(function()
{
var background = $(color).val();
$(full).css("background-color", background);
});
}
});
});
Below is a working snippet. There were some issues with your HTML, and I'm not sure if you were setting the .change() event intentionally, but for the demo I just changed it directly.
$(window).load(function(){
$(document).ready(function(){
var colorCount = $("[id^='color']").length;
for(var i = 1; i <= colorCount; i++) {
var color = "#color" + i;
var full = "#full" + i;
var theme = ".theme" + i;
//only necessary because your first div does not have the number
if(i === 1) {
full = "#full";
theme = ".theme";
}
var background = $(color).val();
$(full).css("background-color", background);
}
});
});
.color-box {
background-color: #ffffff;
border: solid 2px black;
min-height: 30px;
margin: 5px;
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.4.3.min.js"></script>
<label for="color">Color :</label>
<form method="post" action="">
<div id="full" class="color-box">
<input id="color1" type="hidden" name="color1" value="lightblue" class="theme"/>
</div>
<div id="full2" class="color-box">
<input id="color2" type="hidden" name="color2" value="#226666" class="theme2"/>
</div>
<div id="full3" class="color-box">
<input id="color3" type="hidden" name="color3" value="rgba(140,15,110,.6)" class="theme3"/>
</div>
</form>
I am new in angular js. I am creating a small app using angular. This is my code:
<input type="text" ng-model="one" ng-change="sum()">
<input type="text" ng-model="two"ng-change="sum()">
<input type="text" ng-model="three"ng-change="sum()">
<input type="text" ng-model="total" >
Controller Code:
$scope.sum = function(){
$scope.total = parseInt($scope.one) + parseInt($scope.two) + parseInt($scope.three)
}
The sum of all fields works perfectly. But now i want to do when user change the total value then the other fields set the values according the value in total field.
Are You Expecting this??
#test {
background: white;
border: 1px double #DDD;
border-radius: 5px;
box-shadow: 0 0 5px #333;
color: #666;
outline: none;
height:25px;
width: 275px;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr><td><b>Value1</b></td><td> <input type="text" id="test" ng-model="one" ng-change="sum()" /></td></tr>
<tr></tr>
<tr><td><b>Value 2</b></td><td><input id="test" type="text" ng-model="two" ng-change="sum()" /></td></tr>
<tr></tr>
<tr><td><b>Value 3</b> </td><td><input id="test" type="text" ng-model="three" ng-change="sum()" /></td></tr>
<tr></tr>
<tr><td><b>Total</b> </td><td><input id="test" type="number" ng-model="total" ng-change="newsum()"/> </td></tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.sum = function(){
$scope.total = parseInt($scope.one) + parseInt($scope.two) + parseInt($scope.three)
}
$scope.newsum = function(){
if($scope.total){
var div=$scope.total/3;
var mod=$scope.total%3;
if(mod==0){
$scope.one=div;
$scope.two=div;
$scope.three=div;
}
else{
var str=''+div;
var deci=parseInt(str.split(".")[0]);
$scope.one=deci;
$scope.two=deci;
$scope.three=deci+mod;
}
}
else{
alert("Please Enter the number");
}
}
});
</script>
</body>
</html>