I got a table with some columns of a database record in each row. Each of these columns is editable and multiple actions can be performed on the record. This would be easy to do in HTML, just wrapping each row in a separate form.
However, it should also be possible to perform actions on multiple rows selected by checkboxes.
What is the best way to allow these single-row actions (while preferably not submitting all the other rows) and multi-row actions in the same table using HTML (preferably without js)?
Best way is to use only one form, than for each record use an array, where first coordinate is your item ID from database, as following:
<input type="checkbox" name="id[2]" />
<input type="text" name="column1[2]" />
<input type="text" name="column2[2]" />
Later on you can post the form, or serialize it and use ajax. If you do not want to use checkboxes, but to change values on the fly, than remove them (checkboxes) and insert hidden fields with old values (so you can compare). In order to detect which submit button has been used, take a look here
How about:
Have a single <form> element that wraps the entire table.
When any of the action buttons is pressed, use JavaScript to prevent default action and construct FormData dynamically (based on which button was pressed) and submit via Ajax.
The fallback (i.e. if JavaScript execution fails) submits the entire table. On the server-side, detect this case and extract the relevant data, then proceed normally (like if submitted via Ajax).
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.
I have access to form field in the administrative view.
Example
<label>Number:</label>
<input type="text" name="title" size="50"/><br/>
I do not have access to modify the html syntax, the only thing i can do is updating the form field with a value.
In the form field i want to update it with a number. I also want to have a link assigned to that number.
So when i click that number it directs us to the link.
Is there a way i can do that?
This method is tedious, but you could use the jQuery nth-selector to select the specific form element that you are dealing with.
http://api.jquery.com/nth-child-selector/
This method is risky, however, since you might add other form elements before it, altering the index of your target input element.
Afterwords, you could use the .val() jQuery method to change your input value.
Nonetheless, again, this method is not safe because the index of the form element could change. I would beg the powers of be to be able to add an ID or some identifying attribute to that form element.
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”.
Here in table every TR having user and user data. Is this correct way of using of form for every user or one form for all users. If I am using a form for every tr, I need to create one new table, so my alignment of each column is goes off.
Here is the Html
You can use one form for the entire table. Just assign different values to name attribute of <input type="submit" /> or any other submit trigger you use.
Side note: you should avoid using table to markup non-table data. Obviously, you could use lists (unordered, ordered or definition lists) and divs/paragraphs to achieve the same result.
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.