Create Dynamic Form and Handle Submit with jQuery

Question

I have this script on my page

    $('.konfirmtoko').submit(function(e){
        e.preventDefault();
        alert("Test");
    })

    $('.kliknomor').click(function(){

        var isitabel = [];
        $.get('getdata', function (data){
            var data = $.parseJSON(data);

            $.each(data, function(i, item){
                var forbutton = [$('<input>').attr({type: 'hidden', name: 'hiddenvalue', value: item.somevalue}),
                                 $('<button>').text("Konfirmasi")];
                forbutton = $('<form>').attr({
                                action: 'formsubmit',
                                class: 'konfirmtoko'
                            }).append(forbutton);
                isitabel.push(forbutton);
            });
            $('.isitabelview').empty();
            $('.isitabelview').append(isitabel);
        });
    })

When I click a button with 'kliknomor' class, it will show some form with 'konfirmtoko' class and a single button for every form. I want the form submission is handled using jQuery too. But, the first four line of my script is never called. Is there something I missed?

Edit: I do success on some form submission that show the form on page loading (form generated using php). This form is generated using jquery.

did you tried :- `$('.konfirmtoko').on('submit',function(e){` — Alive to die - Anant, Mar 07 '17 at 05:00
yap, I have done that. Nothing change, the form still submitted. @WantedtoDie — imilah, Mar 07 '17 at 05:02
Possible duplicate of [Using JQuery - preventing form from submitting](http://stackoverflow.com/questions/9347282/using-jquery-preventing-form-from-submitting) — Vasilij Altunin, Mar 07 '17 at 05:19

score 1 · Accepted Answer · answered Mar 07 '17 at 05:42

I think it happens because your .konfirmtoko form hasn't available yet when initial page loaded, so you put an event listener for something that hasn't available yet. I tried to add preventDefault in onsubmit attribute of the form inside your loop and that's work. Here is the code I've modified:

    /* don't use this function */
    $('.konfirmtoko').submit(function(e){
        alert("Test");
        e.preventDefault();
    })
    /* instead use this function */
    function handleForm() {
        alert("Test");
    }

    $('.kliknomor').click(function(){
        /* this data just for simulating your response from ajax request */
        var data = [
            { somevalue: 0 },
            { somevalue: 1 },
            { somevalue: 2 },
        ]

        var isitabel = [];
        /* I remove ajax request because I don't have the endpoint, just for testing purpose */
            $.each(data, function(i, item){
                var forbutton = [$('<input>').attr({type: 'hidden', name: 'hiddenvalue', value: item.somevalue}),
                                 $('<button>').text("Konfirmasi")];
                forbutton = $('<form>').attr({
                                action: 'formsubmit',
                                class: 'konfirmtoko',
                                id: 'konfirmtoko' + i, // I also add id to make the form unique
                                onsubmit: 'event.preventDefault(); handleForm();' // add this line
                            }).append(forbutton);
                isitabel.push(forbutton);
            });
            $('.isitabelview').empty();
            $('.isitabelview').append(isitabel);
    })

Note: I also add id for every table generated by the loop just to make them unique to each other, in case you need those tables become unique for other purpose

I use your answer, and realize that new function should written outside $(document).ready — imilah, Mar 07 '17 at 06:11

score 0 · Answer 2 · answered Mar 07 '17 at 05:48

There are two ways to solve your problem:

1) You can use .delegate() method for form submit, like below:

$( ".isitabelview" ).delegate( ".konfirmtoko", "submit", function(e) {
        e.preventDefault();
        alert("Test 1");
});

2) If above solution will not work, then you can write your submit function inside of .get() method. Like below:

$('.kliknomor').click(function(){

        var isitabel = [];
        $.get('getdata', function (data){
            var data = $.parseJSON(data);

            $.each(data, function(i, item){
                var forbutton = [$('<input>').attr({type: 'hidden', name: 'hiddenvalue', value: item.somevalue}),
                                 $('<button>').text("Konfirmasi")];
                forbutton = $('<form>').attr({
                                action: 'formsubmit',
                                class: 'konfirmtoko'
                            }).append(forbutton);
                isitabel.push(forbutton);

                var formEvent= '$( ".isitabelview" ).delegate( ".konfirmtoko", "submit", function(e) {';
                        formEvent += 'e.preventDefault();';
                        formEvent += 'alert("Test 1");';
                        formEvent += '});';
                isitabel.push(formEvent);

            });
            $('.isitabelview').empty();
            $('.isitabelview').append(isitabel);
        });
    })

I just solved my problem using Surya's answer. Thanks anyway — imilah, Mar 07 '17 at 06:09

Create Dynamic Form and Handle Submit with jQuery

2 Answers2