I have multiple buttons submitting a form. I check to see which button was clicked by the input value that gets passed into my controller.
public async Task<ActionResult> MyAction(MyModel model, string command)
The html below works. In my controller command equals myValue
<input type="submit" name="command" value="myValue" />
The html below doesn't work. In my controller command is null
<input type="image" name="command" src="..." value="myValue"/>
W3C says the type 'image' is a submit button
So why are these two input elements behaving differently?
An image submit button indeed behaves differently, by definition, both according to the expired working draft linked to in the question and the current HTML5 CR draft and the HTML 4.01 recommendation. According to HTML5 CR, construction of the form data set does not add a name=value pair for an image submit button but name.x=... and name.y=... with the coordinates of the clicked location as values. This corresponds to old definitions and browser practice, except that Chrome additionally adds a name=value pair.
Thus, in your case, the form data will contain the fields command.x and command.y, with values that you are probably not interested in. This is what you need to take as starting point when coding the form handler. This means that if you need to recognize which of several image buttons was used, you need to give them different name attributes.
You can have one hidden field and set the command name in that hidden field which ever button is click and get the name of the button that submited the form on server side.
Javascript
$(".submit").click(function(){
var commandName = $(this).attr("val");
$("input[type=hidden]").val(commandName);
});
HTML
<form>
<input type="hidden" name="command">
<input type="submit" value="submitbtn" class="submit" />
<input type="image" src="..." value="imagebtn" class="submit"/>
</form>
The simplest (and maybe not safe) way to accomplish this task is with inline JQuery, here's how :
VIEW :
<input type="image" src="..." onclick="$('#hidImgValue').val('Image1');" />
<input type="hidden" id="hidImgValue" name="command" value="none" />
CONTROLLER :
public async Task<ActionResult> MyAction(MyModel model, string command)
Command var will have "Image1" as value.
Related
I am using Sitecore 7.1. I created one search page and created a textbox by using the Web Form For marketer in it. On button click I want catch the text box value in a new page name search-result. How can I catch the WFFFM text box value in New page? I Don't want use JavaScript click event and query string.
<form class="search-form" action="/searchresults" method='get' >
<label><input type="text" name="searchText" id="searchText" placeholder="#placeholderText"></label>
<input type="submit" name="submit" value="" class="#cssClass">
</form>
But i am getting below type of URL
http://www.xyz/searchresults?searchText=searchTextHere&submit=
Can you capture the "onsubmit" event and update the URL to whatever you need using Javascript? You only said not to use onclick event. I'm assuming that you may want to have /searchresults/ as a result. Of course, I assume that your routes are set for this and searchresults can process this correctly.
I am trying to use voice over in my web page.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
First name: <input type="text" name="fname" tabindex="1"><br>
Second name: <input type="text" name="sname" tabindex="2"><br>
Third name: <input type="text" name="tname" tabindex="3"><br>
Last name: <input type="text" name="lhan" tabindex="4"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
If I open this page in a Iphone, First it reads " First name ".
I just clicked on "fname" textbox to enter any text then press the "Done" button of keypad.
Keypad disappears and then it automatically focus the "Third Name" textbox and read the text.
This behavior is not consistent.
Is it expected behavior?
How can I give order to the voice control ? (tabindex)
Thank you so much.
Not sure why you're using tabindex attribute? Most of the time, they're unnecessary - especially strictly positive values that will mess with natural tab order when browsers are in fact already doing fine with normal HTML code with links and form elements.
My advice: remove any tabindex attribute from your code, except for very special cases like a comment form in a forum where you want to type text into a textarea, then 1 or 2 tab, Enter and you're submitting your message regardless of buttons for inserting bbCode that could be placed between the textarea and the submit button.
At the slightest change in HTML code of your templates, the presence of tabindex will be forgotten, they won't be updated and it will break the tab order.
Relevant WCAG 2.0 Techniques:
F44: Failure (...) due to using tabindex to create a tab order that does not preserve meaning and operability
H4: Creating a logical tab order through links, form controls, and objects
other Techniques are linked from the ones above
Now about the rest of the code: labels of a form elements should be tagged with... label elements. Associating each label element to its respective form element (any input type - except submit, image and button one - and also any select and textarea) is done via identical values of for and id attributes:
<label for="blah">My label</label><textarea id="blah"></textarea>
JSFiddle of your code corrected
each form element and label is in its own paragraph element
label is added (around each form element so message of error or hint on the right of form element or below it can still be in the label
unique id added to each form element (I took the same value as name but whatever is a valid id is OK)
for attribute added to label with identical value as each id above
HTML code
<form action="demo_form.asp">
<p>
<label for="fname">First name: <input type="text" name="fname" id="fname"></label>
</p>
<p>
<label for="sname">Second name: <input type="text" name="sname" id="sname"></label>
</p>
<p>
<label for="tname">Third name: <input type="text" name="tname" id="tname"></label>
</p>
<p>
<label for="lhan">Last name: <input type="text" name="lhan" id="lhan"></label>
</p>
<p class="w300p txtright">
<input type="submit" value="Submit">
</p>
</form>
Relevant WCAG 2.0 Techniques:
H44: Using label elements to associate text labels with form controls
G131: Providing descriptive labels
F17: Failure (...) due to insufficient information in DOM to determine one-to-one relationships (e.g., between labels with same id) in HTML
F86: Failure (...) due to not providing names for each part of a multi-part form field, such as a US telephone number
The 5 seconds test to determine if label elements and for / id pairs are coded with accessibility in mind or not:
take a mouse
click on each text that should be a label right before or after a form element. Cursor/caret/focus must go into the form element next to it
This is a 10 second test on tablets and smartphones because tap is a bit slower ^^
Hy
What i want to do is to create a custom renderer for will_paginate which renders first, previous, next and last page and a input field where the user can type in the page number manually. I already have the links for first, last etc. but i stuck at the input field. I could create a form in the view but the input field has to be rendered between the previous and next links.
Does anyone know how to do this?
Thanks for your help
You can do this as a separate form (make sure it is a GET). All you
need is the one input element named page. Something as simple as this
should work (not all browsers may like the #). I dropped it into a
site I'm playing with now and it worked. Put it anywhere on your page.
You might have to make something more complicated if you need to
incorporate search terms.
<form action="#" method="get">
Go to page: <input type="text" name="page" value="" size="2"
maxlength="4" />
<input type="submit" name="btnSubmit" />
</form>
I have the following form
<form id="file_upload" action="/Upload/Save" method="POST" enctype="multipart/form-data">
<input type="text" id="txtProposalName" name="name" placeholder="Nome da Camiseta" />
<input type="text" id="txtProposalDesc" name="description" placeholder="Descrição da Camiseta"/>
<div class="fileupload-buttonbar">
<div class="progressbar fileupload-progressbar"></div>
<span class="fileinput-button">
Upload images
<input type="file" name="files[]" multiple />
</span>
</div>
<input type="hidden" id="imgID" name="imgID"/>
<input type="submit" id="postProposal"/>
Would call this action:
[HttpPost]
public JsonResult Save(string name, string description, string imgID)
{
return Json("a");
}
(This is the current implementation, it has no logic because I am still testing some things).
My problem is: when I click on my submit button, the action is called with the correct values, but when it returns, my browser redirects to /Upload/Save (which is the action URL).
Why is this happening? Is there any way to prevent it?
Thanks!
You can use an asynchronous call to your method (e.g. AJAX) to prevent the page from reloading.
You can use Ajax.BeginForm to prevent reload page.
As I can see you use full page reload with:
action="/Upload/Save"
Also you trying to post data to json action method in controller. You need all form submit make with jquery, most problems you will find with ajax file uploaders.
Added:
Also look at serialize() it will help you to collect all form input values.
Dont need to prevent it, just redirect the user in your server code .
I am using an id value that I pass in a hidden field. When the user submits the form I need the hidden field for my update. After the update, a new value is placed in the hidden field in the model and sent back to the view. What seems so strange is the helper always uses the first value, never updates. For example, look at the following from the View:
<%: Html.Hidden("MyId",Model.MyId) %>
<%: Model.MyId %>
First time in a look at the source in the browser yields:
<input type="hidden" id="MyId" name="MyId" value="1" />
1
** submit back to controller and model updates the MyId property to 2.
Back at the browser I now find:
<input type="hidden" id="MyId" name="MyId" value="1" />
2
The very same model property has different values! The helper method is somehow grabbing it from a prior model instance or something?
Any help greatly appreciated on what I am not understanding. BTW..get the same behavior with Html.TextBox and Html.TextBoxFor.
Thanks.
That's how HTML helpers work and it's by design. When binding they will first look at the value in the GET/POST request to see if the value is present and after that in the model. If a value is found in the request they will simply ignore the value you set in the model.
Normally you are not supposed to modify the data sent in the request inside your controller action. But if anyhow you decide to do it you will need to either roll your own helper or simply:
<input type="hidden" name="MyId" value="<%= Model.MyId %>" />