We Keep Coding

How would you access a specific cell of a dynamically generated table?

Say I have a table that is generated dynamically:
{% for r in result %}
<tr>
<td>
<form action="/deleteBook" method="POST">
<input type="submit" id="deleteBtn" value="Delete"/>
</form>
</td>
<td>
<form action="/editBook" method="POST">
<input type="submit" id="editBtn" value="Edit"/>
</form>
</td>
<td id="itemID">{{r.itemID}}</td>
<td> {{r.title}}</td>
</tr>
{% endfor %}
Now I want to access the itemID of the row where the respective form submit button was pressed. I know the way I have it set up, every single row will have a column with an id "itemID", I just want to know if it's possible to easily reference the rows even if they don't have unique ID's.

Your event handler receives an Event object, which has two properties:
target, which is the element that clicked
currentTarget, which is the element you hooked the event on (which may be an ancestor of target)
I'd probably use event delegation here, hooking click on the table or tbody, so currentTarget would be the table not not particularly helpful, but target will be the button. From the button you can find the row (tr), and then within the row you can find the td for the item.
I'd get rid of all of those ids, though, since ids are required to be unique on the page. Use class names instead. So:
document.getElementById("id-for-the-table").addEventListener("click", function(event) {
const item = event.target.closest("tr").querySelector(".itemID");
// ...use `item` here... For instance, `item.textContent` will be the item ID
});
Live Example:
document.getElementById("the-table").addEventListener("click", function(event) {
const item = event.target.closest("tr").querySelector(".itemID");
// ...use `item` here... For instance, `item.textContent` will be the item ID
console.log("Item ID: " + item.textContent);
});
// Just for the example, I prevent forms being submitted
document.getElementById("the-table").addEventListener("submit", function(event) {
event.preventDefault();
});
<table id="the-table">
<tbody>
<tr>
<td>
<form action="/deleteBook" method="POST">
<input type="submit" class="deleteBtn" value="Delete"/>
</form>
</td>
<td>
<form action="/editBook" method="POST">
<input type="submit" class="editBtn" value="Edit"/>
</form>
</td>
<td class="itemID">1</td>
<td> Title 1</td>
</tr>
<tr>
<td>
<form action="/deleteBook" method="POST">
<input type="submit" class="deleteBtn" value="Delete"/>
</form>
</td>
<td>
<form action="/editBook" method="POST">
<input type="submit" class="editBtn" value="Edit"/>
</form>
</td>
<td class="itemID">2</td>
<td> Title 2</td>
</tr>
<tr>
<td>
<form action="/deleteBook" method="POST">
<input type="submit" class="deleteBtn" value="Delete"/>
</form>
</td>
<td>
<form action="/editBook" method="POST">
<input type="submit" class="editBtn" value="Edit"/>
</form>
</td>
<td class="itemID">3</td>
<td> Title 3</td>
</tr>
</tbody>
</table>
Note that that uses the new(ish) closest method on Element. If you need to support obsolete browsers like IE, you can polyfill it.
Also note that I've used ES2015+ (const), but if (again) you need to support obsolete browsers, you can use var there instead.

When I try to submit a form, Not the values changed by me but the initial values are transferred to action page

<script>
function mySubmit(index) {
if(index==3){
document.myForm.action='update.jsp';
}
if(index==4){
document.myForm.action='';
}
document.myForm.submit();
}</script>
This is my javascript function. And I use this from the code below.
<form name="myForm" method="post">
<table class="table">
<tbody>
<tr>
<input type="hidden" name=num id=num value=<%=article.getNum() %>>
...
<td class="col-md-2">작성자</td>
<td class="col-md-8"><input disabled="disabled" type=text name="writer" id="writer" value="<%=article.getWriter()%> "></td>
</tr>
...
<tr>
<td>비밀번호</td>
<td><input type=password name="passwd" id="passwd"></td>
</tr>
<tr>
<td id="buttons" colspan="2">
<input class="btn btn-xs btn-default" type="button" value="글수정" onclick="mySubmit(3)">
<input class="btn btn-xs btn-default" type="button" value="글삭제" onclick="mySubmit(4)">
<input class="btn btn-xs btn-default" type="button" value="목록보기" onclick="location.href='list.jsp'">
</td>
</tr>
</tbody>
</table>
</form>
This is a revising article page. I want to transfer values changed from original values, but it didn't work. It only transfer original values which are initialized in my code.
HELP!!

How to get text of form child when an input element is clicked on

This is my HTML layout. I have multiple forms:
<table>
<form>
<tr>
<td id="1">Text1</td>
<td id="2">Text2</td>
<input type="button" value="Submit" id="submit1">
</tr>
</form>
<form>
<tr>
<td id="1">Text1</td>
<td id="2">Text2</td>
<input type="button" value="Submit" id="submit2">
</tr>
</form>
</table>
What I want is to fetch the text in between the <td> of id=1. What I have done is:
$(document).ready(function(){
$('[id*="submit"]').on('click', function() {
console.log($(this).closest("form").find('td first').text());
});
});

Here you go with a solution
$(document).ready(function(){
$('[id*="submit"]').on('click', function() {
console.log($(this).closest('form').find('td').first().text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table>
<tr>
<td id="form1-1">Form 1: Text1</td>
<td id="form1-2">Text2</td>
<input type="button" value="Submit" id="submit1">
</tr>
</table>
</form>
<form>
<table>
<tr>
<td id="form2-1">Form 2: Text1</td>
<td id="form2-2">Text2</td>
<input type="button" value="Submit" id="submit2">
</tr>
</table>
</form>
There are few thing to notice in your code
id should be unique
form tag should be outside the table
Hope this will you.

You almost got it right! It should be
$(this).closest("form").find('td#1').text()
You might consider not using id's in this context; they are meant to be unique.

You should may be prefer class than id, iike what Julia Finarovsky said, id should be unique.
You almost got it right, though you just forgot : in between td and first in the find param
$(document).ready(function(){
$('[id*="submit"]').on('click', function() {
console.log($(this).closest("form").find('td:first').text());
});
});
Hope this helps.

Adding 1 to row value onsubmit

I want to know how to add 1 to a value in a nested div anytime the form is submitted.
<form id="form1" name="form1" method="post" action="" class="submit">
<table width="30%" border="0" cellspacing="4" cellpadding="4">
<tr>
<td width="58%"><div class="fav_count">1</div></td>
<td width="42%"><input type="submit" name="button" id="button" value="Submit" /></td>
</tr>
</table>
</form>
<form id="form2" name="form1" method="post" action="" class="submit">
<table width="30%" border="0" cellspacing="4" cellpadding="4">
<tr>
<td width="58%"><div class="fav_count">2</div></td>
<td width="42%"><input type="submit" name="button2" id="button2" value="Submit" /></td>
</tr>
</table>
</form>
<form id="form3" name="form1" method="post" action="" class="submit">
<table width="30%" border="0" cellspacing="4" cellpadding="4">
<tr>
<td width="58%"><div class="fav_count">3</div></td>
<td width="42%"><input type="submit" name="button3" id="button3" value="Submit" /></td>
</tr>
</table>
</form>
<form id="form4" name="form1" method="post" action="" class="submit">
<table width="30%" border="0" cellspacing="4" cellpadding="4">
<tr>
<td width="58%"><div class="fav_count">4</div></td>
<td width="42%"><input type="submit" name="button4" id="button4" value="Submit" /></td>
</tr>
</table>
</form>
here's a fiddle
https://jsfiddle.net/fgu42nxr/
Any help with jquery will be appreciated. Thanks

As mentioned in comments above, you can't do it when you submitting the form, because it leads to page reloading. However, you can cancel default form submit behaviour and reimplement it with ajax or something. If so, you can do it like this:
$("#form1").on('submit', function(e){
e.preventDefault();
// do some stuff here...
$(this).find(".fav_count").each(function() {
$(this).text(+($(this).text()) + 1)
})
})

You can do this by adding a class to your submit buttons and writing a click event of the same to update the value of fav_count.
Change your submit button to follow.
<input type="submit" class="cSubmitBtn" name="button4" id="button4" value="Submit" />
Now write a click event for above button to get the current value of fav and update it.
In the following code we're getting current fav value using parent() function of the jQuery then increase the current value by one.
And in last we're setting the value as text to the same span element using .text(value) function of jQuery.
$('.cSubmitBtn').click(function(e) {
e.preventDefault();
var favDiv=$(this).parents('tr').find('.fav_count');
var currentValue=parseInt(favDiv.text());
currentValue++;
favDiv.text(currentValue);
});
https://jsfiddle.net/fgu42nxr/3/
Please note above code will prevent your submit button to submit the form on click. If you still want to submit the form you can do in the same jQuery code.

Here you have a solution => plunkr
$(document).ready(function() {
$("form").submit(function(event) {
event.preventDefault();
$div = $(this).find(".fav_count");
var count = parseInt($div.html());
count++;
$div.html(count.toString());
});
});

Use href to submit into a php file

I want to make a login form which should provide 2 ways to submit , one through the login button which should submit the info into the login.php and another through the href (Forgot password) which should redirect the user and submit the info to the forgotpassword.php file. So far I have tried this code but it doesn't work:
<script type="text/javascript">
function forgotpassword()
{
document.getElementById("ee").action="project_forgotpassword.php";
document.getElementById("ee").submit();
}
</script>
<form id="ee" method="POST" action="login.php">
<table>
<tr>
<th>Username</th>
<td><input type="text" name="username"></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password" name="password"></td>
</tr>
<tr>
<th>Forgot Password</th>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="submit" value="Submit">
</td>
</tr>
</table>
</form>

First issue as I have commented was the typo mistake.
Second issue is submit button name. Refer to following post.
JSFiddle
Code
function forgotpassword() {
var form = document.getElementById("ee");
form.action = "project_forgotpassword.php";
console.log(form)
form.submit();
}
<form id="ee" method="POST" action="login.php">
<table>
<tr>
<th>Username</th>
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<th>Password</th>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<th>Forgot Password
</th>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="btnSubmit" value="Submit">
</td>
</tr>
</table>
</form>
Changes
<input type="submit" name="btnSubmit" value="Submit">

When calling the javascript function you can omit the javascript: from the onclick handler. You might wish to use that syntax when invoking the function from a standard hyperlink, such as <a href='javascript:func()'>link</a> but that is not common.
In the amended forgotpassword function I use setAttribute rather than trying to call the attribute directly - I think it is more reliable that way. Also, unless in the js function, you prevent the default action of the hyperlink it will simply try to go to the value in the href attribute.
<script type="text/javascript">
/*
function forgotpassword(){
document.getElementById("ee").action="project_forgotpassword.php";
document.getElementById("ee").submit();
}
*/
/* I would tend to use this approach to setting an attribute */
function forgotpassword(){
var form=document.getElementById("ee");
form.setAttribute('action','project_forgotpassword.php');
form.submit();
}
</script>
<form id="ee" method="POST" action="login.php">
<table>
<tr>
<th>Username</th>
<td><input type="text" name="username"></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password" name="password"></td>
</tr>
<tr>
<th>Forgot Password</th>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="subform" value="Submit">
</td>
</tr>
</table>
</form>
One final thing - change the name of the submit button ~ it shouldn't be called submit - especially when trying to invoke form submission using javascript.

Try this,
$('#forgetpassword').click(function(){
$("form[name='form_name']").attr("action", "project_forgotpassword.php");
$("form[name='form_name']").submit();
});
Change the forget Password link as below,
<a id="forgetpassword">Forgot Password</a>