İ have a form. When user click submit button, i want to show alert and submit the form.
Here is my code sample.
<form action="DoMakeApplication" Method="post">
<td>
<button class="btn type7 color1" type="submit" id="makeApplication" onclick="makeApp();return false" >Başvur</button>
</td>
<input type="hidden" th:value="${jobAdvert.company.companyName}" name="companyName" ></input>
<input type="hidden" th:value="${jobAdvert.company.id}" name="companyId" ></input>
<input type="hidden" th:value="${jobAdvert.id}" name="advertId" ></input>
</form>
This should do the trick:
<form action="DoMakeApplication" method="post" onsubmit="alert('you submitted the form');">
You can proceed as follows:
HTML
<form action="DoMakeApplication" method="post" id="my-form">
<td>
<input class="btn type7 color1" type="submit" id="makeApplication" value="Başvur">
</td>
<input type="hidden" th:value="${jobAdvert.company.companyName}" name="companyName" ></input>
<input type="hidden" th:value="${jobAdvert.company.id}" name="companyId" ></input>
<input type="hidden" th:value="${jobAdvert.id}" name="advertId" ></input>
</form>
JavaScript
document.getElementById('my-form').onsubmit = function () {
alert(42);
};
DEMO
Try
$("#makeApplication").on("click", function(e){
e.preventDefault();
alert("alert here");
// use either of the following
//$(this.form).submit();
//$(this).parents('form:first').submit();
//$("form-id").submit(); // best one
});
YOu can do it like Minko said or you can attach event directly on your button.
In a javascript file write:
$( "#buttonId" ).click(function() {
alert( "Hello, i'm an alert" );
});
THen remember to add your javascript file to your project
You can do it like this using java script.
<script type="text/javascript">
function myalert(){
alert("Form is submitted");
}
</script>
</head>
<body>
<div>
<form action="" method="POST">
<table>
<tr>
<td>Username</td>
<td colspan="" rowspan="" headers=""><input type="text" name="username" value="" placeholder="enter username"></td>
</tr>
<tr>
<td>Password</td>
<td colspan="" rowspan="" headers=""><input type="password" name="password" value="" placeholder="enter password"></td>
</tr>
<tr>
<td colspan="1" rowspan="" headers="" align="right"><input type="submit" name="login" value="Login" onclick="myalert()" placeholder=""></td>
<td colspan="1" rowspan="" headers="" align="right">Click to signup</td>
</tr>
</table>
</form>
</div>
</body>
</html>
Alok is correct in case you want to give an id to your form you can do it like this:
$( "#yourFormId" ).submit(function( event ) {
event.preventDefault();
alert( "some alert message" );
});
Related
I have been trying to implement a reCaptcha in my little project. I added two scripts below the login validation form section, and reCaptcha is working fine, but I would like to remove a reCaptcha "Submit" button and link it to "Login" one. Can anyone help me with this?
</div>
<div id="content">
<form action="Validation" method="post">
<table>
<tr><td>UserName: </td><td><input type="text" name="username" value="<%=user%>" /></td></tr>
<tr><td>Password :</td><td><input type="text" name="password" value="<%=pass%>"/></td></tr>
<tr><td><input type="submit" name="Login" value="Login"/></td></tr>
</table>
</form>
<form method="post" onsubmit="return submitUserForm();">
<div class="g-recaptcha" data-sitekey="My site key" data-callback="verifyCaptcha"></div>
<div id="g-recaptcha-error"></div>
<input type="submit" name="submit" value="Submit" />
</form>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
var recaptcha_response = '';
function submitUserForm() {
if(recaptcha_response.length == 0) {
document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
return false;
}
return true;
}
function verifyCaptcha(token) {
recaptcha_response = token;
document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>
I have tried a few things, but they did not work for me.
All sorted
</div>
<div id="content">
<form action="Validation" method="post" onsubmit="return submitUserForm();">
<table>
<tr><td>UserName: </td><td><input type="text" name="username" value="<%=username%>" /></td></tr>
<tr><td>Password :</td><td><input type="password" name="password" value="<%=password%>"/></td></tr>
<tr >
<td colspan="2">
<div class="g-recaptcha" data-sitekey="My site key" data-callback="verifyCaptcha"></div>
<div id="g-recaptcha-error"></div>
</td>
</tr>
<tr><td><input type="submit" name="Login" value="Login"/></td></tr>
</table>
</form>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
var recaptcha_response = '';
function submitUserForm() {
if(recaptcha_response.length === 0) {
document.getElementById('g-recaptcha-error').innerHTML = '<span style="color:red;">This field is required.</span>';
return false;
}
return true;
}
function verifyCaptcha(token) {
recaptcha_response = token;
document.getElementById('g-recaptcha-error').innerHTML = '';
}
</script>
I am using this code to get form data used inside jsp Form.
String product=request.getParameter("product");
String qty=request.getParameter("quantity");
String price=request.getParameter("price");
writer.println(product +" "+qty+" "+price);
How Ever i am using dynamic form.How do i can get all datas in controller class.
Here is the code of view class i.e jsp Pages.
<script>
$(document).ready(function(){
$("button").on("click", function(){
var row = '<tr><td><input type="text" name="product" value="product..">'+
'</input></td><td><input type="number" name="quantity" value="quanty..">' +
' </input></td><td><input type="number" name="price" value="price.."> </input></td></tr>';
$("#customers").append(row);
});
});
</script>
</head>
<body>
<button type="button">Add More Products</button>
<form action="XmlServlet" method="get">
<table id="customers">
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td><input type="text" name="product" value="product.."></input> </td>
<td><input type="number" name="quantity" value="quanty.."></input></td>
<td><input type="number" name="price" value="price.."></input></td>
</tr>
<tr>
<td><input type="submit"></td>
</tr>
</table>
</form>
How do i can get all data's saved in text field after add more button action's.
String[] products = request.getParameterValues("product");
my java code
package com.ej.zob.modules;
import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
public class Revenue {
public void Execute(String value)
{
LaunchApplication.driver.findElement(By.linkText("VIEW")).click();
LaunchApplication.driver.findElement(By.linkText("REVENUE")).click();
LaunchApplication.driver.findElement(By.name("click")).click();
LaunchApplication.driver.findElements(By.xpath("//a[contains(#id,'Edit_')")).click();
List<WebElement> a = LaunchApplication.driver.findElements(By.xpath("//input[#type='text']"));
List<WebElement> b = LaunchApplication.driver.findElements(By.xpath("//input[#value='Update']"));
for(WebElement elem_1:a){
elem_1.clear();
elem_1.sendKeys(value);
}
for(WebElement elem_2:b)
{
elem_2.click();
}
}
}
}
my HTML
<tr>
<td>Arunachal Pradesh</td>
<td>
<div>
<input id="1_1" type="text" value="44155" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_1")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_2" type="text" value="79103" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_2")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_3" type="text" value="11639" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_3")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_4" type="text" value="22004" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_4")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_5" type="text" value="65958" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_5")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_6" type="text" value="76837" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_6")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_7" type="text" value="3642" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_7")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_8" type="text" value="84573" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_8")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_9" type="text" value="3438" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_9")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_10" type="text" value="32859" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_10")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_11" type="text" value="45793" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_11")" style="width:60px">
</div>
</td>
<td>
<div>
<input id="1_12" type="text" value="95662" style="width:50px" name="U1">
<br>
<input type="button" value="Update" onclick="fnUpdateRevenue("1_12")" style="width:60px">
</div>
</td>
<td>
<a id="Edit_1" href="#" onclick="fnEditRevenue("1");" style="visibility: hidden;">Edit</a>
|
<a id="Hide_1" href="#" onclick="fnHideRevenue(1);" style="visibility: hidden;">Hide</a>
|
<a id="Show_1" href="#" style="visibility:hidden" onclick="fnShowRevenue(1);">Show</a>
</td>
Lets first understand the functionality of my application.In my webpage there are more than 26 rows and 12 column.Each row contains 12 text box and 12 buttons and a "Edit" button too.when Edit button is clicked then text box and 'update' button will be open.this is my functionality of my webpage.
And what I want to do is when Edit button is clicked then some value should enter in text box and 'update' button should be clicked.this should happens for each row.By using the above code I am able to click on single 'Edit' button and updating only single row.
Can anyone help ?
It is updating only single row because you have not identified based on column names, try this-
WebElement table = driver.findElement(By
.cssSelector("table[id='yourtableid']"));
List<WebElement> col = table.findElements(By.tagName("td"));
for (int cnum = 0; cnum < col.size(); cnum++) {
WebElement text = driver.findElement(By.xpath("//input[#type='text']"));
text.clear();
text.sendKeys(value);
WebElement update = driver.findElement(By.xpath("//input[#value='update']"));
update.click();
}
I've a form that can edit/update data build in modal (bootstrap), I want to check the checkbox based on my row table...
this is my edit/update form :
<td><fieldset id="menu_e">
<input type="checkbox" name="menu" value="User" class="ceksmenu">User<br />
<fieldset id="sub_menu_user_e">
<input type="checkbox" name="sub_menu_user" value="User1" class="ceksmuser">User1
<input type="checkbox" name="sub_menu_user" value="User2" class="ceksmuser">User2
<input type="checkbox" name="sub_menu_user" value="User3" class="ceksmuser">User3<br />
</fieldset>
<input type="checkbox" name="menu" value="Monitoring" class="ceksmenu">Monitoring<br />
<fieldset id="sub_menu_monitoring_e">
<input type="checkbox" name="sub_menu_monitoring" value="Monitoring1" class="ceksmmonit">Monitoring1
<input type="checkbox" name="sub_menu_monitoring" value="Monitoring2" class="ceksmmonit">Monitoring2
<input type="checkbox" name="sub_menu_monitoring" value="Monitoring3" class="ceksmmonit">Monitoring3<br />
</fieldset>
<input type="checkbox" name="menu" value="Parameter" class="ceksmenu">Parameter<br />
<fieldset id="sub_menu_parameter_e">
<input type="checkbox" name="sub_menu_parameter" value="Parameter1" class="ceksmparam">Parameter1
<input type="checkbox" name="sub_menu_parameter" value="Parameter2" class="ceksmparam">Parameter2
<input type="checkbox" name="sub_menu_parameter" value="Parameter3" class="ceksmparam">Parameter3</fieldset>
</fieldset>
</td>
this is my table code :
<tbody>
<c:forEach var="row" items="${requestScope.authorityuser}">
<tr>
<td>${row.id_authority}</td>
<td>${row.nama_authority}</td>
<td><c:forEach var="u" items="${row.menu}">|${u}| </c:forEach></td>
<td><c:forEach var="u" items="${row.sub_menu_user}">|${u}| </c:forEach></td>
<td><c:forEach var="u" items="${row.sub_menu_monitoring}">|${u}| </c:forEach></td>
<td><c:forEach var="u" items="${row.sub_menu_parameter}">|${u}| </c:forEach></td>
<input type="hidden" name="id_authority" value="${row.id_authority }">
<td><a href="#update" role="button" data-toggle="modal"
class="update" id_update="${row.id_authority}"
nama_authority="${row.nama_authority}" menu="${row.menu}"
sub_menu_user="${row.sub_menu_user}" sub_menu_monitoring="${row.sub_menu_monitoring}"
sub_menu_parameter="${row.sub_menu_parameter}"> <i class="icon-edit"></i> <spring:message code="edit" text="default text" />
</a><a href="#delete" role="button" data-toggle="modal"
class="delete" id_delete="${row.id_authority}">
<i class="icon-trash"></i> <spring:message code="delete" text="default text" />
</a></td>
</tr>
</c:forEach>
</tbody>
I tried like this and it's not work :(
<script type="text/javascript">
$(document).ready(function() {
$('.update').click(function() {
if($('input:checkbox[name=sub_menu_user]').is(':checked')){
$('input:checkbox[name=sub_menu_user]').prop('checked', true);
}else{
$('input:checkbox[name=sub_menu_user]').prop('checked', false);
}
var id_update = $(this).attr("id_update");
var nama_authority = $(this).attr("nama_authority");
var menu = $('input:checkbox[name=menu]').is(':checked');
var sub_menu_user = $('input:checkbox[name=sub_menu_user]').is(':checked');
var sub_menu_monitoring = $('input:checkbox[name=sub_menu_monitoring]').is(':checked');
var sub_menu_parameter = $('input:checkbox[name=sub_menu_parameter]').is(':checked');
$('#id_authority_e').val(id_update);
$('#id_authority_l').val(id_update);
$('#nama_authority_e').val(nama_authority);
$('#menu_e').val(menu);
$('#sub_menu_user_e').val(sub_menu_user);
$('#sub_menu_monitoring_e').val(sub_menu_monitoring);
$('#sub_menu_parameter_e').val(sub_menu_parameter);
});
$('.delete').click(function() {
var id_delete = $(this).attr("id_delete");
$('#id_authority_d').val(id_delete);
});
$('#example').dataTable({
});
});
</script>
this is the output of my table
how is it possible?? any help will be pleasure :)
this is my edit/update form
this is my table
Well i just looked at the javascript portion, here is my answer.
You would have to read the Text in the HTML and parse it, for that you need to be able to get a specific cell. With the row_id you can narrow your search down and over the classname for the cloumn you get the right cell.
I hope this short working demo on jsFiddle might help you with your "problem".
HTML:
<table class="data-table">
<tr id="row_1"><td class="authority">...</td>
<!-- id should be constructed something like id="row_${row.id_authority}" -->
<td class="...">...</td>
<td class="users">|user1|user2|user3|</td>
<td class="...">...</td>
<td> edit </td>
<!-- id_update should be as in your code id="${row.id_authority}" -->
</tr>
</table>
Javascript:
$(function(){
$(".update").click(function(){
var id_update = $(this).attr("id_update");
var users = $("#row_" + id_update).find(".users").text().split("|").slice(1,-1);
for(var user in users)
alert(users[user]);
});
});
// tested on Windows 7 with Chrome 33+
edit: added some "Code"
possible JSP Code:
<c:forEach var="row" items="${requestScope.authorityuser}">
<tr id="row_${row.id_authority}">
<td class="...">${row.id_authority}</td>
<td class="...">...</td>
<td class="users"><c:forEach var="u" items="${row.sub_menu_user}">|${u}| </c:forEach></td>
<td class="...">...</td>
<td>
<a href="#update" role="button" data-toggle="modal"
class="update" id_update="${row.id_authority}"
nama_authority="${row.nama_authority}" menu="${row.menu}"
sub_menu_user="${row.sub_menu_user}" sub_menu_monitoring="${row.sub_menu_monitoring}"
sub_menu_parameter="${row.sub_menu_parameter}"> <i class="icon-edit"></i> <spring:message code="edit" text="default text" />
</a> ...
</td>
</tr>
</c:forEach>
edit:
i updated the jsFiddle (this link is different to the one above).
the important part is here...
for(var user in users){
// it could be optimized, but like this it could work.
$("input[name='sub_menu_user'][value='" + users[user] + "']")[0].checked=true;
}
// tested on Windows 7 with Chrome 33+
String isno1=request.getParameter("isbn");
String bktitle2=request.getParameter("booktitle");
String authr3=(String) request.getParameter("author");
System.out.println(isno1+bktitle2+authr3);
Enumeration paramaterNames = request.getParameterNames();
when i am taking the parameters in servlet then i am gettin my values as 'null'
what wrong am i doing.
this is the way i am setting the parameters...
from a jsp page using script tag
<script type="text/javascript">
function getHTTPObject()
{
var httpobject;
if(!httpobject && typeof(XMLHttpRequest) != 'undefined')
{
try{
httpobject=new XMLHttpRequest();
}
catch(e){
xmlhttp=false;
}
}
return httpobject;
}
var httpob=getHTTPObject();
function handleHttpResponse(){
if(httpob.readyState==4){
//alert("sd");
var result=httpob.responseText;
alert(result);
/* document.write("hi your book is submitted !!!!!"); */
}
}
function auth(){
var params="isbn="+document.mayurform.isbn.value+"&booktitle="+document.mayurform.booktitle.value+"&author="+document.mayurform.author.value;
alert("params sending"+params);
httpob.open("POST","addbook",true);
httpob.setRequestHeader("Content-type","application/x-www-form-urlencoded");
httpob.setRequestHeader("Content-length",params.length);
httpob.setRequestHeader("Connection","close");
/* httpob.setRequestHeader("Content-type","application/x-www-from-urlencoded");
httpob.setRequestHeader("Content-length",params.length);
httpob.setRequestHeader("Connection","close"); */
httpob.onreadystatechange=handleHttpResponse;
httpob.send();
}
</script>
and this my form.....
<form style="margin: 100px;" name="mayurform">
<table align="center">
<tr>
<td align="center">ISBN NO.</td>
<td><input align="middle" type="text" size="20" name="id" id="isbn">
</tr>
<tr>
<td align="center">Book-Title</td>
<td><input align="middle" type="text" size="20" name="pwd" id="booktitle">
</td>
</tr>
<tr>
<td align="center">Author</td>
<td><input align="middle" type="text" size="20" name="pwd" id="author">
</tr>
<tr>
<td><input align="middle" type="button" size="20" name="Add-Book" onclick="auth()">
</tr>
</table>
</form>
You are fetching parameters with ID's you should give Names.
for example
String isno1=request.getParameter("isbn"); //here is isbn is id
you should write
<input align="middle" type="text" size="20" name="id" id="isbn">
String isno1=request.getParameter("id");-----------^
and also
<td><input align="middle" type="text" size="20" name="pwd" id="booktitle">
<td><input align="middle" type="text" size="20" name="pwd" id="author">
both inputs have the same **name** please check it
http://www.apl.jhu.edu/~hall/java/Servlet-Tutorial/Servlet-Tutorial-Form-Data.html
Use like below ajax send() to send data
function auth(){
var params="isbn="+document.mayurform.isbn.value+"&booktitle="+document.mayurform.booktitle.value+"&author="+document.mayurform.author.value;
alert("params sending"+params);
.......
...
httpob.send(params);//change is here
}
call httpob.send(),passing in the parameters that will be sent (without the "?" prefix).