I have a spring-mvc jsp table with a few input elements in the thead to be able to do some filtering. The thead does have a form as child first element.
<table>
<thead>
<form:form action="." modelAttribute="accountWrapper.theAccount">
<tr><td class="columhead" id="firstname"><div class="disp">first name</div>
<div class="filter"><form:input path="firstName"/></div></td>
<td class="columnhead" id="lastname"><div class="disp">last name</div>
<div class="filter"><form:input path="lastName"/></div></td>
<td>email</td></tr>
</form:form>
</thead>
<tbody>
When checking the source I see:
<thead>
<form id="accountWrapper.theAccount" action="." method="post">
<tr><td class="columhead" id="firstname"><div class="disp">first name</div>
<div class="filter"><input id="theAccount.firstName" name="theAccount.firstName" type="text" value="search"/></div></td>
<td class="columnhead" id="lastname"><div class="disp">last name</div>
<div class="filter"><input id="theAccount.lastName" name="theAccount.lastName" type="text" value="search"/></div></td>
<td>email</td></tr>
</form>
</thead>
<tbody>
As I'm expecting it should be.
But when I'm checking the javascript DOM, the form element is an empty element directly under <thead>, the <input> elements are outside the form. And form submission goes wrong.
<thead>
<form id="accountWrapper.theAccount" action="." method="post"></form>
<tr><td class="columhead" id="firstname"><div class="disp">first name</div>
<div class="filter"><input id="theAccount.firstName" name="theAccount.firstName" type="text" value="search"/></div></td>
<td class="columnhead" id="lastname"><div class="disp">last name</div>
<div class="filter"><input id="theAccount.lastName" name="theAccount.lastName" type="text" value="search"/></div></td>
<td>email</td></tr>
</thead>
<tbody>
You cannot have a <form> element inside a <thead> element. This rule applies to all <table> sub elements except <th> and <td>. For whatever reason, Spring serializes renders the HTML with the <form> immediately closed.
Wrap your whole table with the <form>.
Related
<form data-request="onSend" data-request-update="'{{ __SELF__}}::attbanco': '#banco' "
data-request-flash >
<table>
<tr>
<td>Nome: </td> <td ><input type="text" id="nome" name="nome"></td>
</tr>
<tr>
<td>Idade: </td> <td ><input type="number" id="idade" name="idade" value="{{usuario.idade}}"></td>
</tr>
<tr>
<td>Telefone: </td> <td ><input type="text" id="telefone" name="telefone" value="{{usuario.telefone}}"></td>
</tr>
</table>
<button type="submit" >Enviar</button>
<input type="hidden" value="{{usuario.id}}" name="id">
this code work, saves the values on database, but i need manually refresh page to see the result on my
screen, someone know how refresh after submit?
Please, explain most simple possible, i am newbie
The best way to do what you want is to put the form in a partial and update it when the form is submitted.
Replace your form with this:
<div id="specialForm">
{% partial __SELF__~"::specialForm" %}
</div>
Create a partial to describe the form; I used specialForm. It should reload the form and clear the content.
<form data-request="onSend" data-request-update="'{{ __SELF__}}::attbanco': '#banco', '{{ __SELF__ }}::specialForm': '#specialForm' "
data-request-flash >
<table>
<tr>
<td>Nome: </td> <td ><input type="text" id="nome" name="nome"></td>
</tr>
<tr>
<td>Idade: </td> <td ><input type="number" id="idade" name="idade" value="{{usuario.idade}}"></td>
</tr>
<tr>
<td>Telefone: </td> <td ><input type="text" id="telefone" name="telefone" value="{{usuario.telefone}}"></td>
</tr>
</table>
<button type="submit" >Enviar</button>
<input type="hidden" value="{{usuario.id}}" name="id">
</form>
I have a table in which there are several rows. For instance a table with flight reservations. To delete one reservation I need to have the customer id number as well as the flight id.
Considering I have only one button to try to submit these values to my Servlet, how do I do so?
I tried hiding one button but the solution doesn't seem to work for me.
I use request.getParameter() (with 2 separate variables of course) to try to fetch both values but at the end only one is captured and the other is null. Any other ideas?
This is an example of the table I have.
flight_id customer_id
Value 1 Value 2
Form buttons :
<section class="about-info-area section-gap">
<div class="container">
<div class="row align-items-center">
<form method="post" action="/admin_reservations" id="form_reservation"></form>
<table class="table table-bordered table-striped" style="float: left;">
<caption style="text-align: center; caption-side: top"><h2>Liste des réservations</h2></caption>
<thead class="thead-dark">
<tr>
<th scope="col">N°Flight</th>
<th scope="col">N°Client</th>
<th scope="col">Flight price</th>
</tr>
</thead>
<tbody>
<% for (Reservation reservation : allReservations) { %>
<tr>
<th scope="row"><% out.println(reservation.getFlight().getFlightNum()); %></th>
<td><% out.println(reservation.getClientNum()); %></td>
<td><% out.println(reservation.getFlightPrice()); %> €</td>
<td align="center">
<input type="submit" class="btn btn-default btn-sm" name="delete_reservation_client"
form="form_reservation" onClick="window.location.reload();" hidden
value="<% out.println(reservation.getClientNum()); %>">
</input>
<button type="submit" class="btn btn-default btn-sm" name="delete_reservation_flight"
form="form_reservation" onClick="window.location.reload();"
value="<% out.println(reservation.getFlight().getFlightNum()); %>"><span
class="glyphicon glyphicon-trash"></span>
Delete
</button>
</td>
</tr>
<%}%>
</tbody>
</table>
</div>
</div>
And my Servlet :
if(request.getParameter("delete_reservation_client")!=null &&request.getParameter("delete_reservation_flight")!=null){
int delete_reservation_client = Integer.parseInt(request.getParameter("delete_reservation_client").trim());
int delete_reservation_flight = Integer.parseInt(request.getParameter("delete_reservation_flight").trim());
System.out.println("Client : " + delete_reservation_client);
System.out.println("Flight : " + delete_reservation_flight);
try {
DBUtils.deleteReservation(conn,delete_reservation_client,delete_reservation_flight);
} catch (SQLException e) {
e.printStackTrace();
}
}
Thanks in advance for any help.
Fares
Instead of button use <a> tag and attached both value which you want to delete . i.e :
<td align="center">
<a href="/admin_reservations?delete_reservation_client=<% out.println(reservation.getClientNum()); %>&delete_reservation_flight=<% out.println(reservation.getFlight().getFlightNum()); %>">
<span class="glyphicon glyphicon-trash"></span>
Delete
</a>
And in Servlet get these values in doGet method by writing i.e request.getParameter("delete_reservation_client") and request.getParameter("delete_reservation_flight")
I have two tables for my inventory first is the Item List then the Item Info
I bind the Item List to a HTML Table the add a button for each row the purpose of the button is to show the Item Info or table via modal
I have already done the table and modal design but i cant get or pass the Item ID for my Item List to my modal
can anyone help me i'm kind a new in HTML (noob hir :3)
<thead>
<tr>
<th class="text-center">Item ID</th>
<th class="text-center">Particular</th>
</tr>
</thead>
<tbody class="searchable">
<% List<Inventory.MODEL.adminView>x = new List
<Inventory.MODEL.adminView>(); Inventory.BAL.ItemBAL z = new Inventory.BAL.ItemBAL(); x = z.getAdminView().ToList(); foreach (var item in x) {%>
<tr>
<td>
<%=i tem.ID %>
</td>
<td>
<%=i tem.Particulars %>
</td>
<%}%>
<td class="text-center">
<span class='glyphicon glyphicon-info-sign'></span>
</td>
</tr>
<%} %>
</tbody>
</table>
</div>
</div>
<div id="Modal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Item Inventory</h4>
</div>
<div class="modal-body">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-center">Item ID</th>
<th class="text-center">Total Quantity</th>
</tr>
</thead>
<tbody>
<% iteminvents(); %>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
that's my code, anyone can advice or can help me ?
Pass this in myFunction() as argument , As myFunction(this)
and inside function you can get ItemId as below. I have used jquery here.
function myFunction(sender)
{
var CurrentRow=$(sender).closest("tr");
var ItemId=$("td:eq(0)",$(CurrentRow)).html(); // Can Trim also if needed
}
I'm trying to show a form inside a fancybox but i can't get it to show something.
I dont get how this fancybox works.
My code looks like this:
Show Fancybox
<div id="divForm" >
<form action="code_eingabe.php" method="post">
<table >
<tr>
<td colspan="2"><h1>E575 - Gewinnspiel</h1></td>
</tr>
<tr>
<td colspan="2"><?php if(isset($text)){echo $text;} ?></td>
</tr>
<tr>
<td><input type="text" name="code"/></td>
<td><input type="submit" name="submit" value="submit!"/></td>
</tr>
</table>
</form>
</div>
You have to wrap your content with a div that has display: none
<div id="divForm" style="display: none">
<-- put your content here -->
</div>
EDIT
to pop up : see this sample of a popped up fancybox content when register :
$("#Register").click(function() {
if($(this).is(':checked')) {
alert("This is a fancybox! Register here.")
$('#CheckoutOptions').fancybox('');
}
})
I have displayed a table using struts iterator tag. Now every row has an edit link at the end. I need to be able to send that row into action when the edit button is clicked .
But I am unable to understand how to do that. I have
<s:form action="/execute" id="frm" name="frm" method="POST">
<table style="width: 800px; ">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Actions </th>
</tr>
</thead>
<s:iterator value="listToIterate" var="row" status="stat" begin="0" >
<tbody>
<tr>
<td><s:property value="ID" /></td>
<td><s:property value="Name" /></td>
<td><s:a href="#" onclick="document.forms['frm'].submit();">
edit<s:param name="Name" value="%{#row[2]}"/></s:a></td>
</tr>
</tbody>
</s:iterator>
</table>
</s:form>
Using the param tag I want to set the row as a parameter so that I can retrieve it in my action . How do I do this ?
Assuming your form is displaying id's correctly... then substitute your s:a with one following this form:
<s:a namespace="/yournamespace" action="the-edit-action">
edit<s:param name="ID" value="ID"/>
</s:a>
I would rather ID be called id. the-edit-action will need a getter and setter for id.