Question

I have a Question regarding Jquery ui dialog boxes.

What i have/i did: I have multiple forms(depending upon the result returned from mysql result). the forms looks like this:

<form action="?" method="POST" id="form1">

    <input type="text" name="title"/>

     .................................
      other inputs
     .................................

     <input type="submit" class="delete" id="delete" name="delete" value="delete"/>

</form>

the same form but only with id of the form as ‘form2’, or depending on the query (form3, form4 etc….)

jquery codes

$(document).ready(function(){

                var $dialog = $('<div></div>').html('<span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Do you really want to delete it?')

                .dialog({

                            autoOpen:false,

                            resizable: false,

                            height:140,

                            modal: true,

                            title:'Confirm delete',

                            buttons: {

                                "Yes": function(){

                                *********************************       
                                document.forms["form1"].submit();
                                *********************************

                                $(this).dialog("close");   

                                },

                                "No": function(){

                                    $(this).dialog("close");

                                }

                            }

                });

                $('#delete').click(function(){

                            $dialog.dialog('open');

                            return false;

                });

    });

What i want to achieve?
I want to trigger the submit action for only the form in which the delete button is in. What i meant is, if user clicks the delete button on form1, then only form1 should be submitted. I have highlighted one line in Jquery code with stars. on that particullar line, when the user clicks the delete button, the id of the corresponding form or form index should retrieved (to which the delete button belongs) and submit only that particular form.

the problem i am facing:
i can hardcode the form ids but there is no way i can exactly know the number of form as it depends on the search term. So i am trying to retrieve it dynamically. is it possible?

p.s. on the delete button click event, if i select $(‘#delete’), it’l work for only one form. If i use $(‘.delete’), it is submitting all forms or may be over writing? (i guess because on doing var_dump($_POST) it is returning an empty array)

Any help would be appreciated. and if more information needed, i can provide.

Answer 1

@itachi

you can’t give same id to multiple elememts.
change your code as below

$('.delete').click(function(e){
    e.preventDefault();  
    currentForm = $(this).parent('form').get(0);
    $dialog.dialog('open');
    return false;
});

and

buttons: {

    "Yes": function(){
        if(currentForm){
            currentForm.submit();
        }
        $(this).dialog("close");   
    },
    "No": function(){
        $(this).dialog("close");
    }
}

you can view running demo here