i create new hours calendar. as per the IMAGE1 when user click on any of div that dynamic Span was created up to 8 hours.
i.e. if click on 00:00 its design up to 08:00 hours
so my question is how to get that specific siblings 8th divs child position.
Or any other way please suggest me.
$(this).eq(+8).attr("id");
IMAGE1
Table Design Code when ajax return Success:
$(r.emp_nm).each(function (index) {
tabelBody += "<tr><td style='width:10%'><div class='col-xs-3 col-md-3 on-break-tab'>" + this.fname.charAt(0) + this.lname.charAt(0) + "</div>" + this.fname + ' ' + this.lname + " </td>";
for (var i = 0; i < 24; i++) {
var tabelsubBody = "";
var p = 15;
var t_id = r.hours[i];
for (var j = 0; j < 4; j++) {
tabelsubBody += "<div style='float:left; width:25%;height:inherit;' class='Dropablesub_td' data-employeID='" + this.id + "' data-date='" + t_id + "' id='" + t_id + "_" + this.id + "_" + j + "'></div>";
}
if (i === 23) {
tabelBody += "<td style='width:12.5%' class='Dropabletd' data-employeID='" + this.id + "' data-date='" + t_id + "' id='" + t_id + "_" + this.id + "'>" + tabelsubBody + "</td></tr>";
} else {
tabelBody += "<td style='width:12.5%' class='Dropabletd' data-employeID='" + this.id + "' data-date='" + t_id + "' id='" + t_id + "_" + this.id + "'>" + tabelsubBody + "</td>";
}
}
});
$("#tabelBody").html(tabelBody);
$("#tdDate").html(r.today);
$("#SelectDate").val(r.today);
$("#currentSelect").val("Days");
Events();
And Events() is :
function Events() {
$("body").on("click", ".Dropablesub_td", function () {
var hidid = $(this).attr("id");
var Myleft = $(this).position().left;
var Mytop = $(this).position().top;
alert($(this).eq(+8).attr("id"));
$(this).append("<span id='" + hidid + "' class='divId label label-success ui-widget-content filediv unselectable' >ABCDEFGHIJKLMNOPQRSTUVWXYZ<span>");
$(this).children(
).css({zIndex: 999, position: "absolute", top: Mytop, left: Myleft, width: '40%', display: "block", border: "#808080 solid 2px", color: "black", background: "#00CEB4"});
});
}
You can get the desired element using .index() of current element and then using .eq() to target the next element.
Here in the snippet I have created a pseudo code for demonstration
$(document).on("click", ".dropabletd", function() {
var tr = $(this).closest('tr');
var tds = tr.find('td');
var index = tds.index(this);
var sibling = tds.eq(index + 8);
console.log($(this).attr('id'), sibling.attr('id'));
});
createTable();
function createTable() {
var tabelBody = ""
for (var i = 0; i <= 23; i++) {
tabelBody += "<td class='dropabletd' id='id" + i + "'>" + i + "</td>";
}
$("table tr").html(tabelBody);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr></tr>
</table>
Related
I can add a user just fine, but when I try to delete or edit someone my button doesn't work. I tried to put an alert to see what's wrong but I can't find anything.
As you can see it creates the button delete and edit when you add someone to the table.
Here's my js code:
var nextId = 1;
var activeId = 0;
$(document).ready(function() {
$("#addBtn").on("click", function() {
var name = $("#txtNome").val();
if (name.trim().length < 3 || $("#txtIdade").val() == "") {
alert("Dados Incorretos, Por favor, digite o seu nome e idade.");
$("#txtNome").focus();
return false;
} else {
addt();
formClear();
}
});
$("#btnDelete").on("click", function(delete_button) {
$(delete_button).parents("tr").remove();
});
$("#btnEdit").click(function() {
var row = $(edit_button).parents("tr");
var cols = row.children("td");
activeId = $($(cols[2]).children("button")[0]).data("id");
$("#txtNome").val($(cols[0]).text());
$("#txtIdade").val($(cols[1]).text());
$("#edt").css("display", "inline-block");
$("#addBtn").prop("disabled", true);
})
function addt() {
if ($("#tblUser tbody").length == 0) {
$("#tblUser").append("<tbody></tbody>");
}
$("#tblUser tbody").append(addUserToTable(nextId));
nextId += 1;
}
function addUserToTable(id) {
var row =
"<tr>" +
"<td>" + $("#txtNome").val() + "</td>" +
"<td>" + $("#txtIdade").val() + "</td>" +
"<td>" +
"<button type='button' style='margin-right:20px;' " + "id='btnEdit' " + "class='btn btn-default'" + "data-id='" + nextId + "'>" + "<span class='glyphicon glyphicon-edit'></span>" +
"</button>" +
"<button type='button' " + "id='btnDelete'" + "class='btn btn-default'" + "data-id='" + nextId + "'>" + "<span class='glyphicon glyphicon-remove'></span>" +
"</button>" +
"</td>" +
"</tr>"
return row;
nextId += 1;
}
function formClear() {
$("#txtNome").val("");
$("#txtIdade").val("");
}
function attTable(id) {
var row = $("#tblUser button[data-id='" + id + "']").parents("tr")[0];
$(row).after(addUserToTable());
$(row).remove();
formClear();
$("#edt").css("display", "none");
}
});
As you are adding String content(in form of HTML) to a table, so these are the new content for document, and Jquery has bind all event at time of page load,
So when you add dynamic content to table, you explicitly need to bind the events to DOM elements (in your case edit and delete button)
Please try following code,
<script>
var nextId = 1;
var activeId = 0;
$(document).ready(function(){
$("#addBtn").on("click",function(){
var name = $("#txtNome").val();
if (name.trim().length < 3 || $("#txtIdade").val() == "") {
alert("Dados Incorretos, Por favor, digite o seu nome e idade.");
$("#txtNome").focus();
return false;
} else {
addt();
formClear();
}
});
$("#btnDelete").on("click",deletebutton);
function deletebutton(){
$(this).parents("tr").remove();
}
$("#btnEdit").click(editButton);
function editButton(){
var row = $(this).parents("tr");
var cols = row.children("td");
activeId = $($(cols[2]).children("button")[0]).data("id");
$("#txtNome").val($(cols[0]).text());
$("#txtIdade").val($(cols[1]).text());
$("#edt").css("display", "inline-block");
$("#addBtn").prop("disabled" , true);
}
function addt(){
if ($("#tblUser tbody").length == 0) {
$("#tblUser").append("<tbody></tbody>");
}
var btn = $(addUserToTable(nextId));
$(btn).find("#btnEdit").bind('click', editButton);
$(btn).find("#btnDelete").bind('click', deletebutton);
$("#tblUser tbody").append($(btn));
nextId += 1;
}
function addUserToTable(id) {
var row =
"<tr>" +
"<td>" + $("#txtNome").val() + "</td>" +
"<td>" + $("#txtIdade").val() + "</td>" +
"<td>" +
"<button type='button' style='margin-right:20px;' " + "id='btnEdit' " + "class='btn btn-default'" + "data-id='" + nextId + "'>" + "<span class='glyphicon glyphicon-edit'></span>" +
"Edit </button>" +
"<button type='button' " + "id='btnDelete'" + "class='btn btn-default'" + "data-id='" + nextId + "'>" + "<span class='glyphicon glyphicon-remove'></span>" +
"Delete</button>" +
"</td>" +
"</tr>"
return row;
nextId += 1;
}
function formClear() {
$("#txtNome").val("");
$("#txtIdade").val("");
}
function attTable(id) {
var row = $("#tblUser button[data-id='" + id + "']").parents("tr")[0];
$(row).after(addUserToTable());
$(row).remove();
formClear();
$("#edt").css("display", "none");
}
});
</script>
I hope this will solve your problem
I have tried with following HTML content
<table id="tblUser"></table>
<input type="button" id="addBtn" value="addBtn"/><br/>
<input type="button" id="btnDelete" value="btnDelete"/><br/>
<input type="button" id="btnEdit" value="btnEdit"/><br/>
txtNome: <input type="text" id="txtNome" value="Name 1" /><br/>
txtIdade: <input type="text" id="txtIdade" value="Name 2"/><br/>
i have an arrow image, which i want to turn according to a degree value I get in javascript (g_drivers[i].heading) .
<img class="dir_img" style="transform: rotate(' + g_drivers[i].heading + 'deg)" src="' + dir_img + '">
This is working fine. I get a degree value every 3 seconds or so and the image rotates by that value.
I would now like a smooth transition when the degree changes every 3 seconds or so.
The CSS must look something like this...
.dir_img {
transition: transform 2s;
}
For some reason the .dir_img class is not catching that transition.
I am adding elements in the following manner:
I am creating the HTML out of JavaScript variables:
var html = '<img class="dir_img" style="transform: rotate(' + g_drivers[i].heading + 'deg)" src="' + dir_img + '">'
and then I append this like this:
document.getElementById('sidebar-scroll').innerHTML = html;
And this for some reason isn't working.
Here is the function, where I added Kosh Very's code, but it is still not working:
function displayDriversInSidebar() {
var countM = 0; //Moving
var countS = 0; //Standing
var countI = 0; //Inaktiv (no_signal = 1)
var countO = 0; //Offline (online = 0)
var activeCSS = '';
var status_img;
var dir_img;
var movingDrivers = '<tbody class="sidebar_header"><tr><td>In Bewegung<span id="moving_counter">0</span></td></tr></tbody><tbody>';
var standingDrivers = '<tbody class="sidebar_header"><tr><td>Steht <span id="standing_counter">0</span></td></tr></tbody><tbody>';
var inactiveDrivers = '<tbody class="sidebar_header"><tr><td>Inaktiv <span id="inactive_counter">0</span></td></tr></tbody><tbody>';
var offlineDrivers = '<tbody class="sidebar_header"><tr><td>Offline <span id="offline_counter">0</span></td></tr></tbody><tbody>';
for (var i = 0; i < g_drivers.length; i++) {
if (g_drivers[i].updated == 'yes') {
status_img = 'images/sidebar/signal3.png';
} else if (g_drivers[i].updated == 'waiting') {
status_img = 'images/sidebar/signal2.png';
} else if (g_drivers[i].updated == 'NA') {
status_img = 'images/sidebar/signal1.png';
} else {
status_img = 'images/sidebar/signal0.png';
}
if (g_drivers[i].heading === 0 || isNaN(g_drivers[i].heading) === true || g_drivers[i].headingOldCounter >= 30) {
dir_img = 'images/sidebar/no_dir.png';
} else {
dir_img = 'images/sidebar/arrow.png';
}
if (g_activeID == g_drivers[i].uuid) {
activeCSS = ' active';
} else {
activeCSS = '';
}
if (g_drivers[i].online === true) {
if (g_drivers[i].headingOldCounter >= 30 && g_drivers[i].no_signal == 0){
g_drivers[i].heading = 0;
countS += 1;
standingDrivers += '<tr id="' + g_drivers[i].uuid + '" class="sidebar_row' + activeCSS + '" onclick="changeTableRowColor(this.id);openInfo(' + i + ');"><td>' +
'<div class="row_container">' +
'<div class="driver_img"><img class="driver" src="images/drivers/' + g_drivers[i].img + '"></div>' +
'<div class="driver_name">' + g_drivers[i].nachname + ', ' + g_drivers[i].vorname + '</div>' +
'<div id="driver_info" class="driver_info"><img class="signal_img" src="' + status_img + '"></div>' +
//'<img class="dir_img" style="transform: rotate(' + g_drivers[i].heading + 'deg);" src="' + dir_img + '">' +
'<img id="img_' + g_drivers[i].uuid + '" class="dir_img" src="' + dir_img + '">' +
'</div>' +
'</td></tr>';
} else if (g_drivers[i].no_signal == 1) {
countI += 1;
inactiveDrivers += '<tr id="' + g_drivers[i].uuid + '" class="sidebar_row' + activeCSS + '" onclick="changeTableRowColor(this.id);openInfo(' + i + ');"><td>' +
'<div class="row_container">' +
'<div class="driver_img"><img class="driver" src="images/drivers/' + g_drivers[i].img + '"></div>' +
'<div class="driver_name">' + g_drivers[i].nachname + ', ' + g_drivers[i].vorname + '</div>' +
'<div id="driver_info" class="driver_info"></div>' +
'' +
'</div>' +
'</td></tr>';
} else {
countM += 1;
movingDrivers += '<tr id="' + g_drivers[i].uuid + '" class="sidebar_row' + activeCSS + '" onclick="changeTableRowColor(this.id);openInfo(' + i + ');"><td>' +
'<div class="row_container">' +
'<div class="driver_img"><img class="driver" src="images/drivers/' + g_drivers[i].img + '"></div>' +
'<div class="driver_name">' + g_drivers[i].nachname + ', ' + g_drivers[i].vorname + '</div>' +
'<div id="driver_info" class="driver_info"><img class="signal_img" src="' + status_img + '"></div>' + //<p class="img__description">' + timeConverter(g_drivers[i].signal_time) + '</p>
//'<img class="dir_img" style="transform: rotate(' + g_drivers[i].heading + 'deg);" src="' + dir_img + '">' +
'<img id="img_' + g_drivers[i].uuid + '" style="transition: transform 2s;" src="' + dir_img + '">' +
'</div>' +
'</td></tr>';
}
} else if (g_drivers[i].online === false) {
countO += 1;
offlineDrivers += '<tr id="' + g_drivers[i].uuid + '" class="sidebar_row' + activeCSS + '" onclick="changeTableRowColor(this.id);openInfo(' + i + ');"><td>' +
'<div class="row_container">' +
'<div class="driver_img"><img class="driver" src="images/drivers/' + g_drivers[i].img + '"></div>' +
'<div class="driver_name">' + g_drivers[i].nachname + ', ' + g_drivers[i].vorname + '</div>' +
'<div class="driver_info"> </div>' +
'</div>' +
'</td></tr>';
} else {
console.log('Hier darf eigentlich nix passieren');
}
}
movingDrivers += '</tbody>';
inactiveDrivers += '</tbody>';
standingDrivers += '</tbody>';
offlineDrivers += '</tbody>';
document.getElementById('sidebar-scroll').innerHTML = '<table class="sidebar_table">' + movingDrivers + standingDrivers + inactiveDrivers + offlineDrivers + '</table>';
document.getElementById('moving_counter').innerHTML = countM;
document.getElementById('standing_counter').innerHTML = countS;
document.getElementById('inactive_counter').innerHTML = countI;
document.getElementById('offline_counter').innerHTML = countO;
for (var j = 0; j < g_drivers.length; j++) {
if (g_drivers[j].online === true && g_drivers[j].no_signal === 0 && g_drivers[j].headingOldCounter < 30) {
//added the following line, to get better data-values
g_drivers[j].heading = Math.random()*360;
document.getElementById('img_' + g_drivers[j].uuid).style.transform = 'rotate(' + g_drivers[j].heading + 'deg)';
}
}
}
CSS transitions allows you to change property values smoothly (from
one value to another), over a given duration.
But, you're not changing the property (transform) in your code. You're replacing img so it has no start and end values for the transition.
Like this:
var dir_img = 'https://image.freepik.com/iconos-gratis/flecha-hacia-arriba_318-74795.jpg';
setInterval(function() { // emulating the data changes continuously
var g_drivers = [
{id:1, heading: ~~(Math.random()*360)},
{id:2, heading: ~~(Math.random()*360)}
];
var html = '';
for (var i in g_drivers)
html += '<img class="dir_img" style="transform: rotate(' + g_drivers[i].heading + 'deg)" src="' + dir_img + '">';
document.getElementById('sidebar-scroll').innerHTML = html;
}, 500);
.dir_img {
width:70px; margin:20px;
transition: transform 2s;
}
<div id="sidebar-scroll"></div>
But if you need the transitions to be applied you have to keep the images and change their transform property like this:
var dir_img = 'https://image.freepik.com/iconos-gratis/flecha-hacia-arriba_318-74795.jpg';
var sidebar = document.getElementById('sidebar-scroll');
// setting up the drivers (initially empty):
var drivers = {};
// emulating the data changes continuously
setInterval(function() {
var drivers_data = {
'driver_1': {heading: ~~(Math.random()*360)},
'driver_2': {heading: ~~(Math.random()*360)}
};
for (var i in drivers_data) {
if (!drivers[i]) { // it's a new driver, lets add it:
drivers[i] = Object.assign({}, drivers_data[i]);
sidebar.innerHTML += '<img id="' + i + '" class="dir_img" src="' + dir_img + '">';
}
// now change driver's property:
document.getElementById(i).style.transform = 'rotate(' + drivers_data[i].heading + 'deg)';
}
}, 1000);
.dir_img {
width:70px; margin:20px;
transition: transform .7s;
}
<div id="sidebar-scroll"></div>
Use CSS transitions. This will let you ease between the transforms. Couple that with the setInterval that you should be using to get the amount you need to transform each iteration.
For example, the below snippet will have the transform ease between whatever the current transform is and the target transform over the course of 200ms (milliseconds).
const img = document.getElementById("image"),
input = document.getElementById("amount");
let curr = 0;
setInterval(() => {
curr += (parseInt(input.value, 10) || 0);
img.style.transform = `rotate(${curr}deg)`;
}, 1000);
.rotater {
transition: transform 200ms ease;
}
<div><label for="amount">How much to rotate by</label> <input type="number" id="amount" value="10" step="10" min="10" max="90"></div>
<div>
<img id="image" class="rotater" src="https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be">
</div>
I have an html and javascript page rendered through python django, where I have a form data of 30 entries maximum in each page, that can be edited. I included a hidden field with the same form data to extract the old, and modified values in the form. I am looking for extracting just the delta (old and new values for the field that was changed). My code is
{%extends 'base.html'%}
{%block content%}
<h4> Search results</h4>
<p id="data"></p>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
<script>
function onEdit(btn)
{
var id=btn.id;
var before = '';
var after = '';
var input = document.getElementsByName("new"+id);
if(btn.value=="Edit") {
//var input = document.getElementsByName("name"+id);
for(i = 0;i < input.length; i++) {
document.getElementById(input[i].id).removeAttribute("Readonly");
} //End of for loop
document.getElementById(id).value="Save";
return false;
}
if(btn.value=="Save") {
for(i = 0;i < input.length; i++) {
document.getElementById(input[i].id).setAttribute("Readonly", "readonly");
}
document.getElementById(id).value="Edit";
return false;
}
} // End of Function onEdit()
{% autoescape off %}
var data = {{ search|safe }}; //search is the key defined in django view and will be substituted with the json value
{% endautoescape %}
text = ''
var out = '<form name="display" id="update" method="post" action="update/">';
out += "<table style=\"width:50%\">";
out += "<tr>";
out += "<th>Domain</th>";
out += "<th>Points to</th>";
out += "<th>Type</th>";
out += "<th>TTL</th>";
out += "<th>MX priority</th>";
out += "<th>Recorded generated on</th>";
out += "<th></th>";
out += "</tr>";
var i
var id = 0;
for ( var i = 0; i < data.records.length; i++) {
id = id + 1;
out += "<tr><td>" +
"<input readonly='readonly' name='new" + id + "' id='" + data.records[i].domain + "' value='" + data.records[i].domain + "'type='text'/>" +
"<input type='hidden' name='old" + id + "' id='" + data.records[i].domain + "' value='" + data.records[i].domain + "'type='text'/>" +
"</td><td>" +
"<input readonly='readonly' name='new" + id + "' id='" + data.records[i].record_points_to + "' value='" + data.records[i].record_points_to +"'type='text'/>" +
"<input type='hidden' name='old" + id + "' id='" + data.records[i].record_points_to + "' value='" + data.records[i].record_points_to + "'type='text'/>" +
"</td><td>" +
data.records[i].record +
"</td><td>" +
"<input readonly='readonly' name='new" + id + "' id='" + data.records[i].ttl + "' value='" + data.records[i].ttl + "'type='text'/>" +
"<input type='hidden' name='old" + id + "' id='" + data.records[i].ttl + "' value='" + data.records[i].ttl + "'type='text'/>" +
"</td><td>" +
data.records[i].priority_mx +
"</td><td>" +
data.records[i].generated_on +
"</td><td>" +
"<input id='" + id + "' value='Edit' onclick='return onEdit(this)' type='button'/>" +
"</td></tr>";
}
out += "</table>"
total = data.meta.total_records
page = data.meta.page
records_returned = data.records.length
records_shown = ((data.meta.page - 1) * 30) + data.records.length
out += records_shown + " returned of " + total
page = data.meta.page + 1
link = window.location.href
out += "<input type='hidden' name='currenturl' value='" + link + "'>"
if (records_shown == total){
out += " End "
}
else{
url ="<a href='" + updateQueryStringParameter(link, "page", page) + "'> Next"
out += url
}
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
return uri + separator + key + "=" + value;
}
}
//out += '<input style="position: relative; left: 550px;" type="submit" value="Submit">';
out += '<br>'
out += '<button type="submit" class="btn btn-default">Submit</button>'
out += '</form>';
document.getElementById("data").innerHTML = out
</script>
{%endblock%}
What is the best way to do this?
I just started off with javascript and html, so please correct me if I am doing it the wrong way. I was trying to edit an html form table.
{%extends 'base.html'%}
{%block content%}
<html>
<body>
<h4> Search results</h4>
<p id="data"></p>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
<form id="update" action="/update/" method="POST">
<script>
function onEdit(btn)
{
var id=btn.id;
if(btn.value=="Edit") {
var input = document.getElementsByName("name"+id);
for(i = 0;i < input.length; i++) {
document.getElementById(input[i].id).removeAttribute("Readonly");
} //End of for loop
document.getElementById(id).value="Save";
return false;
}
if(btn.value=="Save") {
for(i = 0;i < input.length; i++) {
document.getElementById(input[i].id).setAttribute("Readonly", "readonly");
}
document.getElementById(id).value="Edit";
return false;
}
} // End of Function onEdit()
{% autoescape off %}
var data = {{ search|safe }}; //This will be the json value returned by django view
{% endautoescape %}
text = ''
var out = "<table style=\"width:50%\">";
out += "<tr>";
out += "<th>Domain</th>";
out += "<th>Points to</th>";
out += "<th>Type</th>";
out += "<th>TTL</th>";
out += "</tr>";
var i
var id = 0;
for ( var i = 0; i < data.records.length; i++) {
id = id + 1;
out += "<tr><td>" +
"<input readonly='readonly' name='name" + id + "' id='" + data.records[i].domain + "' value='" + data.records[i].domain + "'type='text'/>" +
"</td><td>" +
"<input readonly='readonly' name='name" + id + "' id='" + data.records[i].record_points_to + "' value='" + data.records[i].record_points_to +"'type='text'/>" +
"</td><td>" +
data.records[i].record +
"</td><td>" +
"<input readonly='readonly' name='name" + id + "' id='" + data.records[i].ttl + "' value='" + data.records[i].ttl + "'type='text'/>" +
"</td><td>" +
"<input id='" + id + "' value='Edit' onclick='return onEdit(this)' type='button'/>" +
"</td></tr>";
}
out += "</table>"
total = data.meta.total_records
page = data.meta.page
records_returned = data.records.length
records_shown = ((data.meta.page - 1) * 30) + data.records.length
out += records_shown + " returned of " + total
page = data.meta.page + 1
link = window.location.href
if (records_shown == total){
out += " End "
}
else{
url ="<a href='" + updateQueryStringParameter(link, "page", page) + "'> Next"
out += url
}
function updateQueryStringParameter(uri, key, value) {
var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
var separator = uri.indexOf('?') !== -1 ? "&" : "?";
if (uri.match(re)) {
return uri.replace(re, '$1' + key + "=" + value + '$2');
}
else {
return uri + separator + key + "=" + value;
}
}
document.getElementById("data").innerHTML = out
</script>
<input type="submit" value="Submit">
</form>
I have the page displayed as expected.
What I am trying to achieve is to make these html tables editable, which is also working half way. When I click the Edit button, the table link turns editable, and I can change the value, and the Edit button changes to Save.
But when I click on "Save" button, firebug error shows
TypeError: input is undefined
for(i = 0;i < input.length; i++) {
----------↑
(Yes, arrow points to var i)
I want to capture the changes when I click on Save, and whatever changes in that page should be captured via POST method once clicked on the submit button below. Submit is redirected to action="/update/". Please let me know what should I do.
to avoid such problems please define all variables at the beginning of their scope (the scope is a function in case of Javascript)
My code is below but I'm unable to verify if it's correct, or if it is, why I can't access the created text inputs by id
for (i=0;i<t;i++)
{
div.innerHTML=div.innerHTML+"<input id="+i+"\" type='text' value="+(i+1)+">"+"<br>";
div1.innerHTML=div1.innerHTML+"<input id=a"+i+"\" type='text' value=a"+(i+1)+">"+"<br>";
gont.innerHTML=gont.innerHTML+i;
}
var t = 2;
var div = document.getElementById('idDiv');
for (i = 0; i < t; i++) {
div.innerHTML = div.innerHTML + "<input id=" + i + "\" type='text' value=" + (i + 1) + ">" + "<br>";
div1.innerHTML = div1.innerHTML + "<input id=a" + i + "\" type='text' value=a" + (i + 1) + ">" + "<br>";
gont.innerHTML = gont.innerHTML + i;
}