We Keep Coding

How do I get a value from a textbox that is inside of a table data cell in jsp/servlet?

Hi I am trying to get a value from the textboxes inside my element in my table. I have an edit button for each row that should go to the servlet, update the fields, refresh the table data and come back to the same jsp page.
Here is my table
<table border="2">
<tr>
<th>ID</th>
<th>Short Desc</th>
<th>Long Desc</th>
<th>Status</th>
</tr>
<c:forEach var="state" items="${stateList}">
<tr>
<td><input type="text" name="editStateId" value="${state.stateId}"/></td>
<td><input type="text" name="editShortDesc" value="${state.shortDesc}"/></td>
<td><input type="text" name="editLongDesc" value="${state.longDesc}"/></td>
<td><input type="text" name="editIsActiveString" value="${state.isActiveString}"/></td>
<td>
<form action="witc" method="post">
<input type="hidden" name="action" value="manageDispoType">
<input type="hidden" name="stateId" value="${state.stateId}"/>
<input type="hidden" name="manageType" value="stateType">
<input type="submit" value="Edit" class="editbuttons"/>
</form>
</td>
</tr>
</c:forEach>
</table>
In my servlet I have am trying to get the values from these textboxes to add to a state class and update the database. I am using request.getParameter() but I am getting a null value
Here is my servlet
private String doManageType(HttpServletRequest request, HttpServletResponse response){
String urlString;
StateType stateType = new StateType();
List<StateType> stateList = GetDb.getAllStates();
//below is the code I'm having trouble with
String shortDesc = request.getParameter("editShortDesc");
String longDesc = request.getParameter("editLongDesc");
String isActive = request.getParameter("editIsActive");
request.setAttribute("stateList", stateList);
stateType.setShortDesc(shortDesc);
stateType.setLongDesc(longDesc);
stateType.setIsActiveString(isActive);
UpdateDb.updateState(stateType);
urlString = "/manageTypes.jsp";
return urlString;
}

There are two problems with your code:
A. The form should enclose the fields, editStateId, editShortDesc, editLongDesc etc. as follows:
<table border="2">
<tr>
<th>ID</th>
<th>Short Desc</th>
<th>Long Desc</th>
<th>Status</th>
</tr>
<c:forEach var="state" items="${stateList}">
<form action="witc" method="post">
<tr>
<td><input type="text" name="editStateId" value="${state.stateId}"/></td>
<td><input type="text" name="editShortDesc" value="${state.shortDesc}"/></td>
<td><input type="text" name="editLongDesc" value="${state.longDesc}"/></td>
<td><input type="text" name="editIsActiveString" value="${state.isActiveString}"/></td>
<td>
<input type="hidden" name="action" value="manageDispoType">
<input type="hidden" name="stateId" value="${state.stateId}"/>
<input type="hidden" name="manageType" value="stateType">
<input type="submit" value="Edit" class="editbuttons"/>
</td>
</tr>
</form>
</c:forEach>
</table>
B. In your servlet, you should write request.getParameter("editIsActiveString") instead of request.getParameter("editIsActive")

Have same DIV display for different HTML Tabs

I have a set of 10 Search Fields to be displayed when 2 different tabs are clicked. Both the tabs have same set of 10 fields. Instead of having different DIV, I want to use same DIV and based on the specific TAB selection, I want to only change my AJAX REST End-Point.
Pls help how to use same DIV for different TABS in HTML.
1) HTML: Code below shows 2 tabs and the 2 DIVs - Entity and Claim. Want to use only 1 DIV as both ENTITY and CLAIM DIVs have same set of fields.
<div class="tab">
<button class="tablinks" name="entity"
onclick="openTab(event, 'entity')" id="defaultOpen">Entity
Search</button>
<button class="tablinks" name="claim" onclick="openTab(event, 'claim')">Claim
Search</button>
</div>
<div id="entity1" class="tabcontent">
<h3>Entity</h3>
</div>
<div id="claim1" class="tabcontent">
<h3>Claim</h3>
</div>
<div id="entity" style="text-align: center" class="tabcontent">
<form name="ajaxform" id="ajaxform" method="POST" align="center">
<label align="center" class="h1"><font size=6><b>ER
Search Service</b></font></label> </br> </br> </br>
<input type="hidden" id="userID" name="userID" value="">
<script>
</script>
<table align="center">
<tr>
<td>EntityID</td>
<td><input type="text" name="entityid" width=10></td>
<!-- <td>ClaimID</td>
<td><input type="text" name="claimid" width=10></td> -->
<td>First Name</td>
<td><input type="text" name="firstname" width=10></td>
<td>Last Name</td>
<td><input type="text" name="lastname" width=10></td>
</tr>
<tr>
<td>Address Line 1</td>
<td><input type="text" name="addrLine1" width=10></td>
<td>Address Line 2</td>
<td><input type="text" name="addrLine2" width=10></td>
<td>City</td>
<td><input type="text" name="city" width=10></td>
<td>State</td>
<td><input type="text" name="state" width=10></td>
</tr>
<tr>
<td>Country</td>
<td><input type="text" name="country" width=10></td>
<td>Zipcode</td>
<td><input type="text" name="zipcode" width=10></td>
<td>SSN</td>
<td><input type="text" name="ssn" width=10></td>
<td>DL Number</td>
<td><input type="text" name="dl_num" width=10></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" width=10></td>
<td>Professional License</td>
<td><input type="text" name="profLic" width=10></td>
<td>Policy Number</td>
<td><input type="text" name="policyNum" width=10></td>
</tr>
</table>
</br>
<table align="center" class="h1">
<tr>
<td><input type="button" id="simplepost" value="Search"
align="center"></td>
<td><input type="reset" id="reset" value="Clear"
onClick="runReset()" align="center"></td>
</tr>
</table>
</br>
<table align="center" class="h1">
<tr>
<td><select id="downloadFormat" align="center">
<option value="selectValue" selected>Select Download
Format</option>
<option value="csv">CSV</option>
<option value="xls">Excel</option>
<option value="xml">XML</option>
<option value="pdf">PDF</option>
</select></td>
<td><input type="button" id="download" value="Download"
disabled=true align="center"></td>
</tr>
</table>
</form>
</div>
<div id="claim" style="text-align: center" class="tabcontent">
<form name="claimform" id="claimform" method="POST" align="center">
<label align="center" class="h1"><font size=6><b>ER
Search Service</b></font></label> </br> </br> </br>
<table align="center">
<tr>
<td>EntityID</td>
<td><input type="text" name="entityid" width=10></td>
<td>ClaimID</td>
<td><input type="text" name="claimid" width=10></td>
<td>First Name</td>
<td><input type="text" name="firstname" width=10></td>
<td>Last Name</td>
<td><input type="text" name="lastname" width=10></td>
</tr>
<tr>
<td>Address Line 1</td>
<td><input type="text" name="addrLine1" width=10></td>
<td>Address Line 2</td>
<td><input type="text" name="addrLine2" width=10></td>
<td>City</td>
<td><input type="text" name="city" width=10></td>
<td>State</td>
<td><input type="text" name="state" width=10></td>
</tr>
<tr>
<td>Country</td>
<td><input type="text" name="country" width=10></td>
<td>Zipcode</td>
<td><input type="text" name="zipcode" width=10></td>
<td>SSN</td>
<td><input type="text" name="ssn" width=10></td>
<td>DL Number</td>
<td><input type="text" name="dl_num" width=10></td>
</tr>
<tr>
<td>DOB</td>
<td><input type="text" name="dob" width=10></td>
<td>Professional License</td>
<td><input type="text" name="profLic" width=10></td>
<td>Policy Number</td>
<td><input type="text" name="policyNum" width=10></td>
</tr>
</table>
</br>
<table align="center" class="h1">
<tr>
<td><input type="button" id="claimpost" value="Search"
align="center"></td>
<td><input type="reset" id="reset" value="Clear"
onClick="runReset()" align="center"></td>
</tr>
</table>
</br>
<table align="center" class="h1">
<tr>
<td><select id="downloadFormat" align="center">
<option value="selectValue" selected>Select Download
Format</option>
<option value="csv">CSV</option>
<option value="xls">Excel</option>
<option value="xml">XML</option>
<option value="pdf">PDF</option>
</select></td>
<td><input type="button" id="download" value="Download"
disabled=true align="center"></td>
</tr>
</table>
</form>
</div>
2) JavaScript:
<script>
var tabSelected = '';
var userID = getParameterByName("userID");
//alert(userID);
function setUserID() {
//userID = getParameterByName("userID");
document.getElementById("userID").value = userID;
//alert(document.getElementById("userID").value);
}
function getParameterByName(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
//alert('Query Variable ' + variable + ' not found');
}
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
if (tabName == "entity") {
tabSelected = "getEntity";
alert(tabSelected);
} else if (tabName == "claim") {
tabSelected = "getClaim";
alert(tabSelected);
}
}
document.getElementById("defaultOpen").click();
</script>
3) AJAX:
$("#simplepost").click(function(e) {
//getUsersAndDisplay();
tabSelected = "getEntity";
//alert(tabSelected);
convertJSONToTable(tabSelected);
});
//GETUSERS Button ends
$("#claimpost").click(function(e) {
tabSelected = "getClaim";
//alert(tabSelected);
convertJSONToTable(tabSelected);
});
AJAX REST-ENDPOINT CALL: Want to call same method based on the variable which is getting the right values. But problem is how to display same DIV for different TAB Selections.
function convertJSONToTable(tab) {
var MyFormData = $("#ajaxform").serializeJSON();
console.log(MyFormData);
var MyFormJSON = JSON.stringify(MyFormData,null, 2);
console.log(MyFormJSON);
var urlSelected = '';
if (tab == "getEntity") {
urlSelected = "http://localhost:8089/restserver/rest/getEntity";
} else if (tab == "getClaim"){
urlSelected = "http://localhost:8089/restserver/rest/getClaim";
}
$.ajax({
url : urlSelected,
type: "POST",
contentType: "application/json",
data : MyFormJSON,
success: function(response) {
//Store result in Session and Enable Download button
response = removeAllBlankOrNull(response);
var cacheString = JSON.stringify(response, null, 2);
console.log("-----------------> cacheString is: " + cacheString);
var sessionresponse = sessionStorage.setItem("i98779", cacheString);
console.log("----------------------------------------------------------------");
console.log("Response is: " + response);
console.log("----------------------------------------------------------------");
if(cacheString != null && cacheString != "[]") {
document.getElementById("download").disabled = false;
}
createTable2(response);
},
error: function(jqXHR, textStatus, errorThrown)
{
console.log(errorThrown);
alert("Error: " + errorThrown);
}
});
} //convertJSONToTable() Ends here

You only need one form and therefore only one "tab". But with two buttons you can let it appear like having two tabs. Each of these buttons shows/hide a submit-button in the form.
The form has to submit-buttons. One is sending the variable "claim" to the ajax-function. The other one is sending "entity" to the ajax-function.
HTML
<div class="tab">
<button class="tablinks" name="entity" id="open-entity">Entity
Search</button>
<button class="tablinks" name="claim" id="open-claim">Claim
Search</button>
</div>
<div>
<form>
<!--Input fields goes here-->
<!--Two submit buttons in the same form, each is sending its individual variable to your ajax function-->
<input type="button" id="submit-entity" value="Download"
disabled=true align="center">
<input type="button" id="submit-claim" value="Download"
disabled=true align="center"></td>
</form>
</div>
JS
$(function() {
//Define which form should be shown on page-load, in this case "claim"
$('#submit-claim').show();
$('#submit-claim').hide();
//Show button to submit claim-form, hide button for entity-form
$('#open-claim').click(function(){
$('#submit-claim').show();
$('#submit-claim').hide();
});
//Hide button to submit claim-form, show button for entity-form
$('#open-entity').click(function(){
$('#submit-entity').show();
$('#submit-entity').hide();
});
//Call ajax if submit button is clicked
$('#submit-entity').click(function(){
convertJSONToTable('entity');
});
$('#submit-claim').click(function(){
convertJSONToTable('claim');
});
});
SECOND OPTION:
Instead of having two submit buttons you can add a hidden input-field to your form. If the user clicks on the #open-claim button the value of the input field is changed to 'claim'. If clicked on open-entityits value gets 'entity'.
$('#open-claim').click(function(){
$('#form-type').val('claim');
});
$('#open-entity').click(function(){
$('#form-type').val('entity');
});
Then, when clicked on the submit-button of the form the value of the input field is sent to the ajax-function.
$('#submit-btn').click(function(){
convertJSONToTable($('#form-type').val());
});

Auto duplicate last row in table

I would like to duplicate the last row in a HTML table when the user types in any input inside the last row.
My code only works the first time it is run.
Maybe the table above it is being interfering with it? I also replaced :
if ( $(this).parents("tr").is("tr:last")) {
With
if ($(this).closest("tr").is(":last-child")) {
but this just causes a new row to be made on any input.
Var "t" might be off. I shrunk the size of the table and eyeballed the digits.
Javascript & Jquery
function deleteRow(row) {
var i = row.parentNode.parentNode.rowIndex;
document.getElementById("Items").deleteRow(i);
}
function duperow() {
document.getElementById("LastRow").value = (Number($("tr:last td:first").text()) + 1);
var x = document.getElementById('Items');
var new_row = x.rows[1].cloneNode(true);
var len = (Number($("tr:last td:first").text()) + 1);
new_row.cells[0].innerHTML = len;
var inp = [];
for (t = 1; t < 4; t += 1) {
inp[t] = new_row.cells[t].querySelectorAll("input,select")[0];
inp[t].id += len;
inp[t].value = "";
}
inp[3].value = "0.00";
x.appendChild(new_row);
}
$(document).ready(function () {
$("input").keydown(function () {
if ( $(this).parents("tr").is("tr:last")) {
duperow();
}
});
});
HTML
<form id="test" action="submit.php" method="post" accept-charset="ISO-8859-1" enctype="multipart/form-data">
<table width="40%" class="alpha" cellpadding="6px" cellspacing="0" border="0" >
<tr>
<td>
<p>Supplier Name:</p><input name="suplname" type="text" id="suplname" name="suplname" size="10" maxlength="30" required/>
</td>
<td>
<p>Contact:</p><input name="contact" type="text" id="contact" name="contact" size="10" maxlength="40" />
</td>
</tr>
<tr>
<td colspan="2">
<p>Address:</p><input name="address" type="text" id="address" name="address" size="10" maxlength="30" />
</td>
<td>
<input style="display: none;" name="LastRow" type="hidden" id="LastRow" name="LastRow" size="4" maxlength="4" />
</td>
</tr>
</table>
<table class="beta" id="Items" border="1" width="50%" cellpadding="6px" cellspacing="0" border="0" >
<tr>
<th style="display: none;">ID</th>
<th>Acct#</th>
<th>Qty.</th>
<th>Price</th>
<th> </th>
<th> </th>
</tr>
<tr>
<td style="display: none;">1</td>
<td><select name="acct" id="acct" >
<option value=" " > </option>
<option value="1" >Thing</option>
<option value="2" >Thing2</option>
</select></td>
<td><input name="qty" type="number" id="qty" size="2" min="1" maxlength="6" required/></td>
<td><input name="price" type="number" id="price" min="0.00" step="0.01" value="0.00" style="width: 150px;"required/ onchange="total()"></td>
<td><input type="button" id="deleterowbtn" value="Delete" onclick="deleteRow(this)"/></td>
<td><input type="button" id="addrowbtn" value="Add Item" onclick="duperow()"/></td>
</tr>
</table>
</table>
</form>

The issue is that you're binding to the keydown event listener on document.ready, which means that dynamically created input elements don't have anything bound to their keydown event.
You could do this instead:
$(document).ready(function () {
$("table.beta").on("keydown", "input", function (e) {
if ( $(e.target).parents("tr").is("tr:last")) {
duperow();
}
});
});

Unable to fetch the input values from the form in jquery

I am fetching the values from the form page and then validating it. I am using jquery to handle the input objects and fetch the values which are entered by the user.
My HTML code is:
<form id="userDetails">
<table class="containFormTable" cellspacing="8">
<tr>
<td class="detail">Name:</td>
<td>
<input name="name" type="text" id="name" />
</td>
</tr>
<tr>
<td class="detail">Email-Id:</td>
<td>
<input name="emailId" type="text" id="emailId">
</td>
</tr>
<tr>
<td class="detail">Phone-No:</td>
<td>
<input name="phoneNo" type="text" id="phoneNo">
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 50px">
<input type="button" value="Submit" id="submit">
</td>
</tr>
</table>
</form>
My javascript file code which is fetching the data is:
$(document).ready(function() {
$('#submit').click(function() {
var name = $('#name').find('input[name="name"]').val();
var emailId = $('#emailId').find('input[name="emailId"]').val();
var phoneNo = $('#phoneNo').find('input[name="phoneNo"]').val();
});
});
The result I am getting in the variable name or any other is "undefined".
Where am I going wrong in it?

All you need to do is get the value from the elements, like this:
var name = $('#name').val();
var emailId = $('#emailId').val();
var phoneNo = $('#phoneNo').val();
Your code was getting a reference to the form fields, then looking for child elements (which input elements don't have, hence undefined) that were the same as the element that you already found and then trying to get the value of that.

Just remove .find('input[name="name"]') from each selector
$(document).ready(function(){
$('#submit')
.click(
function() {
var name = $('#name').val();
var emailId = $('#emailId').val();
var phoneNo = $('#phoneNo').val();
console.log(name);
console.log(emailId);
console.log(phoneNo);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="userDetails">
<table class="containFormTable" cellspacing="8">
<tr>
<td class="detail">Name:</td>
<td><input name="name" type="text" id="name"/></td>
</tr>
<tr>
<td class="detail">Email-Id:</td>
<td><input name="emailId" type="text" id="emailId"></td>
</tr>
<tr>
<td class="detail">Phone-No:</td>
<td><input name="phoneNo" type="text" id="phoneNo"></td>
</tr>
<tr >
<td colspan="2" style="padding-top: 50px"><input type="button" value="Submit" id="submit"></td>
</tr>
</table>
</form>

cannot fill value to <input> using jquery

I have this html
<table id="tabel-item-borrowed" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="headtabel">Categories</th>
<th class="headtabel">Description</th>
<th class="headtabel">Action</th>
</tr>
</thead>
<tbody>
<tr id="t11">
<td>
<input id="categories[1]" type="text" name="categories1" size="40">
</td>
<td>
<input id="description[1]" type="text" name="description1" size="40">
</td>
<td>
<input id="delete[1]" type="button" name="delete" value="delete" size="5">
</td>
</tr>
<tr id="t12">
<td>
<input id="categories[2]" type="text" name="categories2" size="40">
</td>
<td>
<input id="description[2]" type="text" name="description2" size="40">
</td>
<td>
<input id="delete[2]" type="button" name="delete" value="delete" size="5">
</td>
</tr>
</tbody>
</table>
html code inside tbody tag is generated by javascript, after generate the code I want to fill the value inside #categories[], #description[] ids
this my javascript code to fill the value
//button simpan item
$('#bSimpanItem').click(function () {
var addnum = $('input#iduser').val();
var addposinfo = $('input#idposinfo').val();
if (addposinfo == '0') {
messageAlert('[ ERROR ]<br>You must completely fill position info field.', 'error');
} else {
var lastrow = ( $('#lastrow').val() ) ? parseInt($('#lastrow').val()) : 1;
var row = parseInt($('#comboqty').val());
var category = $('#combocategory1').val() +'-'+ $('#combocategory2').val();
var description = $('#borrowdesc').val();
addNewRow(row);
console.log(' last row ' + lastrow);
console.log(' total row ' + row);
console.log(' category '+category);
console.log(' description '+description);
for (var i = 1 ; i <= row; i++) {
console.log("index " + i);
$('input#idposinfo').val('');
//fill value "111" and "222" inside <input id="categories[1]"> and <input id="description[1]">
$("input#categories["+lastrow+"]").val("111");
$("input#description["+lastrow+"]").val("222");
lastrow++;
document.getElementById('lastrow').value = lastrow;
console.log("success run bSimpan inside for");
}
console.log("success run bSimpan outside for");
resetForm('formBorrowItem');
$('#formBorrowItem').hide();
//return false;
}
});
but nothing was shown inside the input value

[xxxx] is an attribute selector. If the id has them in the value, you need to escape them as stated in the jQuery documentation.
$("input#categories\\["+lastrow+"\\]");

Try this
$("input#categories\\["+lastrow+"\\]").val("111");
$("input#description\\["+lastrow+"\\]").val("222");
Html code
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#bSimpanItem').click(function () {
var iIndex = 0;
$('#tabel-item-borrowed tbody tr').each(function (index) {
iIndex = index + 1
$(this).find("td:eq(0)").find('#categories\\[' + iIndex + '\\]').val('111');
$(this).find("td:eq(1)").find('#description\\[' + iIndex + '\\]').val('22');
});
});
});
</script>
</head>
<body style="width:50%;">
<input type="button" value="bSimpanItem" id="bSimpanItem"/>
<table id="tabel-item-borrowed" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="headtabel">Categories</th>
<th class="headtabel">Description</th>
<th class="headtabel">Action</th>
</tr>
</thead>
<tbody>
<tr id="t11">
<td>
<input id="categories[1]" type="text" name="categories1" size="40">
</td>
<td>
<input id="description[1]" type="text" name="description1" size="40">
</td>
<td>
<input id="delete[1]" type="button" name="delete" value="delete" size="5">
</td>
</tr>
<tr id="t12">
<td>
<input id="categories[2]" type="text" name="categories2" size="40">
</td>
<td>
<input id="description[2]" type="text" name="description2" size="40">
</td>
<td>
<input id="delete[2]" type="button" name="delete" value="delete" size="5">
</td>
</tr>
</tbody>
</table>
</body>
</html>

You can access the input inside the loop like this:
$('input[id="categories[' + lastrow + ']"]').val("111");