I have two buttons which are encapsulated with forms at SpringMVC/Thymeleaf.The interesting thing is I am not if I remove upper button, when I click second button nothing happens. I meant I am not able to call the PostMaping inside Controller which can be called if first button there. It could be an interesting issue for you but I tested it many times and could not find a reason why that happens.Could you please look at the code and let me know how it happens?
First Button:(encapsulated with form)
<form class="needs-validation" action="/showlimit" th:action="#{/showlimit}" th:object="${internetCustomer}" method="post">
<button type="submit"
class="list-group-item list-group-item-action list-group-item-primary">
<th:block th:text="#{label.customerdetails.button.limits}">
First Button
</th:block>
</button>
Second Button:(Encapsulated with form to call PostMapping at Controller)
<form class="needs-validation" action="/showlimit/{customerId}(customerId='123')}" th:action="#{/showlimit}" th:object="${limitModel}" method="post">
<button type="submit"
class="list-group-item list-group-item-action list-group-item- primary">
<th:block th:text="#{label.customerdetails.button.limits}">
Second Button
</th:block>
</button>
When you submit your second form, you are making a POST request to the url /showlimit/123. Since you are passing a parameter in an URL to show something, this should be a GET mapping, not a POST one. This affects how your request is processed by the controller, since POST request parameters are expected in the body, not the URL.
To pass this parameter to the controller, use the following mapping and method:
#GetMapping(/showlimit/{customerId})
public String foo(#PathVariable String customerId, Model model){
...
}
And change the method in your form to GET.
Related
I have a very simple issue in my asp.net core mvc project.
I have a button in one of my views, and when this button is clicked, I want to redirect to a specific controller, and a action in this controller.
Currently it looks like this:
<button class="dropbtn" class="glyphicon glyphicon-user"> something</button>
I've been looking around for methods of doing this, and one of the solutions I found, was the #Html.ActionLink("pik", "Index", "Home").
So I tried:
<button onclick="#Html.ActionLink("pik", "Index", "Home")" class="dropbtn" class="glyphicon glyphicon-user"> Log in </button>
However this is just displayed as raw html. Does'nt work.
Then, here I found this:
<button nclick="location.href='<%: Url.Action("Action", "Controller") %>'" class="dropbtn" class="glyphicon glyphicon-user"> Log in
However, my IDE just gives a bunch of unexpected token in this line. I don't undestand it either.
I then found this:
#using (Html.BeginForm("Index", "Home", FormMethod.Post)){
<button type="submit" class="btn btn-default" class="dropbtn" class="glyphicon glyphicon-user">Submit</button>
}
This works in terms of the button, but for some reason, when I wrap the button in a form, my styling gets messed up.
I would rather not use javascript for redirecting.
So how can I redirect to a controller action with a button?
#Html.ActionLink() creates an html link with an <a> tag. If you are using Bootstrap (highly recommended) you can use this.
Click Me
or if you want to use helpers, like this
#Html.ActionLink("pik", "Index", "Home", new { #class = "glyphicon glyphicon-user" })
This is the cleanest way I know of to create button with a link.
You can also check this out.
I have a simple problem yet it seems impossible to solve in AMP!!
I have a simple form with an input and a submit button like this:
<form id="myform">
<input type="text" id="srchInput"/>
<button type="submit">Submit</button>
</form>
All I want is to be able to concat a static url to the input value and redirect the page to the result, when the form is submitted.
For instance if the user inputs: "Hello" and submits the form, I would like to redirect him to a page like "MY/STATIC/URL/Hello".
Is there any way to achieve this in amp?
One way of doing this is by setting the AMP-Redirect-To header in the response (See AMP-form-redirection). Send the user input on form submission, and then generate your desired url from your API endpoint and set AMP-Redirect-To header in your response to the generated URL.
Another way of doing it would be by using navigateTo(url=STRING) action (See AMP Actions & Events) on for the form submit event. In this case you have to store the value in input to a state by using events like input-throttled, and then use url substitution in the navigateTo url string to append amp-state value.
The first method is guaranteed to work.
The second method should work in theory, but I was unable to figure out how to get AMP-STATE value by url substitution. The code for the same should be something like:
<form id="myform" on="submit:AMP.navigateTo(url="MY/STATIC/URL/AMP_STATE(endValue)>")">
<input type="text" id="srchInput" on="input-throttled:AMP.setState({ endValue : event.value })" />
<button type="submit"> Submit </button>
</form>
If you can figure out how to substitute amp-state value to the url this should work. Let me know if it helped.
The easiest way to do this is via a GET action:
<head>
...
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
</head>
<body>
<form method="GET" action="MY/STATIC/URL" target="_top">
<input type="text" id="srchInput" name="srcInput" value="test">
<button type="submit">Submit</button>
</form>
</body>
The form submit will navigate to /MY/STATIC/URL?srcInput=test.
I want to have a top menu with New, Save, Cancel buttons and below, 3 different entry forms, similar to a "desktop application". When form1 is filled up, Save button would submit the form. Also, if form2 or form3 are filled up, the same Save button can submit the form, taking into account that is in a different form.
Is it possible to do this, a submit button outside form tags ?
If not, any suggestion how to fake submit?
Thanks for your help
You just have to trigger the submit event with .submit in jQuery by example.
Here is the doc : http://api.jquery.com/submit/
Instead of an <input type="submit"> button or jQuery call you could use the new HTML5 <button> element and its form attribute to specify which form(s) the button belongs to. Then just set its formaction attribute to the required destination. Documentation
Example:
<form id="form1">
...
</form>
<form id="form2">
...
</form>
<form id="form3">
...
</form>
<button form="form1 form2 form3" formaction="processForm.php" formmethod="POST">
Submit
</button>
You can use
$("#formId").submit(function() { /*your stuff*/ });
I have a table, using display tag, in my application, that is using spring web flow. I would like to have a check box in each row, a button that allows me to select/uselect all and a button to execute a function. After clicking the button, the action will perform some database actions and the page should be render, so we can see these changes.
I don´t know which could be the best option, submitting the whole table
<form method="POST" (more params)>
<display:table id="row">
....
</display:table>
</form>
Or only the checkbox column. I this case I wouldn´t know how to implement it.
I have tryed two different approaches:
1. Using a simple input text, checkbox type. This is not possible, because when I submit the form, I need to set a path to another page.jsp (I am working with flows). Besides, I wouldn´t know how to send these values to java backend.
Using spring tags.
In this case, the problem comes whith the class conversationAction
I found some examples, but allways using MVC and controller cases.
How could I implement this issue??
EDIT
I have found a kind of solution, but I faced a new problem...
flow.xml
var name="model1" class="com.project.Model1"/>
var name="model2" class="com.project.Model2"/>
view-state id="overview" model="formAggregation">
...
</view-state>
page.jsp
form:form modelAttribute="formAggregation.model1" id="overviewForm">
...
/form:form>
...
form:form method="POST" modelAttribute="formAggregation.model2">
display:table id="row" name="displayTagValueList" requestURI="overview?_eventId=tableAction">
display:column title="">
form:checkbox path="conversationIds" value="${row.threadId}"/>
/display:column>
/display:table>
input type="submit" name="_eventId_oneFunction" value="Send>>"/>
/form:form>
FormAggregation.java
#Component("formAggregation")
public class FormAggregation {
private Model1 model1;
private Model2 model2;
//Getters and setters
I need this aggregator, because I need both models. I have tested it one by one and it is working as wished. Any idea about that??
Thanks!!
I couldn´t find a solution to add two model in a view-state. So I made a workaround, adding the fields I needed to the model I was using, com.project.Model1. So the result is:
page.jsp
<form:form method="POST" id="tableForm" modelAttribute="model1">
<display:table id="row">
<display:column title="">
<form:checkbox path="chosenIds" value="${row.id}"/>
</display:column>
<display:footer>
<div class="tableFooter" >
<input type="submit" name="_eventId_workIds" value="Send"/>
</div>
</display:footer>
</display:table>
</form:form>
flow.xml
<var name="model1" class="com.project.Model1"/>
...
<transition on="workIds" to="overview" validate="false">
<evaluate expression="actionBean.workIds(model1.chosenIds)" />
</transition>
java class
public void workIds(List<Long> ids) {
Hope it helps
My Index method renders a Strongly Typed View of type (InitDetails), auto generated code looks like the following:
#ModelType BookingDeamon.InitDetails
#Using Html.BeginForm()
#Html.ValidationSummary(True)
#<fieldset>
<legend>Reservation</legend>
<div class="editor-label">
#Html.LabelFor(Function(model) model.Pickup)
</div>
<div class="editor-field">
#Html.EditorFor(Function(model) model.Pickup)
#Html.ValidationMessageFor(Function(model) model.Pickup)
</div>
<p>
<input type="submit" value="Create" onclick="SubmitMe()" />
</p>
</fieldset>
End Using
On the above form, I want to display a select list box, as i'll be controlling this select list via JQuery to load different contents depending on different things.
I want to be able to deliver the value of that select list box as Pickup value.
when I try to do the following:
#Html.DropDownListFor(Function(model) model.Pickup)
I receive the following error:
Overload resolution failed because no accessible 'DropDownListFor' accepts this number of argument
Is it possible when user clicks on the submit button, instead of taking Pickup (textbox) value to the controller; it takes the value from the dropdownlist box and submit it to the controller?
try like this
#Html.DropDownListFor(ModelType=>Model.Pickup, (IEnumerable<SelectListItem>)ViewData["Pickup"],"--Select--")
in your controller
var Pickup= GetPickupList();
var PickupList= new SelectList(Pickup, "value", "Text", Pickup.DefaultSelectedValueIfAnyNeeded);
ViewData["Pickup"] = PickupList
write a function GetPickupList()
that returns a list of Pickup values.