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+
Related
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");
I have view on my jsp like this:
<form:form name = "command"
method = "post"
action = "withdrawRequest"
class = "form-horizontal group-border-dashed"
style = "border-radius: 0px;">
<table class = "table table-bordered"
id = "datatable-icons" > <!-- start table table-bordered -->
<thead>
<tr>
<th>ID</th>
<th>NO</th>
<th>AMOUNT (RP)</th>
<th>DOCTOR BALANCE (RP)</th>
<th>DOCTOR ID</th>
<th>DOCTOR NAME</th>
<th>TRANSFER ADMIN NAME</th>
<th>TRANSFER DATE</th>
<th>TRANSFER REFERENCE</th>
<th>TRANSFERRED</th>
</tr>
</thead>
<tbody>
<c:forEach var = "withdrawal"
items = "${listWithdrawals}"
varStatus = "loopStatus">
<tr class="odd gradeX">
<td>${withdrawal.id}</td>
<td>${loopStatus.index + 1}</td>
<td class="text-right"><fmt:formatNumber type="number" maxFractionDigits="2" value="${withdrawal.amount}" /></td>
<td class="text-right"><fmt:formatNumber type="number" maxFractionDigits="2" value="${withdrawal.doctor_balance}" /></td>
<td>${withdrawal.doctor_id}</td>
<td>${withdrawal.doctor_name}</td>
<td>${withdrawal.transfer_admin_name}</td>
<td><%-- <fmt:formatDate type="date" value="${withdrawal.transfer_date}" /> --%>${withdrawal.transfer_date}</td>
<td>${withdrawal.transfer_reference}</td>
<td class="text-center">
<c:if test="${withdrawal.transferred == true}">
<span class="label label-success">Transferred</span>
</c:if>
<c:if test="${withdrawal.transferred == false}">
<button class="btn btn-warning btn-sm md-trigger" data-modal="form-primary" type="button">Pending</button>
</c:if>
<div class="md-modal colored-header danger custom-width md-effect-9" id="form-primary">
<div class="md-content">
<div class="modal-header">
<h3>Confirm Withdrawal Request</h3>
<button type="button" class="close md-close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body form">
<div class="form-group">
<label class="col-sm-3 control-label">Admin Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="adminName" value="${adminName}">
<input type="text" class="form-control" name="id" value="${withdrawal.id}" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Transfer Reference</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="transferReference" value="${transferReference}">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat md-close" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger btn-flat md-close" name="submitRequest">Submit</button>
</div>
</div>
</div>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</form:form>
I cannot get the ID of which button I selected from view,
<input type = "text"
class = "form-control"
name = "id"
value = "${withdrawal.id}" />
If I use this code
String withdrawalId = request.getParameter("id");
The value is always 120.
For example:
How do I get the correct ID when I click the modal window?
It seems that the problem is in Nifty Modal Window Effects you are using for popup. It opens modal window for the last row.
It can be fixed with following jsp modifications.
Move modal window declaration out of table. Make it single for page. And rename id field to make it unique, e.g. transferredId
Add onclick to buttons opening modal window in order to init it (set transferredId and others) with necessary values
So your form would be (just ending to save space)
....
<td class="text-center">
....
<c:if test="${withdrawal.transferred == false}">
<button class="btn btn-warning btn-sm md-trigger" data-modal="form-primary" type="button"
onclick="document.getElementById('transferredId').value=${withdrawal.id}">
Pending
</button>
</c:if>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<div class="md-modal colored-header danger custom-width md-effect-9" id="form-primary">
<div class="md-content">
<div class="modal-header">
<h3>Confirm Withdrawal Request</h3>
<button type="button" class="close md-close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body form">
<div class="form-group">
<label class="col-sm-3 control-label">Admin Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="adminName" value="${adminName}">
<input type="text" class="form-control" name="transferredId" id="transferredId" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Transfer Reference</label>
<div class="col-sm-9">
<input type="text" class="form-control" name="transferReference">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat md-close" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger btn-flat md-close" name="submitRequest">Submit</button>
</div>
</div>
</div>
After that String withdrawalId = request.getParameter("transferredId"); will return correct id.
Excuse me for not add this as a comment, as i can't because i still not have 50 reputation (still 16), i just want you to test something, try to refresh the page, and open row with ID 119 for example first time, i mean any Id rather than 120, and see what happen, if the value that you opened first time is always still exist, so the problem is not in id 120 and the problem is that u may use if not null to set the value some where, so first time it will be null and the value added to it, but next times it will have a value already so u can't change it, and if u can't solve the problem after doing that, please upload your controller so we can detect the problem
Check the generated HTML. Looks to me that it contains listWithdrawals.length instances of that <input and all of them have the same name.
request.getParameter("id") is going to return a single value, not a list of all the values. What you need is request.getParamaterValues("id") that is going to return all of them.
This is because when the form is submitted all those input values are going to be sent.
So the simple solution (with no JavaScript magic) is to get all the lists of values with request.getParamaterValues and deal with everything that changed. ids[0] and transferReferences[0] would be the needed values for the first item in listWithdrawals:
String[] ids = request.getParamaterValues("id");
String[] transferReferences = request.getParamaterValues("transferReference");
for (int i = 0; i < ids.length; i++) {
System.out.println(ids[i]);
System.out.println(transferReferences[i]);
}
Another solution would be to generate unique names for each input/item in listWithdrawals:
<c:forEach var="withdrawal" items="${listWithdrawals}" varStatus="loopStatus">
<input type="text" class="form-control" name="${'transferReference_'.concat(withdrawal.id)}" value="${withdrawal.id}" />
</c:forEach>
And then you'd be able to access the transferReference value of a withdrawal with ID 119 like this:
request.getParameter("transferReference_119")
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();
}
İ 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" );
});
I have the following class that I'm using in my Java with JSP applicaton.
//
public class QuestionBO implements Serializable{
private int questionId;
private int testID;
private String question;
private TutorBO infoAboutTutor;
private SubjectBO infoAboutSubject;
private TestBO infoAboutTest;
private List<AnswerBO> answers;
public QuestionBO() {
}
public QuestionBO(String question) {
this.question = question;
}
getter & setter....
The JSP page has a form where each Question (its String representation) has a checkbox next to it. A user marks some of the questions and submits the form to the server for processing by a servlet.
What is the conventional way of binding the Question objects with the checkboxes so that I could find out what Questions have been selected?
Currently I'm using the following approach for constructing the form:
//
<c:if test="${not empty questionsForSubject}">
<form action="/TutorWebApp/controller" method="POST" name="addQuestionForm">
<input type="hidden" name="command" value="add_question_list" />
<input type="hidden" name="testName" value="${testName}"/>
<table border ="1">
<tbody>
<c:forEach items="${questionsForSubject}" var="question">
<tr>
<td>
<input type="checkbox" name ="choosen_question"
value="${question.getQuestion()}">
${question.getQuestion()}
<br />
</td>
</tr>
</c:forEach>
</tbody>
</table>
<input type="submit" value="Add questions "/>
</form>
And I shouldn't use frameworks.
Thanks
And I have last question
<c:if test="${not empty questionsForSubject}">
<form action="/TutorWebApp/controller" method="POST" name="addQuestionForm">
<input type="hidden" name="command" value="add_question_list" />
<input type="hidden" name="testName" value="${testName}"/>
<input type="hidden" name="questionsForSubject" value="${questionsForSubject}"/>
<table border ="1">
<tbody>
<c:forEach items="${questionsForSubject.keySet()}" var="questionID">
<tr>
<td>
<input type="checkbox" name ="choosen_question" value="${questionID}">
${questionsForSubject.get(questionID).getQuestion()}
<br />
</td>
</tr>
</c:forEach>
</tbody>
</table>
<input type="submit" value="Добавить вопросы"/>
</form>
How I can get map from this page on servlet?
Give each checkbox an unique value. For example, the unique question identifier:
<c:forEach items="${questionsForSubject}" var="question">
<tr>
<td>
<input type="checkbox" name="chosen_question" value="${question.questionId}" />
${question.question}
<br />
</td>
</tr>
</c:forEach>
This way you'll be able to grab all checked values by just the following call in the servlet:
String[] chosenQuestions = request.getParameterValues("chosen_question");
Generate an unique name for each checkbox as follows:
<input type="checkbox" name="${question.questionId}" />
or:
<input type="checkbox" name="choosen_question_${question.questionId}" />
After that, you're already able to identify each checkbox in your servlet