I have a form which is a jsrender template
<script id="editTemplate" type="text/x-jsrender">
<div>
<form id="myEditForm" method="POST" action="">
<table>
<tr>
<td>
Id:
</td>
<td>
<input type="text" name="id" value="{{>id}}" class="required" />
</td>
</tr>
<tr>
<td>
Name:
</td>
<td>
<input type="text" name="name" value="{{>name}}" class="required" />
</td>
</tr>
<td>
<input type="submit" value="submit" />
</td>
</tr>
</form>
I tried to add bassistance plugin based validation to the input fields but as the form is a jsrender template it is not working. any idea how to implement it???
The problem was i was adding the validation logic in the section of the html page where i created the form.
Validations could only be applied to the form once the template was compiled which happened in a seperate js file so, i added the validation code after the jsrender template was compiled ie., after these line in the js file
var html = $.render["edit-tmpl"](rowData); // adding row data to edit-tmpl
var edtdlg = $("#editDialog").html(html); // adding the template to
// editDialog
and now it works like charm:)
Related
<form id="myForm" name="theForm" action="https://bank/PaymentWindow.jsp" method="post">
<table>
<tr>
<td>MERCHANT_ACC_NO</td>
<td><input name="MERCHANT_ACC_NO" id="MERCHANT_ACC_NO" type="text" value="abc"></td>
</tr>
<tr>
<td>AMOUNT</td>
<td><input name="AMOUNT" id="AMOUNT" type="number" value="123"></td>
</tr>
</table>
<input type="submit" id='submit_payment' value="Make Payment">
</form>
If I click the submit button here, I will able to submit data to the action URL, but how can I first submit this data to Laravel controller, and then in controller send the data to the action URL(https://bank/PaymentWindow.jsp)?
I got this peace of html:
<form action="#" th:action="#{${cartServiceBaseUrl}+'/addCatalogItemToCart'}" th:object="${cartCatalogItem}" method="post">
<input type="hidden" th:value="${cartId}" th:field="*{cartId}" />
<input type="hidden" th:value="${catalogItem.catalogItemId}" th:field="*{catalogItemId}" />
<input type="submit" value="add to cart" />
</form>
Unfortunately both values are null and I dont really understand why, because both values, cartId and catalogItem.catalogItemId are available on the page.
How can I properly pass them?
Java endpoint
#PostMapping(ADD_CATALOG_ITEM_TO_CART)
public void addCatalogItemToCart(#ModelAttribute CartCatalogItem cartCatalogItem, HttpServletResponse response) {
Full HTML:
<h1 th:text="${catalog.name}">...</h1>
<a th:href="#{${customerServiceBaseUrl}+'/home/'+__${cartId}__}">home</a>
<p th:text="'Catalog ID:'+${catalog.catalogId}"></p>
<p th:text="'Name: '+${catalog.name}"></p>
<table>
<th:block th:each="catalogItem : ${catalog.catalogItems}">
<tr>
<th>article id</th>
<th>catalogitem id</th>
<th>name</th>
<th>price</th>
</tr>
<tr>
<td th:text="${catalogItem.articleId}">...</td>
<td th:text="${catalogItem.catalogItemId}">...</td>
<td th:text="${catalogItem.name}">...</td>
<td th:text="${catalogItem.price}">...</td>
<td><form action="#" th:action="#{${cartServiceBaseUrl}+'/addCatalogItemToCart'}" th:object="${cartCatalogItem}" method="post">
<input type="hidden" th:value="${cartId}" th:field="*{cartId}" />
<input type="hidden" th:value="${catalogItem.catalogItemId}" th:field="*{catalogItemId}" />
<input type="submit" value="add to cart" />
</form></td>
</tr>
</th:block>
</table>
My goal: assign attributes to objects with hidden input fields and pass them for the controller methods.
You are not set your values from controller that's why there are both values null.
Use this code on your controller.
For example:
Model and View model=new Model and View ("Your thyme leaf template name");
model.put('your key name by which you an access on your thyme leaf
page',cart Id);
return model;
This will work.
I'm having a table with multiple elements that are generated from a List and every table element from that list has a button.By clicking that button there is a post submit request which should bind the values from that table data element to a #ModelAttribute object in spring boot.
The problem is that i'm able to map the whole list but I want to bind only the table element where the button was pressed.
<div class="table-responsive">
<form th:action="#{/saveAd}" th:object="${object}" method="POST">
<table class="table table-sm table-hover">
<thead class="thead-dark">
<tr>
<th>Image</th>
<th>Title</th>
<!-- <th style="width: 16.66%">Link</th> -->
<th>Price</th>
<th>City</th>
</tr>
</thead>
<tbody id="myTable">
<th:block th:each="element, itemStat: *{lista}">
<tr
th:onclick="'javascript:rowClicked(\'' + *{lista[__${itemStat.index}__].url} + '\');'">
<input type="hidden" readonly="readonly"
th:name="?"
th:value="${element.getUrl()}" />
<td>
<input type="hidden" readonly="readonly" th:name="img" th:value="${element.getImg()}" />
<img th:src="*{lista[__${itemStat.index}__].img}" class="size" name="img" />
</td>
<td>
<input type="hidden" readonly="readonly" th:name="?" th:value="${element.getTitle()}" />
<span th:text="*{lista[__${itemStat.index}__].title}"></span>
</td>
<td>
<input type="hidden" readonly="readonly" th:name="?" th:value="${element.getPrice()}" />
<span th:text="*{lista[__${itemStat.index}__].price}"></span>
</td>
<td>
<input type="hidden" readonly="readonly" th:name="?" th:value="${element.getCity()}" />
<span th:text="*{lista[__${itemStat.index}__].city}"></span>
</td>
<td><input class="btn btn-danger" type="submit"
value="Save"></td>
</tr>
</th:block>
</tbody>
</table>
</form>
</div>
The Controller:
#RequestMapping(path = "/saveAd", method = RequestMethod.POST)
public String saveAd(#ModelAttribute("Value") ListCreationAutovitDto listCreationAutovitDto) {
return "home";
}
I have a hidden input type for every td which should map the values but i've tried naming it in different ways but i can't make it work.Are there any ways to bind only the values where the button was pressed?
Idea 1: Make each td contain a form pointing to your controller method. Then bind the values you want to pass to the model by using hidden input fields in the form. Each button would then do a submit for the form it is in.
Idea 2: If you're mapping json to your java objects in your app, you can construct the json request body in JavaScript to contain only the stuff you want for that request
I am working on a Spring MVC4 application that uses Thymeleaf as a templating engine. I have a table with team member information that has an embedded form in each row with a delete button to allow deleting a user by row. below is the table section and a screenshot of what it currently looks like...
<table class="bordered">
<thead>
<tr>
<th data-field="id">Name</th>
<th data-field="name">Password</th>
<th data-field="price">Email</th>
</tr>
</thead>
<tbody>
<tr th:each="user : ${users}">
<td th:text="${user.userName}">Name</td>
<td th:text="${user.password}">Password</td>
<td th:text="${user.email}">Email</td>
<td>
<!-- Submit the user to be deleted -->
<form th:object="${user}" class="col s12" action="/deleteUser" method="post">
<button class="btn waves-effect waves-light red col" type="submit" name="deleteUser">
Delete
</button>
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
</form>
</td>
</tr>
</tbody>
</table>
When I click the delete button my TeamController picks up the request but all the instance variables are null, I'm fairly new to Spring MVC4 and Thymeleaf so not sure if this is a valid approach or not? I am assuming that the object in the form is a reference to the user object in the row so not sure why its coming null on the controller side?
Note: the user object I am passing in the form is an instance of UserAccount.java that lives in the Model.
Was able to fix it with below updates to my form...
<td>
<!-- Submit the user to be deleted -->
<form th:object="${UserAccount}" class="col s12" th:action="#{/deleteUser}" method="post">
<button class="btn waves-effect waves-light red col" type="submit" name="deleteUser">Delete</button>
<input type="hidden" id="userName" name="userName" th:value="${user.userName}" />
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
</form>
I am working in ASP.NET MVC3 and creating a form:
#Html.BeginForm(null, null, FormMethod.Post, new { name = "frmAcnt", id = "frmAcnt" })
Because I dont want to give action and controller name. It works fine but in Firefox or any other browser it shows form between these two lines. What can I do for remove it from display?
System.Web.Mvc.Html.MvcForm {
}
and in the page source this line is showing
<form action="/Home/AccCode" id="frmAcnt" method="post" name="frmAcnt">System.Web.Mvc.Html.MvcForm
below is my view
#model CBS.Models.AccntBD
#{
ViewBag.Title = "AccCode";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>AccCode</h2>
<div>
#Html.BeginForm(null, null, FormMethod.Post, new { name = "frmAcnt", id = "frmAcnt" })
{
<table class="tablestyle">
<tr>
<td>
<input type="text" id="AcCode" name="AcCode" maxlength="10" placeholder="Account Code" autofocus="true" class="required" />
</td>
</tr>
<tr>
<td>
<label>Description</label>
</td>
<td>
<input type="text" id ="Descrip" name="Descrip" maxlength="150" placeholder="Desription..." class="Descrip"/>
</td>
</tr>
<tr>
<td>
<span>
<input type="button" name="clear" value="Cancel" onclick="clearForm(this.form);" >
</span>
<span>
<input type="submit" id="sve" name="action" value="Save" />
</span>
<span>
<input type="button" id="edi" value="Edit" name="action"/>
</span>
<span>
<input type="button" value="Delete" id="del" name="action"/>
</span>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
}
</div>
Try this once and ideally you can use #using (Html.BeginForm()){ } to define form
View
#using (Html.BeginForm(null, null, FormMethod.Post, new { name = "frmAcnt", id = "frmAcnt" }))
{
#* Your Form Content Here *#
}
HTML Output is
<form name="frmAcnt" method="post" id="frmAcnt" action="/"></form>