Question

Coding standards in place mean I do not have an option of using ajax for this.

A user is logged in and the SESSION keeps track of him/her. At login, their list of
ancient human artifacts are retrieved (server-side) from mysql and a heredoc displays them
in rows of divs — each div is a row with one artifact – here are two div rows:

     'bronze-age tool' 'egypt'   'photo: tool3_found_1964-Feb_dig.jpg'
     'decorated bowl'   'Shang Dynasty/China'  'photo: shang-bowl.png'

A list of these artifacts that the user uploaded previously is displayed in a heredoc
set of rows of divs.

The list of divs is not a form. I could make each row (each artifact) a form to solve
my problem but it seems kludgy. The user must be able to click on a div to select and
highlight that artifact in the row of divs (and select/highlight part I’ve already got
working, it’s all client-side javascript of course).

A ‘delete’ button above the rows of divs is then changed from disabled to enabled.

When the ‘delete’ button is clicked I need to hit the server, give it the selected div’s artifact,
and the server already knows the logged-in user (they’re in the SESSION) and then the server must
delete that artifact and when the page reloads, BAM that artifact’s row is now gone from the above
list of artifacts divs.

If I make each div-row artifact a form, in my onclick handler for that div-row, I could
programmatically submit() that div-row form (using javascript) to delete that artifact and that would work.

But making each div its own form stylistically sucks imo.

I could make the entire heredoc set of divs a form. But then, on submit,
because only one div-row is to be deleted, the server would be given a potentially large
set of divs, only one of which is the ‘selected’ div to be deleted, and would have to
traverse the POST array and somehow find the ‘selected’ div out of the large set of divs
in the POST array.

At least if each div-row of a selected artifact was a form unto itself, the POST array
would only contain the one div’s contents — the selected div the user wants deleted —
and then the server immediately knows which mysql record to remove (the selected div
artifact) without have to traverse a potentially huge form of divs, only one of the
divs being the one to delete.

Besides the ‘entire heredoc is a form’ and ‘each div is a form and a programmatic submit()
deletes the selected div’ — is there a better way to make this happen I’m not seeing?

Answer 1

Create a form outside your list, with a hidden input field for the artifact id. In the onclick for the delete buttons, update that hidden field and submit the form.

Form:

<form id="delete_artifact_form" action="delete_action" method="post">
    <input type="hidden" name="artifact_id" id="delete_artifact_id" />
</form>

Delete function:

function delete_artifact( id ) {
    document.getElementById( "delete_artifact_id" ).value = id;
    document.getElementById( "delete_artifact_form" ).submit( );
}