JavaScript confirm when a dynamic HTML field is selected within a form

Question

My PHP file echoes results from a data query as a form-table so the user can edit the records. The table will contain up to 30 records. When the form is submitted, if the VoidTag checkbox is selected, I need the user to confirm this action, otherwise the form can submit without the confirm box. I have very little JavaScript experience and have no idea how to do it.

    <tr>
        <td class="count gridtable">
            <input type="text" class="tableTxt" name="inv[1091][Count]"/>
        </td>
        <td class="count gridtable">
            <input type="text" class="count" name="inv[1091][Notes]" value=""/>
        </td>
        <td class="count gridtable">
            <input type="text" class="tableTxt" name="inv[1091][CountedBy]" value=""/>
        </td>
        <td class="count gridtable">
            <input type="checkbox" class="center" name="inv[1091][VoidTag]"/>
            <input type="hidden" class="center" name="inv[1091][TagNum]"/>
        </td>
    </tr>

possible duplicate of [JavaScript Form Submit - Confirm or Cancel Submission Dialog Box](http://stackoverflow.com/questions/6515502/javascript-form-submit-confirm-or-cancel-submission-dialog-box) — Jay Blanchard, Feb 26 '15 at 16:43
You will need to add ids to you fields, at leas to the check box, then you will intercept the submit event, preventing the default action, instead route to a function that validates the form data (is the check box checked?), and if all is kosher, call the submit method of the form. — SeanOlson, Feb 26 '15 at 16:44
@JayBlanchard I think my question is a little different because I only want to have the user confirm the submission if the VoidTag option is selected. I'm guessing I have to make a custom JS function. — Brent Connor, Feb 26 '15 at 16:52

talemyn · Accepted Answer · 2015-02-26T17:43:07.763

The other question thread is slightly different, but points you in the right direction, in regards to using a confirmation dialog:

First, I'm assuming that you have a form wrapped around all of these form elements in your table rows . . . you will have to give that form an onsubmit action to return the result of the confirmation function:

<form onSubmit="return confirmSubmit(this);">

Then, use the following function to confirm the submission, based on the presence of any checked checkboxes:

function confirmSubmit(theForm) {
    if (theForm.querySelectorAll('input:checked').length > 0) {
        return confirm('Do you really want to **insert question criteria here**?')
    }
    else {
        return true;
    }
}

When the user submits the form, the code will check to see if there are any "checked" checkboxes in the form (I'm also assuming that there are no other checkboxes or radio buttons in the form, outside of the ones that you want to check in each row). If it finds at least one checked checkbox, it will ask the user to confirm that they want to submit. If they choose "Cancel", it will return false, stopping the form submission . . . in all other cases, it will return true, allowing the submission to continue.

If there ARE other checkboxes or radio buttons in the form, the .querySelectorAll() parameter would need to be changed to accomodate for that, including (potentially) assigning a common class to all of the checkboxes that need to be included in the validation logic.

Thank you for the detailed response. The solution worked for me, and was easy to understand. I am curious what the solution would look like if I had to use the class method. Also is it possible to show all the ID numbers of the checked boxes in the confirm message (in this case 1091)? — Brent Connor, Feb 26 '15 at 19:55
1) The main difference would be that each checkbox would be given a common class attribute (e.g., `class="void-checkbox"`) and then, instead of using `.querySelectorAll('input:checked')`, you would use `.querySelectorAll('.void-checkbox:checked')` and check the length what was returned by that. 2) Yes, as long as you stored that value somewhere in the element (is that what the `name` attributes are?). You could store the collection of items in a variable and, if there was at least one, loop through the group and extract the ID value from each, into another variable, to use in the `confirm`. — talemyn, Feb 26 '15 at 22:19

JavaScript confirm when a dynamic HTML field is selected within a form

1 Answers1