Why is my
submit consistently submitting the first item in the list?

Question

My code builds a dynamic list similar to this:

form = "";
form+= "<li>";
form+= "<form id='formid_" + itemno + "' class='form' method='post'>";
form+= " some options go here ";
form+= "<button type='submit' class='selection'>Select This Option</button>";
form+= "</form>";
form+= "</li>";
form+= "<li>";
form+= "<form id='formid_" + itemno + "' class='form' method='post'>";
form+= " some other options go here ";
form+= "<button type='submit' class='selection'>Select This Option</button>";
form+= "</form>";
form+= "</li>";
$("#my-output-div").append(form);

The problem is that I need to use the correct list items form ID to get the correct selection when the submit button is pressed, but that form ID is dynamic. I know I can use var formID = $(this).parent().attr("id"); to get the ID of the form on click but what is the best way to implement this to make sure I am submitting the actual seleted list item? Every other attempt has always grabbed the very first list item in the list no matter which submit button was clicked. I know that can't use the class:

 $(document).on('submit', '.locationForm', function(e) {
            e.preventDefault();
            // do something 
});

Why are you creating elements with the same ID? – Alon Eitan Mar 01 '20 at 15:04 — Alon Eitan, Mar 01 '20 at 15:04

score 0 · Answer 1 · answered Mar 01 '20 at 15:06

0

What if you send in the event object when clicking? Then from the event object you can extract the clicked element data?

https://api.jquery.com/event.data/

this link explains a bit more? I personally use Angular for dynamic web apps but this should work as well.

EDIT:

this code is an example:

 $(document).ready(function() {
        $("a").click(function(event) {
            alert(event.target.id);
        });
    });

I got it from this post on Stackoverflow Getting the ID of the element that fired an event

answered Mar 01 '20 at 15:06

Herco

21
3

I have to run it as `$(document).on('click', '.selection', function(event) { alert(event.target.id); }); ` which returns nothing. However, if I run: ` $(document).on('click', '.selection', function(event) { alert($(this).parent().attr("id")); }); ` it does return the correct formID for the select button that I click. If I plug that value into my `$(document).on('submit', my-form-id-var, function(e)` it still only used the first list item. Not sure if my problem is in the var or not. – simlpymarkb Mar 01 '20 at 15:23
is the my-form-id-var a variable you are sending in containing the form's id? – Herco Mar 02 '20 at 10:20

Why is my submit consistently submitting the first item in the list?

1 Answers1

Why is my
submit consistently submitting the first item in the list?