If for some reason it were mandatory to associate a <button> with more than one value, is there a good way to do it? For example ...
CSV:
<button value="Lancelot,Grail,blue">Answer</button>
JSON:
<button value="{'name':'Lancelot','quest':'Grail','color':'blue'}">Answer</button>
In the absence of a good way to do it, is there a traditional way?
Edit: another use case
Server M, the producer of the HTML, knows the user's current location and favorite genres, movie names, nearest theater, and next showtime. Server F knows how to query various 3rd party servers about how to get from point A to point B in order to arrive by time T. The user knows only the movie names: click Drag Me to Hell, and get the route. Server M could generate a form for each movie, with a single button showing the name of the movie and multiple hidden fields with the start and end locations and desired arrive-by time, but that would require a lot of repeated code. Every one of these one-button mini-forms would have the same method and action and the same hidden input field structure. Styling would be a collection of mini-forms rather than a collection of buttons, so FIELDSET and LEGEND are unavailable (because HTML forbids nested forms). Putting the parameters into the button's value attribute would be much tidier.
Well if you have to have a button element, why not use JavaScript to set a bogus property:
$('mybutton').compoundValue = { ... json ... };
and then reading the 'compoundValue's during form submit, etc.
Though really you might want to consider a group of checkboxes or some other form bits for what you're trying to accomplish.
Related
I am editing html codes for web accessibility but I faced one problem about Multiple form labels. I am using Wave plugin to check web accessibility.
Errors is
Multiple form labels
What It Means
A form control has more than one label associated with it.
The problem is that there is a page user can input user info, and a button to call pop up then the pop up has all same fields again to register if user did not input the field.
Instead of changing ID of the field in popup, is there any quick and easy way to remove the error?
From W3Schools:
The id attribute specifies a unique id for an HTML element (the value
must be unique within the HTML document).
So yes, you need to define a unique ID for each and every component. This is the only clean way to solve your problem, otherwise a screenreader could read the wrong label when you focus one of your input fields.
One way to fix this other than changing IDs is to wrap the input in the label.
<label>
First Name
<input />
</label>
This is semantically correct and avoids the labels needing for and associated input id attributes.
You obviously might need to refactor some stuff and it seems like more hard work than just changing some IDs but that is an option (I know you will have probably fixed this by now, this is more for reference if someone else comes to this question.)
See: https://stackoverflow.com/a/774065/2702894
Alright, so I'm pretty new to Spring, but I was asked to resolve a bug. So in our application, we have a page that queries a database based on an id. However, not all entries are unique to the id. The id and date pair, on the other hand, do define unique entries.
So this page takes in an id. If there is only a single entry related to this id, everything works fine. However, if there are multiple entries, the page displays a radio button selection of the various dates that pertain to that id. We use something like:
< form:radiobutton id="loadDate" path="loadDate" value="${date}" label="${date}" />
Later on the same page, we want to display the data for that option. As part of it, we display the date of that selection:
< form:input id="aiLoadDate" path="loadDate" maxlength="22" size="22" class="readonly" readonly="true"/>
The problem is that when this happens, the variable (or bean? I'm not quite sure about Spring yet..) loadDate (a string) ends up being the same date twice, seperated with a comma. I'm guessing the problem here is the "path="loadDate"" that is common to both lines.
Instead of appending the date to the already existing one like a csv, I'd like it to overwrite the current entry intead. Is there a way to do this?
Spring is not the direct cause of your problem. When the elements of an HTML form are submitted, each element will appear in the request as a name=value pair. If two or more elements in the form have the same name (not id, name attribute) then those elements appear in the request as name=value,value (with one value per element with a duplicated name).
Option 1: stop using an input as a display element. Just display the date in a span (or div or paragraph or what ever). If you want the look of an input box (border, etc.) use CSS to create a class that has the look you want and attach the class to the span (or div or paragraph, etc) in which you display the date.
Option2: continue using an input as a display element. Disabled input elements are not added to the request when the form is submitted. in the form:imput set disabled="true".
I have a simple HTML page with an Unordered list. Is it possible to have an input field where you could add more to the list and it would be saved after you submitted it. What I would like to add would be the content inside of an <li> tag as well as the <li> tags themselves.
Thanks,
Here is a jsfiddle with a demo of what I think you want to achieve: http://jsfiddle.net/mvJNq/25/
Note that I can not answer as to how you should do this on the server, as that depends on how your serverside code, database etc is set up. However, if all you want is to display it as HTML and not have it saved as the user navigates away, you won't need the Submit button at all - then you just need the "Add" functionality.
Yes, it is possible - no, it will not be pretty. Here is what you would do:
create your base form with any default list items/inputs
use jQuery/JavaScript to bind an event handler to a button that you click when you want to add another item (alternatively, you could skip this step and just have another item appear by default)
on your event (be it checking that all input boxes have user-entered text, or the click event in step two) add another list item using jQuery.append(...)
ensure that you have a hidden input field to be used as a "counter" to keep track of the total number of list items and increment the value of this counter each time you add a new list item (note: you may need to use the ParseInt() method, depending on how you design the code for this field)
the page that is receiving the form's inputs should first read the hidden field so that it knows how many items to add, and then you should loop through the items (for or while loop) to add them correctly
Note: I don't know what Server-Side language you are using to handle receiving the form so step 5 is a fairly generic and universally viable option
Sure, it's possible.
The complexity of this comes in when you want to "save" the items. If the user leaves the page and comes back later will that data be available? If so, you will need a database like mySQL or similar. The li tags can be stored as well, but why?
If you just need that information available in that session you can store in a JavaScript variable and have it loop through the variable and spit them out as <li>'s
If you did want to use an add button instead of submit:
$('#addButton').click(function(){
var savedContent = $('#input').val();
}
To create + insert the <li>you can use javascript to create the element and append it to the ul. If you have more than one ul change the index:
var content = document.createElement('li');
content.innerText = savedContent;
document.getElementsByTagName('ul')[0].appendChild(content);
I have a check box that when checked multiple boxes are disabled on my form.
Currently im using
With Me!Textbox
.Locked = True
Is there a method where I can list multiple objects within the With statement rather than writing out each time for every textbox
e.g.
With Me!Text1, Text2, Text3
It may be easiest to add something to the tag property to identify the relevant controls, "lock", say. Then you can iterate over the controls collection and lock anything with a tag set to "lock".
I want to display a list of items. Each item would have an edit and a delete icon next to it.
For obvious reasons I want to trigger the delete action with HTTP POST.
With jQuery, I would bind links to trigger form.submit.
However I'm not sure if I should generate a form next to each item or use just one form.
Below are pros and cons of two approaches as I see them.
Form Per Item:
easy to generate;
no need to fiddle in JS to set action and input value.
Single Form:
makes more sense semantically;
requires client JS to set hidden input;
requires client JS to set form action (e.g. id + '/delete/).
What is there to add? What is the preferred pattern in modern HTML apps?
I have used checkboxes in the past. This is better for usability, and each checked checkbox can pass its own ID to the form processing script.
The main disadvantage I see in having a single form enclosing all list elements is that you can end up with a huge POST if the list is long. As an advantage, you could mark multiple elements for deletion (checkboxes, for instance) and perform a single delete request.
I'd go for either
A single form for each list element. This would make deletion of multiple elements impossible, but would keep POST sizes minimal.
Using a single form, but in a way that doesn't include all the list elements. For instance, having a delete only form with a single hidden element in it, into which you would put all the id's marked for deletion with JS manipulation.
As a side note, you could also skip forms and perform the needed interactions through ajax. This would improve user experience notably. Take into account that forms would still be needed to provide fallback mechanisms in case it was required.
In the end, I decided to go with AJAX via jQuery.ajax.
The reason is semantically I don't even have forms—I have buttons.
Therefore, jQuery is an easier solution as it allows to keep posting logic in one place (as opposed to scattering it across HTML and JS).
I assigned row class to each semantical row and put corresponding database IDs in HTML5 data attribute called data-row-id for each row.
<div class="row" data-item-id="{{ product.id }}">
<!-- ... --->
<img src="/img/delete.png" alt="Delete">
</div>
Then I have something alone the lines of
$('.delete-btn').click(function() {
var row = $(this).closest('.row');
var id = row.data('item-id');
$.ajax({
url: id + '/delete/',
type: 'POST'
});
row.fadeOut().slideUp();
return false;
}
in my $() load handler.
This solution scales beautifully across the whole codebase because you only have to set row class and data-item-id attribute and the buttons will “just work”.