trying to submit a form embedded in a javascript through a click function on the div using jquery

Question

I am trying to submit a form embedded in a javascript using a click function attached to the enclosing div. I have set the button type to display none using in-line style sheet but on tapping on the form which I set a border around it, nothing happens. This is my attempt:

this is the javascript code with the form embedded inside of it

function fetchAllActiveUsers() {
    ...
    xhr.onload = function (response) {
        try {
            if (xhr.status === 200) {
                ...
                var users = '';
                ...
                for (var i = 0; i < json.length; i++) {

                users +=   '<div class="containers"><form method="post" action="/search" style="width:220px; border:1px solid black;"><div class="form-group"><span style="display:inline; font-size:13px;"><strong>' + json[i].email + '</strong></span><input style="display:inline; width:70%" type="hidden" class="form-control" value="'+json[i].email+'" name="search" id="search" readonly> <input class="row-fluid" type="hidden" value="'+sessionVar+'" name="email" id="email" readonly/> <button style="width:31%; font-size:10px; padding:2px; display:none;" type="submit" class="btn btn-success pull-right">Play</button></div></form>'+ json[i].complaints +'</div><hr style="margin:1px; padding:0">';

                }

                active_users.innerHTML = users;
                } else {
                alert('Request failed.  Returned status of ' + xhr.status);
            }
        } catch (e) {
            console.log(e);
        }
    };
    xhr.send();
}

this is the jquery code

$(".containers").click(function() {
      $(this).closest("form").submit();
});

my challenge is on tapping the div let it submit the form but its not working.

Kindly assist

epascarello · Accepted Answer · 2016-10-11 14:28:00Z

3

First you can not bind events to elements that do not exist yet. Second, closest looks at ancestors, not descendants.

So you need to use event delegation and find()

$(document).on("click", ".containers", function() {
      $(this).find("form").submit();
});

answered Oct 11, 2016 at 14:28

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mauro Gava · Accepted Answer · 2016-10-11 15:07:33Z

Above answer works and it's good but it would be more performant if you don't use delegation for just one element, delegation is better for when you have to attach an event listener to several elements. As was said in the above answer you can not bind events to elements that were not added to the DOM yet which means that the Form tags will be added to the DOM right after this was executed active_users.innerHTML = users; So you can fixed also doing the following

xhr.onload = function (response) {
    try {
        if (xhr.status === 200) {
            ...
            var users = '';
            ...
            for (var i = 0; i < json.length; i++) {

            users +=   '<div class="containers"><form method="post" action="/search" style="width:220px; border:1px solid black;"><div class="form-group"><span style="display:inline; font-size:13px;"><strong>' + json[i].email + '</strong></span><input style="display:inline; width:70%" type="hidden" class="form-control" value="'+json[i].email+'" name="search" id="search" readonly> <input class="row-fluid" type="hidden" value="'+sessionVar+'" name="email" id="email" readonly/> <button style="width:31%; font-size:10px; padding:2px; display:none;" type="submit" class="btn btn-success pull-right">Play</button></div></form>'+ json[i].complaints +'</div><hr style="margin:1px; padding:0">';

            }

            active_users.innerHTML = users;
            // Adding event listener to submit the form
            var formEl = document.querySelector('.containers form');
            formEl.addEventListener("click", function (e) {
                 // Submitting the form
                 e.currentTarget.submit();
            }, false);
            } else {
            alert('Request failed.  Returned status of ' + xhr.status);
        }
    } catch (e) {
        console.log(e);
    }
};

Collectives™ on Stack Overflow

trying to submit a form embedded in a javascript through a click function on the div using jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related