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.
Related
Excuse my English, I'm learning. I am trying to login via Jsoup. However, there is a javascript function in the form to be sent via post. It will be if there is any way to execute the Encriptar_Enviar() function in Jsoup.
<form name="frmLogin" action="javascript:Encriptar_Enviar();void(0);"><table width="80%" border="0" align="center" cellpadding="0" cellspacing="1">
<tbody><tr>
<td colspan="3" class="txt">
</td>
</tr>
<tr>
<td class="subsubtitulo">Login</td>
<td class="subsubtitulo">Senha</td>
<td width="24%" rowspan="3" id="td_btn_ok"><input id="btnOk" class="btnOk" type="submit" name="Submit" value="OK">
</td>
</tr>
<tr>
<td width="36%" class="conteudoTexto">
<input class="formulario" name="LOGIN" type="text" id="txtLogin" size="15" maxlength="30">
</td>
<td width="40%" valign="top">
<input class="formulario" name="SENHA" type="password" id="txtSenha" size="15" maxlength="30">
</td>
</tr>
<tr>
<td colspan="3">
Esqueci minha senha
</td>
</tr>
<script src="lib/scripts/logins.js"></script>
</tbody></table><input type="hidden" name="TIPO_USU" value="1"></form>
Here is my code, but it is giving error. Please help me.
Connection.Response loginForm = Jsoup.connect("https://qacademico.ifpe.edu.br/qacademico/index.asp?t=1001")
.method(Connection.Method.GET)
.execute();
Map<String, String> loginCookies = loginForm.cookies();
Document document = Jsoup
.connect("https://qacademico.ifpe.edu.br/qacademico/lib/validalogin.asp")
.data("Submit", "OK")
.data("LOGIN", "MATRICULA_DO_ALUNO")
.data("SENHA", "SENHA_DO_ALUNO")
.data("TIPO_USU", "1")
.cookies(loginCookies)
.post();
This one is very tricky and it's impossible to do it using Jsoup. It doesn't just post your login and password when you submit the form. It GETs this additional URL: https://qacademico.ifpe.edu.br/qacademico/lib/rsa/gerador_chaves_rsa.asp?form=frmLogin&action=%2Fqacademico%2Flib%2Fvalidalogin%2Easp to obtain RSA keypair.
Then it encrypts your data using this javascript library: https://qacademico.ifpe.edu.br/qacademico/lib/rsa/RSA.js and posts your login data encrypted:
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>
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>
//input field where user submit data into mysql database and immediately it shows in table
<form name="form" action="" method="post">
<input type="text" name="pitanje" class="search-input" placeholder="Pitajte..." />
<input class="search-btn" type="submit" value="Go" />
</form>
<table class='table'>
<tr>
<th>ID</th>
<th>Question</th>
<th>Date</th>
<th>Like</th>
<th>Views</th>
<th>Answer??</th>
</tr>
<tr>
<td>1</td>
<td>Question</td>
<td>Date</td>
<td>Views</td>
<td>Like</td>
<td>
<button>Press</button>
</td>
</td>
</tr>
</table>
Best example of that is http://www.incredibox.com/top-50 try to click on some row and you will see. Every row
I need to create a table with two rows and three columns.
<table border="1">
<tr>
<td>Male</td>
<td>Female</td>
<td>Total</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Here I need the second row table data's as a input field like a form. I need to fill them by my own and submit it. How can this be done.
Thank You
if your sending your form to serverside then there is no need to take hidden field. Instead give name attribute to your fields. It will be available on the serverside page.
<form id="FormName" action="server.php">
<table border = "1">
<tr>
<td> Male </td>
<td> Female </td>
<td> Total </td>
</tr>
<tr>
<td> <input type="text" id="name" name="name" /></td>
<td> </td>
<td> </td>
</tr>
</table>
<input type="button" value="Submit Data" onclick="submitForm()" />
</form>
function submitForm(){
if(false)//check for errors
{
}else{
$('#FormName').submit();
}
}
Create a form
<form name="myform" action="xxx.php">
//create 3 hidden fields here
</form>
HTML
<table border = "1" id="mytable">
<tr>
<td> Male </td>
<td> Female </td>
<td> Total </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<input type="button" value="Submit Data" onclick="submitTableData()" />
On your button click, get the values of each td and assign it to the hidden fields and then call submit
function submitTableData()
{
$('#hidden1').val('value of td1'); //$('#mytable tr:nth-child(2)').find('td:nth-child(1)').text()
$('#hidden2').val('value of td2'); //$('#mytable tr:nth-child(2)').find('td:nth-child(2)').text()
$('#hidden3').val('value of td3'); //$('#mytable tr:nth-child(2)').find('td:nth-child(3)').text()
$('#myform').submit();
}
<form action="submit.php" method="post">
<table width="100%">
<tr>
<td>Male</td>
<td>Female</td>
<td>Total</td>
</tr>
<tr>
<td><input type="text" name="textnamehere" /></td>
<td><input type="text" name="textnamehere" /></td>
<td><input type="text" name="textnamehere" /></td>
</tr>
</table>
<input type="submit" value="submit" />
</form>
function addForm {
if{
somecodes here if true
}else{
$('variablenamehere') .submit();
}
}
In the cells of the second row just put some inputs:
<tr>
<td><input type="text" name="male"></td>
<td><input type="text" name="female"></td>
<td><input type="text" name="total"></td>
</tr>
When submitting the form, you will have 3 additional parameters: male, female and total in your request which will contain the values.
You can go on even further and - if i understood it right - since you have only numbers, you can specify the input type as being number and, with a small javascript function, you can make the total be calculated automatically.