CODEWITHSUNDEEP
javascriptjqueryhtmlcssforms
Francis
Francis

Reputation: 201

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

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

Upvotes: 0

Views: 70

Answers (2)

Mauro Gava
Mauro Gava

Reputation: 511

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);
    }
};

Upvotes: 0

epascarello
epascarello

Reputation: 207557

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();
});

Upvotes: 3

Related Questions