This question is somehow similar to this one.
I have a form in my ecommerce solution. When you insert something into the cart, you can change number of items. The cart is whole in one form. The form has two submit buttons - recalcualte and continue (which will take buyer to Step 2 of the process).
When user changes the number of items using the inputs, he can either hit recalculate (which sends post to app that will change the numbers in session/db) or continue (that will also send the post data to recalculate and then take user to the step 2).
But when user hits enter, the recalculate button takes precedence.
What I want is to make the recalculate button submit the form, but ONLY when clicked and NOT when submited by pressing enter. In contrast the "continue" button should work also with enter.
The solution MUST NOT use javascript as the frontend has to be useable without JS enabled.
Any ideas?
Put the button that takes precedence first in your html sourcecode, and use markup to invert the position of the two buttons?
Edit: you say your layout can't handle that.
Either:
1. Change the layout. Functionality is more important, and for layout there is more than one way to do it.
2. Have the form not check if "recalculate" or "submit" was pressed, but rather if the shown price was correct with the calculated prize. Example:
User buys 1 item, value 3 dollar.
User buys 2 items, value 5 dollar.
Total prize: 13 dollar.
User now changes the 1 item into 4 items. 3 dollar becomes 12 dollar, but he doesn't hit recalculate.
Have a field in your form that shows the total amount (a hidden field is nicest). When the user submits the form, redo the calculation. If the calculated prize equals the prize in the hidden field, the user knew the final correct prize. If it differs, reshow the form mentioning "You changed your shopping cart, the total prize has been updated to reflect these changes. Verify the amount and submit to purchase" or something.
<input type="text" id="mytext" ... />
<script type="text/javascript">
document.getElementById("mytext").onkeyup = function(event) {
if(event.keyCode=='13' || event.keyCode=='10') {
alert('you pressed enter');
// do whatever you want when enter is detected
}
}
</script>
You should be able to decide that server-side. When a button is clicked it's name-value pair is submitted, but when return is pressed it isn't. So change your server-side script to do "recalculate" when the recalculate name-value is submitted and to contine in all other cases.
Related
I have a page where a user can edit a large (~) amount of small items with a very few options, like remove, turn off, turn on and edit name of the item.
I don't know why but the current approach I'm using does not give me the "good code" feeling. I create a form for each action on each item, so I have like 3 forms per item. I feel like forms were meant to submit larger amounts of information.
Fortunately, I found the form* attributes html5 offers (HTML5, yayy!) that kind of allow for this. I created a single delete form on the page and then on each item I added a button, outside of the form.
<button type="submit" form="delete_form" name="item-id" value="1">Delete</button>
Unfortunately that is not the case with the edit-name form. If I add a single form on the page, then have input elements for the name on every item, like
<input name="item-name" type="text" form="update_form"/>
<button type="submit" form="update_form" name="item-id" value="1">Update</button>
...
<input name="item-name" type="text" form="update_form"/>
<button type="submit" form="update_form" name="item-id" value="2">Update</button>
Then on the landing page, item-name will always be the last input's value. I haven't tested this but I am assuming that when submitting the form all input fields pointing to that form with their form attribute are being collected and sent, then on the other side they are all being processed and I'm getting the last one since they all have the same name and are being overwritten.
How, if at all, can I have only a certain input be submitted, depending on which button was clicked, instead of all?
Notice: I can think of hacky ways like including the item id in the input name but it doesn't seem right, also what if there is no id at all.
If a specific button should only post a specific input, then making separate forms sounds like the right way to go.
Your assumption is right, by the way, so another solution would be to put all inputs in the same form, but give them different names, indeed based on an item id. Adding a unique ID or name is the right way to go. After all, how would you know what you are editing if you have no ID? Currently the ID is in the button too, right? You need it.
Anyway, with such a form you can save them all with one click on a submit button.
From a UX perspective, maybe that's a better approach too. Now you would have to do and save each edit separately, which results in a page refresh, which can be annoying and slow.
I would make a form in two versions.
Non-Javascript
The basic form shows all the items to edit, each followed by a group of radio buttons that allow you to update, delete, turn on, or turn off the item.
The form has one big submit button that posts the entire form. All items are updated or their state is changed depending on the radio buttons.
This way, a user can relatively easily edit all items and post their changes without a lot of page refreshes.
JavaScript additions
Using JavaScript/JQuery, you can modify the form. Change the radio buttons to normal buttons and perform the action using AJAX, but only for the item they belong. The big button at the end can be removed, and the form can be altered so it doesn't submit anymore. This way, a user has a rich interaction without the nuisance of the page being constantly reloaded.
Take a look at this login page, specifically, the form in the section labeled Returning Members. As you can verify by looking at the HTML or by digging with a tool such as Firebug, the actual form contains four tags: one each for the email address and password, an invisible input called "memberAlready" that contains the value "yes", and a submit button in the form an image. So far, perfectly generic.
However, if you inspect the form data at the point at which the form is submitted (using Tamper Data or its equivalent on another browser, you'll see that two additional form fields have been sneaked into the response: ACTION(loginCheckout).x and ACTION(loginCheckout).y.
They both have two-digit integer values, which suggests that they're only there to verify that the submitter is an actual web browser and not a robot. Presumably, they are related somehow to the submit button, which is defined as follows:
<input type="image" name="ACTION(loginCheckout)" value="Login" src="/images/login/login.gif">
What's confusing to me is that these extra form fields appear even when JavaScript is disabled in the browser. So they presumably aren't just something inserted by an event handler somewhere.
Furthermore, if you submit the form programmatically (e.g., by running document.forms[1].submit() in the JavaScript console), the extra fields are not generated and the login attempt fails. That suggests to me that the insertion of the fields depends on something outside the basic HTML form submission mechanism. But what that "thing" could be if it's not JavaScript, I don't know.
Does anyone recognize this pattern or have a theory as to how the validation fields are inserted?
Take a look at the code you posted here:
<input type="image" name="ACTION(loginCheckout)" value="Login" src="/images/login/login.gif">
Notice that this is an image input type which is used to submit the login form. The additional values that appear to be injected on submission are simply the x and y coordinates where the you clicked on the image to submit the form. They are not additional values which are injected by JavaScript on form submission, they are added by the browser itself.
Try clicking on different areas of the images and see the values change.
When you use JavaScript to submit the form, you do not click on the image, which is why the x and y values are not included on form submission.
Replacing the image for an <input type="submit" /> element will remove the x and y coordinates.
Hope that helps.
The X and Y values you are seeing are because the submit button is an an input type=image. They correspond to the X and Y locations within the image where the cursor was when the image was clicked. They're added by the browser itself, as the HTML specification requires it. Section 17.4.1 states that for an image input type
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.
You'll note it only mentions the use of a pointing device. If you submit by using the keyboard the values won't be created.
My ASP.NET MVC 3 website has code on the server side that checks for the name of the submit button clicked to submit the form. The code works when I use the mouse to click the button, but when I use the Enter key, the form gets posted, but the request doesn't contain the name of the submit button.
Is there some attribute I can set on the submit button to get this to work for both clicking and using the Enter key?
Here is my HTML:
<div>Search:</div>
<form action="/Item/Search" method="post">
<input class="fulltextsearch" id="FTSearchText" name="FTSearchText" type="text" value="" />
<input type="submit" value="Go" name="FTSearchButton" />
</form>
</div>
On the server side, I have a custom model binder that uses the following code to determine if the user clicked the submit button.
// See if the value provider has the required prefix
var hasPrefix = bindingContext.ValueProvider.ContainsPrefix(bindingContext.ModelName);
var searchPrefix = (hasPrefix) ? bindingContext.ModelName + "." : string.Empty;
var searchButton = GetValue(bindingContext, searchPrefix, "FTSearchButton");
// If this value doesn't have value, the user didn't click the button so exit
if (string.IsNullOrEmpty(searchButton)) {
return null;
}
private static string GetValue(ModelBindingContext context, string prefix, string key) {
var result = context.ValueProvider.GetValue(prefix + key);
return result == null ? null : result.AttemptedValue;
}
Here is the problem I'm having with this. I have a page that displays a list of items. I have a 'search' textbox and a submit button in an HTML form. When the user enters text in the textbox and clicks the search button or uses the enter key, the page posts the form data via HTML GET, and returns the first eight records found. The page then displays page links for additional pages. The problems is that when the user clicks a page link, the form data is all blank, and my filter information is lost (the form isn't posted with the form value when using these links). So, I end up displaying a blank list of items (blank searches returns zero results) instead of paging the data.
By adding the check for the button name in my form data, I could determine whether or not to simply page the data, or do a new look up.
I wouldn't rely on this. There are plenty of documented bugs with this scenario. Just add a hidden field with name='submit'. That way it wouldn't be too hard to recode the backend.
<input type='hidden' name='submit' value='FTSearchButton'/>
So, I researched this last night and almost got somewhere. Then this morning, I really did get somewhere and here's where I ended up.
Apparently the W3C standards for form submission are pretty lax when describing the functionality as it relates to the Enter button and submitting forms. It seems they determined that
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
So that leaves a lot of wiggle room for the browser makers. Today, virtually all browsers support using the Enter key to submit a form, whether the form contains one or more single line text input boxes.
The problem I'm having is more or less unique to Internet Explorer, and only when the form contains one, single-line text input control. For whatever reason, Microsoft decided that when Internet Explorer submits a form like this, it doesn't include the submit button's name/value pair in the post body. However, it does include the button's name/value pair if the user clicks the submit button --or-- uses the Enter key, and the form contains more than one single-line text input control.
So, the only solution I can think of or find suggested is to add a second single-line text input to my form, and then set the the style to
visibility: hidden; display: none;
My form now has two single-line text input controls, so the form will post with the name/value pair in the form body, regardless of whether or not the user used the Enter key or clicked the submit button.
So, we have a workaround that was discovered by ASP.NET developers. It seems the key/value pair is required by ASP.NET web-forms to fire the click event, so this work around isn't something new, albeit not my favorite way to do things.
I'm writing a landing page to test a business idea.
For testing purpose, I want to write a Credit card number field, to see if the customer is actually ready to buy the product.
As it is only a test, I don't want this value to be submitted.
Actually for security purposes I don't even want this value to be sent in the request.
Is a separate form enough?
<form> Sensitive info</form>
<form>Info I want
<input type="submit">
</form>
Yes, only the elements from the one form will be sent (whichever one was submitted).
Alternatively, you could:
mark the input as disabled (either from the start, or onsubmit)
remove the name attribute of the input
put another input later in the form with the same name (it will override the value of the first)
Yes, that will work.
I am working on an asp page that verifies information in a text box after the user types it in.
A “product number” is manually entered (free form). Using the after update event, I have the page post the data and lookup the product number to determine if it is valid. If not valid an error message is posted in the box, otherwise the product number and description is placed in the box (I.E X1234 becomes X1234 – RED YO-YO). This works 100% fine. My problem is that after the update the focus is lost on all the data entry items. I want the focus to be returned to the next text box so the operator can type in the next piece of needed information.
Note: So far I inserted a function that dynamically changes the “TABSTOP” numbering such that the “next” box is assigned the #1 after the validation lookup. This works on my browser (Firefox 3.05) but is does not on my IE (Thanks Bill ! ). In IE when the posting is finished the focus for some reason ends up on the “enter the URL” and hitting tab puts the focus on some control button that is no where near where I want it to be.
If you are trying to do what I think you are, this should do it.
In your ASPX page:
<script type="text/javascript">
function focusControl(ctrlId) {
document.getElementById(ctrlId).focus();
}
</script>
In your code-behind:
// 'ctrl' is the name of the ASP.NET TextBox that you want to receive
// focus on load.
Page.ClientScript.RegisterStartupScript(
typeof(Page),
"Focuser",
"focusControl('" + ctrl.ClientID + "');",
true);
Here is the general solution:
http://couldbedone.blogspot.com/2007/08/restoring-lost-focus-in-update-panel.html