This is my code
<%
if(request.getParameter("cart") != null)
{
......
}
<%
<form method="post"><input class="auto-style2" height="44" name="cart"
src="divers/panier.jpg" type="image" width="71" />
So when I press the button name="cart" I can get request.getParameter("cart").
How to know its a post back when I click on the img ?
How to know its a post back when I click on the img ?
Check the request method.
if ("post".equalsIgnoreCase(request.getMethod())) {
// It's a POST request.
}
Or, better, let the form submit to a servlet and do the job in doPost() method.
Unrelated to the concrete problem, you're in essence abusing the <input type="image"> here to have just a button with a background image. It will not sent a request parameter cart, but instead send the mouse cursor position on the image as cart.x and cart.y. You need to check those parameters instead.
if (request.getParameter("cart.x") != null) {
// Image button is clicked.
}
See also HTML Input (type=image) not working on Firefox 4.
Related
I have a node application, where on the frontend, I have multiple buttons that activate the same post route as specified by the formaction attribute below:
<button type="submit" formaction="/specifiedroute">-</button>
However, I want to be able to tell which button was clicked within the post route. Is there anyway I would be able to access the name or id attributes of the button within the post route (perhaps within the request object)? If not, would the only way to identify the buttons be to add a parameter to the formaction as below:
<button type="submit" formaction="/specifiedroute?redbutton">-</button>
Note all these buttons exist in one form (I can't change this) and I can't just use a hidden input field.
May be you should try this
<button type="submit" formaction="/specifiedroute?button=red">Red</button>
<button type="submit" formaction="/specifiedroute?button=green">Green</button>
<button type="submit" formaction="/specifiedroute?button=blue">Blue</button>
// NodeJS
Controller
app.post('/specifiedroute', (req, res) => {
let buttons = {
"red": "Red Button Clicked",
"green": "Green Button Clicked",
"blue": "Blue Button Clicked"
}
let reqButton = req.query.button;
res.send(buttons[reqButton])
})
The name and value of the submit button used to submit a form will be included in the submitted form data.
<button formaction="/specifiedroute" name="foo" value="minus">-</button>
and on the server
if (req.body.foo === 'minus')
I've created a form using html validations with Angular 2.
I want to to check the sate of the inputs (no empty, correct format, etc) when the user click to a certain button. At the moment I'm doing it as following:
<form id="memberForm" #memberForm="ngForm" >
<input
type="text"
id="MemberName"
required
name="MemberName"
[(ngModel)]="newMember.name">
</form>
<div
[ngClass]="{'button_disabledButton' : !memberForm?.valid}"
(click)="onSubmit(memberForm?.valid, memberForm);">
<span>Next</span>
</div>
With this, I'm only evaluating the input once clicked and focus out. How can I make it hapens when the user click in the "Next" element?
You should make getter/setter solution for your ngModel input.
In the .ts file in the appropriate class put this:
savedVar:string = '';
get variable(): string {
return this.savedVar;
}
set variable(str: string) {
this.savedVar = str;
// do your validation
}
In template use ngModel=variable like this:
<input [(ngModel)]="variable">
There is a html code
<form>
<button type="submit" name="button-name" value="btn1">button1</button>
<button type="submit" name="button-name" value="btn2">button2</button>
</form>
Is there any way to determine which button was clicked on a server side? I'd like not to use javascript and not to replace them with input.
That's funny but I have nil in params["button-name"]
This would work if you are working with PHP on the server side.
if(isset($_GET['button-name']))
echo $_GET['button-name'];
You should be able to check the value of the button-name parameter on the server side to determine which button was clicked. In decent browsers it will be the value of the value attribute, but in IE you will receive the inner html of each button.
So for example, if I clicked the first button and was using Java on the server side:
In IE
String param = reqeust.getParameter("button-name");
System.out.println(param); // Prints button1
In Firefox
String param = reqeust.getParameter("button-name");
System.out.println(param); // Prints btn1
If you were to use PHP, this would work (assuming you use GET instead of POST):
if((isset($_GET['button-name'])) && ($_GET['button-name'] === 'btn1' || $_GET['button-name'] === 'btn2')){
}
In my View, there are two <input type="image"> tags, and they are inside a Form.
In my Controller, the value of these two <input type="image"> always appears as 'null'. Earlier, with <input type="submit">, the values were posted to the controller.Now they're not.Can anyone tell me how to access those values in the Controller?
View:
#using (Html.BeginForm("Load", "Consent"))
{
//some code
<div id="button1" style="right:150px; width:90px; bottom :15px;position:absolute"><input type="image" src="../../img/ButtonBack.png" name="button" value="Previous" id="back" /></div>
<div id="button2" style="right:20px; width:90px; bottom :15px; position:absolute"><input type="image" src="../../img/ButtonNext.png" name="button" value="Acknowledge" id="ack" /></div>
</div>
}
The Form is getting posted to the controller, but the value of string button is 'null'
Controller:
[HttpPost]
public ActionResult Load(bool? chk_acknowledge, string button)
{
// some code
}
The browser is not required to post the value of the "value" attribute, so don't rely on it. Value is meant for radio and checkbox input fields: http://www.w3.org/TR/html401/interact/forms.html#edef-INPUT
However, browsers will post two other form fields: name.x and name.y. You could instead name your two image buttons "nextButton" and "prevButton". In your action, check if Request.Form contains "nextButton.x". If it exists, nextButton has been pressed. Likewise, if "prevButton.x" exists, prevButton has been pressed.
Only the value of the clicked image button would be posted (only the clicked submit button). While having the 2 image buttons inside a form, if there is another submit button and you click on that, the image buttons would not get posted.
Eg : You click on first image button inside div#button1 - in the post array, there would be [button] => Previous the other image button will not get posted.
Quote from the specification:
When a pointing device is used to click on the image, the form is
submitted and the click coordinates passed to the server. The x value
is measured in pixels from the left of the image, and the y value in
pixels from the top of the image. The submitted data includes
name.x=x-value and name.y=y-value where "name" is the value of the
name attribute, and x-value and y-value are the x and y coordinate
values, respectively.
So:
#using (Html.BeginForm("Load", "Consent"))
{
... some code
<input type="image" src="#Url.Content("~/img/ButtonBack.png")" name="Previous" />
<input type="image" src="#Url.Content("~/img/ButtonNext.png")" name="Acknowledge" />
}
and then:
[HttpPost]
public ActionResult Load(bool? chk_acknowledge)
{
if (!string.IsNullOrEmpty(Request["previous.x"]))
{
// the Previous image button was clicked
}
else if (!string.IsNullOrEmpty(Request["acknowledge.x"]))
{
// the Acknowledge image button was clicked
}
...
}
In general, is it possible to have two different buttons within the same form that post to different controller actions in ASP.NET MVC?
I am essentially trying to have two input (type="button") tags in the same form, but I want them to perform different controller actions. I would like to do this in a few cases because I think it provides a good aesthetic to be able to click buttons as opposed to hyperlinks. Is there a way to do this or should I design it differently?
Not really possible without using Javascript. With Javascript you'd just have to define different click handlers that invoked the proper action.
$(function() {
$('#button1').click( function() {
$(form).attr( 'action', '<% Url.Action( "action1" ) %>' )
.submit();
return false; // prevent default submission
});
$('#button2').click( function() {
$(form).attr( 'action', '<% Url.Action( "action2" ) %>' )
.submit();
return false; // prevent default submission
});
});
Some thoughts about handling this in the browser:
You can use links which are styled to look like buttons. This is easy to do, either with images or by putting the link in a block element with borders.
You can use two buttons which don't directly submit; they instead call a javascript function that sets the form action before submitting.
If all you want is something like OK & Cancel buttons, then have a look at this post by David Findley.
I'm using this method on my Edit view, where I have an Edit button and a Delete button. The delete button only requires the Id of the item. In the code below you can see that I've named my attribute "AcceptFormValueAttribute". This is method good for me, because my Delete [Get] action just shows a message asking for confirmation, so needs the redirect.
[ActionName("Edit")]
[AcceptFormValue(Name = "Action", Value = "Delete")]
[AcceptVerbs(HttpVerbs.Post)]
[ValidateAntiForgeryToken]
public ActionResult EditDelete(int? id)
{
return RedirectToAction("Delete", new { id = id });
}
This has nothing to do with ASP.NET MVC but with html. The only way I see how you could do this is by modifying the action attribute of the form tag using javascript on submission of the form by checking which button was pressed.
Well there are a few ways you could handle this. Assuming you aren't sending data with the button click I'd go with option 3. If data must be included then consider option 1 with some sort of temporary data store (like TempData).
One form posts to one controller
action on submit and the controller
action checks which button was
clicked and then dispatches a
RedirectToAction(). (Not great)
Multiple forms on one page post to multiple controller actions (Better)
Inside or outside a form create an input type="button" and give it an onclick handler
that redirects the user to a controller action (Best)
Haven't tried this, but given the ID of the clicked button does get sent VIA http POST, you could probably do something like:
<input type="submit" name="GO" ID="GO" value="GO BUTTON" />
<input type="submit" name="STOP" ID="STOP" value="STOP BUTTON" />
Then on the mvc end, just have two methods, one with a go parameter, one with a stop parameter.
Method #1
How about using two different forms wrapping the buttons, then using CSS to position one of them so that it appears (visually) to be inside the "main" form?
A really quick example:
<fieldset id="CombinedForm">
<form ... action="Method1">
...form stuff here...
<input id="Button1" type="submit" value="Do something">
</form>
<form ... action="Method2">
...form stuff here...
<input id="Button2" type="submit" value="Do something else">
</form>
</fieldset>
...Then using CSS as follows:
#CombinedForm {
position: relative;
padding-bottom: 2em; /* leave space for buttons */
}
#Button1, #Button2 {
position: absolute;
bottom: 0;
}
#Button1 {
left: 0;
}
#Button2 {
right: 0;
}
The result should be that you have a fieldset or div which looks like a form, having two actual HTML forms inside it, and two buttons which are positioned within the parent box, yet submitting to different locations.
Method #2
Another method occurs: have both buttons in the same form, pointing to one controller action, that then decides (based on the value of the button clicked) which action to redirect to.
Its not Javascript required...
how about this
public ActionResult DoSomething()
{
// Some business logic
TempData["PostedFormValues"] = Request.Form;
if (Request.Form("ButtonA") != null)
{
return RedirectToAction("ActionA", RouteData.Values);
}
return RedirectToAction("ActionB", RouteData.Values);
}
I think that I can suggest more simple one.
For example you have two buttons : ButtonA,ButtonB and want to perform different
action on each one.
Simplest solution is : just use BeginForm statement:
#using ( Html.BeginForm("ButtonA" , "Home") )
{
<input type="submit" value="ButtonA"/>
}
#using ( Html.BeginForm("ButtonB" , "Home") )
{
<input type="submit" value="ButtonB" />
}
You must also declare ButtonA,ButtonB actions in your Home controller :
[HttpPost]
public ActionResult ButtonA()
{ . . . }
[HttpPost]
public ActionResult ButtonB()
{ . . . }