I'm working on dynamic 3 column table that has 3 input text type : Product, quantity and date
This works good but i want to change type format:
Product column => Dropdown type
Quantity column => number type
Date column => Date type (dd-mm-yyyy)
How i do change it?
Thank you
Original source: link
Code online: https://jsfiddle.net/bvotcode/r61ptxe9/7/
HTML
<body>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Date</th>
</tr>
<tr id="row1">
<td id="product_row1">Car</td>
<td id="quantity_row1">10</td>
<td id="date_row1">20/12/2021</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td id="product_row2">Book</td>
<td id="quantity_row2">22</td>
<td id="date_row2">26</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
</td>
</tr>
<tr id="row3">
<td id="product_row3">Laptop</td>
<td id="quantity_row3">44</td>
<td id="date_row3">19/01/2022</td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
<input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
<input type="button" value="Delete" class="delete" onclick="delete_row('3')">
</td>
</tr>
<tr>
<td><input type="text" id="new_product"></td>
<td><input type="text" id="new_quantity"></td>
<td><input type="text" id="new_date"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
</div>
</body>
</html>
</body>
CSS
.pt-3-half { padding-top: 1.4rem; }
Javascript
function edit_row(no)
{
document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block";
var product=document.getElementById("product_row"+no);
var quantity=document.getElementById("quantity_row"+no);
var date=document.getElementById("date_row"+no);
var product_data=product.innerHTML;
var quantity_data=quantity.innerHTML;
var date_data=date.innerHTML;
product.innerHTML="<input type='text' id='product_text"+no+"' value='"+product_data+"'>";
quantity.innerHTML="<input type='text' id='quantity_text"+no+"' value='"+quantity_data+"'>";
date.innerHTML="<input type='text' id='date_text"+no+"' value='"+date_data+"'>";
}
function save_row(no)
{
var product_val=document.getElementById("product_text"+no).value;
var quantity_val=document.getElementById("quantity_text"+no).value;
var date_val=document.getElementById("date_text"+no).value;
document.getElementById("product_row"+no).innerHTML=product_val;
document.getElementById("quantity_row"+no).innerHTML=quantity_val;
document.getElementById("date_row"+no).innerHTML=date_val;
document.getElementById("edit_button"+no).style.display="block";
document.getElementById("save_button"+no).style.display="none";
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var new_product=document.getElementById("new_product").value;
var new_quantity=document.getElementById("new_quantity").value;
var new_date=document.getElementById("new_date").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='product_row"+table_len+"'>"+new_product+"</td><td id='quantity_row"+table_len+"'>"+new_quantity+"</td><td id='date_row"+table_len+"'>"+new_date+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_product").value="";
document.getElementById("new_quantity").value="";
document.getElementById("new_date").value="";
}
You're using the type="text" for all of the <input> tags. You should consider changing the type of the inputs in your edit_row function.
For numbers, the type of input should be number;
For dates, date;
And finally, to render a dropdown box, the best solution is to use a <select> tag instead of an <input>. Don't forget to write all the options of your dropdown inside of <option> tags (which should be all inside of one <select> tag); Here you can find a simple explanation on how to use the <select> tag.
Related
I cant get any of the buttons using onclick to recognise the functions. I get an error "cant find variable". Im very new to all this and at a loss. It doesn't matter which button I click I have the same issues with all of them.
in the below code,
I click on <button onclick="show_admin()">Admin</button> which should call function show_admin().. What am I doing wrong please.
Inspector output
const char main_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset='UTF-8'">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="refresh" content="500; url=/">
<title>System Settings</title>
<body onload="show_admin()">
<div class="banner">
<h1>X Controller</h1>
</div>
<div class="split left">
<div class="centered">
These are my button
<button onclick="show_admin()">Admin</button>
<br/>
<button onclick="show_wifi()">WIFI</button>
<br/>
<button onclick="show_tags()">Tags</button>
<br/>
</div>
</div>
<div class="split right">
<div class="centered" id="showdata">
</div>
</div>
</body>
<script>
These are my functions
function show_admin() {var table_data = <h1>Admin Settings</h1><br/>%s<br/>
<form action="/ADMINSetting" method="POST">
<table><tr>
<td> User Name </td> <td> <input type="String" name="UserName" placeholder="%s"></td>
</tr><tr>
<td> Password </td> <td> <input type="String" name="UserPass" placeholder="%s">
</td></tr></table>
<input type="submit" value="Update Admin Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
function show_wifi() { var table_data = <h1>WIFI Settings</h1><br/>%s<br/>
<form action="/WIFISetting" method="POST">
<table>
<tr>
<td> SSID Network </td> <td> <input type="String" name="WifiSsid" placeholder="%s"></td>
</tr><tr>
<td> SSID Password </td> <td> <input type="String" name="SsidPass" placeholder="%s"></td>
</tr>
</table>
<input type="submit" value="Update Wifi Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
function show_tags() { let table_data = <h1>Tag Settings</h1><br/>%s<br/>
<form action="/DEVICESetting" method="POST">
<table>
<tr>
<td> Access Tag 1 </td> <td> <input type="String" name="TAG1" placeholder="%s"></td>
</tr>
<tr>
<td> Access Tag 2 </td> <td> <input type="String" name="TAG2" placeholder="%s"></td>
</tr>
<tr>
<td> Cleaner Tag 1 </td> <td> <input type="String" name="CTAG1" placeholder="%s"></td>
</tr>
</table>
<input type="submit" value="Update BLE Tag Details">
</form>
document.getElementById("showdata").innerHTML = table_data
}
</script>
</body>
</html>
)=====";
I have tried rearranging the function and moving its position. with no luck
Unless you have JSX installed, You can't just stick HTML elements into JavaScript like that. You will need to use quotes around all the HTML.
It looks like you're reusing the same tags anyway, why not stick all those tags into the HTML portion and update the values in Javascript? You can also update the CSS through JavaScript and set display:none if you want to hide an unused element.
I added the below to the html section
<div class="split right">
<div class="centered" id="showdata">
<form id="adminForm">
<table>
<tr>
<td> User Name </td>
<td>
<input type="String" name="UserName" placeholder="%s">
</td>
</tr>
<tr>
<td> Password </td>
<td>
<input type="String" name="UserPass" placeholder="%s">
</td>
</tr>
</table>
<input type="submit" value="Update Admin Details">
</form>
and the following to the script section
function admin(){
document.getElementById("wifiForm").style.display="none";
document.getElementById("tagForm").style.display="none";
document.getElementById("adminForm").style.display="block";
}
My code is like this: when you check the 'hide' column, the whole row is hidden. I also have a 'Show All' checkbox. When I check it, all rows (including the hidden ones) are shown. But when I uncheck it, all rows disappear. How can I make it so only the hidden rows disappear when I uncheck 'Show All', and the other rows still remain visible?
<body ng-app="myApp" ng-controller="myController">
<h1>Fruits in Vietnam</h1>
<hr>
<form name="myForm">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
</button>
</div>
</div>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Hide</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruitnameDetail" ng-show="showall" ng-hide="hidef">
<td>{{fruit.fruitname}}</td>
<td><input type="checkbox" ng-model="hidef"></td>
<td>
<a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>
<script>
var app = angular.module("myApp", []);
app.controller('myController', function ($scope, $window) {
$scope.fruitnameDetail = [
{
"fruitname": "Banana"
},
{
"fruitname": "Mango"
},
{
"fruitname": "Orange"
}
];
$scope.addnew = function () {
var fruitnameDetail = {
fruitname: $scope.mdfruitname
};
$scope.fruitnameDetail.push(fruitnameDetail);
$scope.mdfruitname = '';
};
$scope.removefruitname = function (index) {
var name = $scope.fruitnameDetail[index].fruitname;
if ($window.confirm("Do you want to delete " + name + " ?")) {
$scope.fruitnameDetail.splice(index, 1);
}
};
});
</script>
Do not use ng-show and ng-hide at the same time. Just change a little bit your condition for ng-repeat. Here the example that should work:
<body ng-app="myApp" ng-controller="myController">
<h1>Fruits in Vietnam</h1>
<hr>
<form name="myForm">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
</button>
</div>
</div>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Hide</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruitnameDetail" ng-show="showall || !hidef">
<td>{{fruit.fruitname}}</td>
<td><input type="checkbox" ng-model="hidef"></td>
<td>
<a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>
I have implemented dynamic row add/delete in thymeleaf using jquery. But I am unable to capture the row values as array of json objects.
$(function(){
$('#addMore').on('click', function() {
var data = $("#tab_logic tr:eq(1)").clone(true).appendTo("#tab_logic");
data.find("input").val('');
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>1) {
$(this).closest("tr").remove();
}
});
The table to which dynamic row gets added/deleted is as below:-
<table class="table table-bordered table-hover" id="tab_logic">
<tr class="tr-header">
<label for="requestno">Sales target</label>
<th>Team lead</th>
<th>Sales volume</th>
<th><a href="javascript:void(0);"
style="font-size: 18px;" id="addMore"> <span
class="glyphicon glyphicon-plus"></span></a></th>
</tr>
<tr>
<td>
<input type="text" name="teamLead" class="form-control" ></input>
</td>
<td>
<input type="text" name="salesVolume" class="form-control" ></input>
</td>
<td>
<a href='javascript:void(0);' class='remove'><span
class='glyphicon glyphicon-remove'></span></a>
</td>
</tr>
</table>
You can serialized forms inputs using the serialize() function. This will return a query string that then can be converted to JSON object using JSON.stringify(). So, my recommendation, would be to add everything inside a form and then serialize it.
HTML
<table class="table table-bordered table-hover" id="tab_logic">
<tr class="tr-header">
<label for="requestno">Sales target</label>
<th>Team lead</th>
<th>Sales volume</th>
<th><a href="javascript:void(0);"
style="font-size: 18px;" id="addMore"> <span
class="glyphicon glyphicon-plus"></span></a></th>
</tr>
<form id="myForm>
<tr>
<td>
<input type="text" name="teamLead" class="form-control" ></input>
</td>
<td>
<input type="text" name="salesVolume" class="form-control" ></input>
</td>
<td>
<a href='javascript:void(0);' class='remove'><span
class='glyphicon glyphicon-remove'></span></a>
</td>
</tr>
</form>
</table>
Javascript/jQuery
$(function(){
$('#addMore').on('click', function() {
// Add the row to your form, not the table.
var data = $("#tab_logic tr:eq(1)").clone(true).appendTo("#myForm");
data.find("input").val('');
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>1) {
$(this).closest("tr").remove();
}
});
// Method that will generate the JSON object.
function toJSON() {
var data = $('#myForm').serialize();
console.log(JSON.stringify(data));
}
I have a simple nested json embedded in my html file to which I want to insert some data dynamically using form.
I am able to insert data to parent level but unable to insert to child level. What I am doing wrong?
Here is the code:
<div class="container" ng-app="myApp" ng-controller="myCtrl">
<label>Enter Data</label>
<input ng-model="name" type="text">
<input ng-model="rollno" type="number">
<input ng-model="id" type="text">
<button ng-click="addData(data)">Enter Data</button>
<table class="table table-bordered">
<tr>
<th>Sr No</th>
<th>Name</th>
<th>Roll No</th>
<th>Subjects</th>
<th>Delete</th>
</tr>
<tr ng-repeat="data in myData">
<td>{{$index+1}}</td>
<td>{{data.name}}</td>
<td>{{data.rollno}}</td>
<td ng-repeat="subject in data.subjects">{{subject.id1}}, {{subject.id2}}</td>
<td>remove</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.myData =[{"name":"Jon","rollno":123,"subjects":[{"id1":"Maths","id2":"Hindi"}]},{"name":"Ron","rollno":234,"subjects":[{"id1":"English","id2":"Hindi"}]}];
$scope.addData = function(data){
$scope.myData.push({name:$scope.name,rollno:$scope.rollno,id1:$scope.id1});
}
$scope.removeData = function(index){
$scope.myData.splice(index, 1);
}
});
</script>
If you are trying to insert subjects as well using addData function you can do the below. In html add those ng-models
<input ng-model="name" type="text">
<input ng-model="rollno" type="number">
<input ng-model="id" type="text">
<input ng-model="subid1" type="text"/>
<input ng-model="subid2" type="text"/>
In js
$scope.addData = function(data){
var arrData = {name:$scope.name,rollno:$scope.rollno,subjects:[{id1:$scope.subid1,id2:$scope.subid2 }]};
$scope.myData.push(arrData);
}
This is simple html code, I've just recently started learning about writing these.
All of the physical attributes are working for this GUI, but some of my buttons are not functional. 1st-works, 2nd-not working, 1st radio-works(sort of, the answer is missing the y information), 2nd radio-not working, 3rd button-not working. Any insight to what I might be doing wrong would be greatly appreciated!!
<html>
<head>
</head>
<body>
<form name="form1">
<table>
<tr>
<td> <b><font color="00FF00">Enter the value for A</font></b> </td>
<td> <input type="text" name="box1" style="width:100%; background-color:C0C0FF; color:00FF00" size="8" value="0" OnChange=""/> </td>
</tr>
<tr>
<td> <i><font color="00FF00">Enter the value for B</font></i> </td>
<td> <input type="text" name="box2" style="width:100%; background-color:C0C0FF; color:00FF00" size="8" value="0" OnChange=""/> </td>
</tr>
<tr>
<td> <b><i><font color="00FF00">Enter the value for C</font></i></b> </td>
<td> <input type="text" name="box3" style="width:100%; background-color:C0C0FF; color:00FF00" size="8" value="0" OnChange=""/> </td>
</tr>
<tr>
<td> <input type="button" name="button1" size="8" style="width:100%; background-color:FFC0FF; color:FF0000" value="Click here to calculate value for X" OnClick="
var a = parseFloat(document.form1.box1.value);
var b = parseFloat(document.form1.box2.value);
var c = parseFloat(document.form1.box3.value);
var x = ((12*b*b - 4*b*c + ((b*a*c) / (b-c))) / (5-20*a*a)) - 5*a*a*b*b*c*c;
document.form1.box4.value = x;
"/> </td>
<td> <input type="text" name="box4" style="width:100%; background-color:C0C0FF; color:00FF00" size="8" value="0" OnChange=""/> </td>
</tr>
<tr>
<td> <input type="button" name="button2" size="8" style="width:100%; background-color:FFC0FF; color:FF0000" value="Click here to calculate Y value" OnClick="
var a = parseFloat(document.form1.box1.value);
var b = parseFloat(document.form1.box2.value);
var c = parseFloat(document.form1.box3.value);
var y = ((5*a*c ((a*b*c + 2*c*c) / (5*a+b))) / (((1+a*a) / (b+c+1)) + ((1-3*c) / (2*b-4*c-2)))) - 10*a - ((b*c)/2);
document.form1.box5.value = y;
"/> </td>
<td> <input type="text" name="box5" style="width:100%; background-color:C0C0FF; color:00FF00" size="8" value="0" OnChange=""/> </td>
</tr>
<tr>
<td> <input type="radio" name="radio1" OnClick="
var x = parseFloat(document.form1.box4.value);
var y = parseFloat(document.form1.box5.value);
var total = x-y;
document.form1.box6.value = total;
"/> <font color="00FF00">Select to show X-Y</font> </td>
<td> <input type="text" name="box6" style="width:100%; background-color:C0C0FF; color:00FF00" size="8" value="0" OnChange=""/> </td>
</tr>
<tr>
<td> <input type="radio" name="radio2" OnClick="
var x = parseFloat(document.form1.box4.value);
var y = parseFloat(document.form1.box5.value);
var tot = x*y;
document.form1.box7.value = tot;
"/> <font color="00FF00">Select to show X*Y</font> </td>
<td> <input type="text" name="box7" style="width:100%; background-color:C0C0FF; color:00FF00" size="8" value="0" OnChange=""/> </td>
</tr>
<tr>
<td> <input type="button" name="button3" size="8" style="width:100%; background-color:FFC0FF; color:FF0000" value="Click to get A+B+C" OnClick"
var a = parseFloat(document.form1.box1.value);
var b = parseFloat(document.form1.box2.value);
var c = parseFloat(document.form1.box3.value);
var sum = a + b + c;
document.form1.box8.value = sum;
"/> </td>
<td> <input type="text" name="box8" style="width:100%; background-color:C0C0FF; color:00FF00" size="8" value="0" OnChange=""/> </td>
</tr>
</table>
</form>
</body>
</html>
This code is not valid (you didn't closed all the opened balises). Did you set an action attribute on the form? The event is "onclick". The keyword is "var". You cannot retrieve DOM elements in pure javascript like that, you need to call "getElementById" for example.
Hope it'll help.
An operator is missing in your second function, between 5*a*c and ((a*b*c... ;
var y = ((5*a*c (which operator here) ((a*b*c + 2*c*c) / (5*a+b))) / (((1+a*a) / (b+c+1)) + ((1-3*c) / (2*b-4*c-2)))) - 10*a - ((b*c)/2);
Your last button's OnClick is missing "=" sign;
<td>
<input type="button" name="button3" size="8" style="width:100%; background-color:FFC0FF; color:FF0000" value="Click to get A+B+C" OnClick="
var a = parseFloat(document.form1.box1.value);
var b = parseFloat(document.form1.box2.value);
var c = parseFloat(document.form1.box3.value);
var sum = a + b + c;
document.form1.box8.value = sum;
"/>
</td>