We Keep Coding

Showing Information on button click java web application

My project is java dynamic web application. I have servlets & jsp pages in my projects. On one of jsp pages, I showed table as below:
<table border="2" bordercolor="#81BEF7">
<tr bordercolor="#81BEF7">
<td>Customer Name</td>
<td>Address</td>
<td>Contact Number</td>
</tr>
<tr bordercolor="#81BEF7">
<td>AA</td>
<td>AA Address</td>
<td>1111</td>
<td>
<form name="detail" action="./custInfo" method="post">
<input type="submit" name="btnCustomerInfo" value="Detail.." />
</form>
</td>
</tr>
<tr bordercolor="#81BEF7">
<td>BB</td>
<td>BB Address</td>
<td>2222</td>
<td>
<form name="detail" action="./custInfo" method="post">
<input type="submit" name="btnCustomerInfo" value="Detail.." />
</form>
</td>
</tr>
</table>
Once user clicks on button, I want to show customer detail information as below:
<table><tr><td>First Address</td><td>AAA</td></tr>
<tr><td>Second Address</td><td>BBB</td></tr></table>
I don't want to go another page, I prefer showing with message box. Those customer detail information are in array. how can I achieve this.
Thanks,

You can implement this in different ways
Option 1 (Preferred in your scnerio): As your requirement doesn't need for any server data, You can simply use any client side script or javascript library to generate the output as a function of the input.
For instance, You can use JQuery as below :
HTML
<table border="2" bordercolor="#81BEF7">
<tr bordercolor="#81BEF7">
<td>Customer Name</td>
<td>Address</td>
<td>Contact Number</td>
</tr>
<tr bordercolor="#81BEF7">
<td class="custemorName1">AA</td>
<td class="address1">AA Address</td>
<td>1111</td>
<td>
<form id = "target" name="detail" action="./custInfo" method="post">
<input type="submit" name="btnCustomerInfo" value="Detail.." />
</form>
</td>
</tr>
<tr bordercolor="#81BEF7">
<td class="custemorName2">BB</td>
<td class="address2">BB Address</td>
<td>2222</td>
<td>
<form id = "target" name="detail" action="" method="post">
<input type="button" name="btnCustomerInfo" value="Detail.." />
</form>
</td>
</tr>
</table>
<div id="output"></div>
jQuery
$(document).ready(function() {
$( "#target" ).click(function( event ) {
var address1 =$(".address1").text();
var address2 =$(".address2").text();
$("#output").append(
"<table><tr><td>First Address</td><td>"+address1+"</td></tr>" +
"<tr><td>Second Address</td><td>"+address2+"</td></tr></table>" );
});
});
Option 2 : If you really need to hit the servlet in your server, You can use either ajax call (with out reloading the page) or you can add the values into request object attributes while forwarding the request from your servlet into your jsp page.

How to automate filling a simple form and clicking submit in JavaScript for a chrome extension

Been trying to do this for days now, and have failed and have searched for examples but not found one yet that has helped.
I want to navigate through a web page by filling in the details and clicking submit programmatically.
the page is as follows:
<form method='post' action='login.php'>
<table>
<tr>
<td>Email Address: </td>
<td ><input type='Text' size='30' name='email'></td>
</tr><tr>
<td>Password: </td>
<td ><input type='password' size='30' name='password'></td>
</tr><tr>
<td colspan=2> </td>
</tr><tr>
<td> </td>
<td align='left'><input type='Submit' value='Log in'></td>
</tr>
<td colspan=2> </td>
<tr><td colspan=2><hr></td></tr>
</table>
</form>
I cant change the above existing web page, So want to include code in a chrome extension written in JavaScript to save me heaps of time at the moment I cant get passed the login page!
I have been a programmer in the distant past but am not fully versed with JavaScript syntax yet..
One of my problems is the form does not seem to have an ID.
Could anyone help?
Thanks for the help so far but I am still struggling so have added more detail.
I have managed to do this submit in IE using VB in the past (from an Excel macro) using:
Sub PressSubmit(IE)
With IE.Document
Set elems = .getElementsByTagName("input")
For Each e In elems
If (e.getAttribute("value") = "Log in") Then
e.Click
Exit For
End If
Next e
IE.Document.all("email").Value = "me#email.address"
IE.Document.all("password").Value = "myPassword"
Call PressSubmit(IE)
But now I need to do the same on Chrome and I am struggling with JavaScript syntax which is new to me is there anyone that could give me a JavaScript version of this, or a better version, that I can learn from by example?

You can use document.querySelector(), Element.querySelector(), attribute selectors to set values atelements, call.click()onelement to submit`
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form method='post' action='login.php'>
<table>
<tr>
<td>Email Address: </td>
<td>
<input type='Text' size='30' name='email'>
</td>
</tr>
<tr>
<td>Password: </td>
<td>
<input type='password' size='30' name='password'>
</td>
</tr>
<tr>
<td colspan=2> </td>
</tr>
<tr>
<td> </td>
<td align='left'>
<input type='submit' value='Log in'>
</td>
</tr>
<tr>
<td colspan=2> </td>
</tr>
<tr>
<td colspan=2>
<hr>
</td>
</tr>
</table>
</form>
<script>
var form = document.querySelector("form[action='login.php']");
var submit = form.querySelector("input[type='submit'][value='Log in']");
if (submit.length) {
form.querySelector("input[name='email']").value = "me#email.address";
form.querySelector("input[type='password']").value = "myPassword";
submit.click();
}
</script>
</body>
</html>

Fill the login form before or after redirection to url automatically

I have ASP.NET Web Application that contains links to our other sites which runs locally.
So user is entering one address and got shortcuts to other addresses.
One of this pages has login form, and everytime user enter this page he has to fill it again and again. Saving login and password in browser is not an option.
I would like to make something that will automatically fill this form, but I am almost sure that I can't change this page.
The solution that I was thinking is that maybe I can open page with login form inside my own page and then use some JS to insert login & password? Is it possible?
This is source code of form that I would like to fill.
<div id="loadedLoginPage"><input type="hidden" name="hidChallenge" value="">
<table width="520" border="0" cellspacing="1" cellpadding="1">
<tbody><tr>
<td><label for="txtUserID" id="TEXT_LOGIN_USER_NAME">User name:</label></td>
<td class="inputLength"><input type="text" name="txtUserID" id="txtUserID" value="" onchange="hideErrorMessage();"></td>
</tr>
<tr>
<td><label for="txtPassWord" id="TEXT_LOGIN_PASSWORD">Password:</label> </td>
<td><input type="password" name="txtPassWord" id="txtPassWord" value="" onchange="hideErrorMessage();"></td>
</tr>
<tr>
<td><label for="txtDomainName" id="TEXT_LOGIN_DOMAIN">Domain:</label></td>
<td><input type="text" name="txtDomainName" id="txtDomainName" value="" onchange="hideErrorMessage();"></td>
</tr>
<tr>
<td> </td>
<td>
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tbody><tr>
<td>
<label for="chkRememberMe" class="chkRememberMe">
<input type="checkbox" id="chkRememberMe">
<span id="TEXT_LOGIN_REMEMBER_ME">Remember me on this computer:</span>
</label>
</td>
<td>
</td>
<!--<td> <input id="chkRememberMe" name="chkRememberMe" type="checkbox" /></td>
<td><label for="chkRememberMe" id="TEXT_LOGIN_REMEMBER_ME" ></label></td>-->
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="btnLogin" class="buttonLogon" id="TEXT_LOGIN_LOG_ON" value="Log on" onclick="handleLogOnClick()"></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</tbody></table>
<div id="errorDivWrap" name="errorDivWrap" align="right" style="display: none;">
<div id="errorImageDiv" name="errorImageDiv" style="display: none;">
<img src="/login/images/Error_Stop.png?v=1.7.1.89" width="16" height="16" alt="" id="errorImage" name="errorImage" style="visibility: hidden;">
</div>
<div id="errorTextDiv" name="errorTextDiv" style="display: none;">
<label id="errorTextField" name="errorTextField" style="visibility: hidden;">
</label></div>
</div></div>

How can i make a login form that logs me in into my webmail?

English is not my native language, so I'm srry if there are some mistakes in this question..
But this is the thing.. I am trying to make a login form on my webpage so I can login to my webmail using my webpage instead of my roundcube.. but when I do that, the webpage is not private so I returns a error..
I am using localhost to login to webmail on a server.. is the problem mabye that it has to be on the same server or is it the code?
<div id="content-wrap"><form action="https:www.glazenwasserijnederpel.nl/webmail" method="post"> <input name="login_theme" type="hidden" value="cpanel" />
<table class="login" style="width: 200px;" border="0" cellspacing="0" cellpadding="0">
<tbody style="text-align: left;">
<strong>Login, alleen voor leden</strong>
<tr style="text-align: left;">
<td class="login_lines" style="text-align: left;">Email:</td>
<td class="login_lines" style="text-align: left;"><input id="user" name="user" size="16" type="text" tabindex="1" /></td>
</tr>
<tr class="row2" style="text-align: left;">
<td class="login_lines" style="text-align: left;">Password:</td>
<td class="login_lines" style="text-align: left;"><input id="pass" name="pass" size="16" type="password" tabindex="2" /></td>
</tr>
<tr style="text-align: left;">
<td style="text-align: left;" colspan="2"><input id="login" class="input-button" type="submit" value="Login" tabindex="3" /></td>
</tr>
</tbody>
</table>
<input name="goto_uri" type="hidden" value="/?login_theme=cpanel" /> </form> <br /> <br />
<script type="text/javascript"><!--
/* Must not include external javascript -jnk 06.20.09 */
var init = function() {
document.getElementById("user").value = '';
document.getElementById("pass").value = '';
document.getElementById("user").focus();
};
if( window.addEventListener ) {
window.addEventListener('load',init,false);
} else if( document.addEventListener ) {
document.addEventListener('load',init,false);
}
// --></script>
</div>

Most websites have protection against this sort of form submission, so yes, you have to be on the same server in order to login.

Jsdatepick not passing date data on form submit in firefox or chrome

All inputs pass properly in IE9, and I print them to screen. The inputs for "order" and "progress" are passed correctly in firefox/chrome, but not the "date1" or "date2" fields. They use the jsdatepick library to determine the date - and the date is filled into the form as so: "10-01-2012" . On the next page I pick up the request data and print to screen. Any hints?
<script type="text/javascript" src="jsDatePick.full.1.3.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />
<script type="text/javascript">
window.onload = function(){
new JsDatePick({
useMode:2,
target:"date1",
});
new JsDatePick({
useMode:2,
target:"date2",
});
};
</script>
<Form action="ai_school_stats_return.asp" method="POST" name="stats">
<input type="hidden" id="order" name="order" value="order">
<tr>
<td width="40" align="right">From date:</td>
<td align="left"><input type="bundatetext" name="date1" id="date1" maxlength="10" value=<%=Session("date1")%>></td>
</tr>
<tr>
<td width="40" align="right">To date:</td>
<td width="60"><input type="bundatetext" name="date2" id="date2" maxlength="10" value=<%=Session("date2")%>></td>
</tr>
<tr>
<td width="40" align="right">Lesson Progressed Past</td>
<td width="60"><input type="text" name="progress" id="progress" maxlength="10" value=<%=Session("progress")%>></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td width="183"> </td>
<td width="133"> </td>
<td width="184"> </td>
</tr>
<tr>
<td colspan="3">
<div align="center"><input type="image" value="submit" src="../images/submit_up.gif" width="132" height="30"></div>
</td>
</tr>
</table>
</Form>

Turned out to be something extremely simple. I had a table declared outside of the form. So firefox saw the table containing the inputs outside the form while figuring out what data to pass- which when combined with the .js fn it ended up passing data not involved in the fn. Lesson: You know something is really wrong with your code when IE works but firefox doesn't.