jQuery - Form input return confirm to delete

Question

hello guys. I struggled a lot before posting here :) now, I want to replace my default javascript confirmation for deleting a file. I saw a lot of examples here, but no example with form input.

Now I have his form:

<form action="delete.php" method="post">
<input type="hidden" name="id" value="<{$pid}>" />
<input type="hidden" name="picture" value="<{$lang_del_pic}>" />
<input type="image" src="<{xoImgUrl}>img/del-icon.gif" width="16" height="16" align="bottom" border="0" alt="Delete media" name="pictured" value="<{$lang_del_pic}>" onclick="javascript: return confirm('<{$lang_confirm_del}>');" />
</form>

Now, I did everything, I have this div:

<div id="dialog-confirm" title="Empty the recycle bin?">
 <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>

this javascript:

<script type="text/javascript">
 $(function() {
  // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
  $("#dialog").dialog("destroy");


  $("#dialog-confirm").html('This dialog will show every time!');  
  $("#dialog-confirm").dialog({
   autoOpen: false,
   title: 'Kur za berbatov',
   resizable: false,
   height:140,
   modal: true,
   buttons: {
    'Delete all items': function() {
     document.location = 'delete.php';

    },
    Cancel: function() {
     $(this).dialog('close');
    }
   }
  });


  $('form#dialog-confirm').submit(function(){
            $("input#pictured").html($("input#pictured").val());
            $('#dialog').dialog('open');
            return false;
        }); 


  $('input#opener').click(function() {
   $('#dialog-confirm').dialog('open');
  }); 

 });
 </script>

and this new form:

<form name="dialog-confirm"  id="dialog-confirm" method="post">
<input type="hidden" name="id" value="<{$pid}>" />
<input type="hidden" name="picture" value="<{$lang_del_pic}>" />
<input type="image" src="<{xoImgUrl}>img/del-icon.gif" width="16" height="16" align="bottom" border="0" alt="Delete media" name="pictured" value="" id="opener"  />
</form>

On press, I call successfuly the jQuery modal diolog, and everything works, but somehow, when I press 'delete all' the script tells me - "the script is called without the necessary parameters"

Now I guess I am failig to send the pic ID to be deleted with the jQuery, .. but do not know how to fix it. Any ideas ?

Update

Well, I have posted the original form, the new form, and the jQuery... I really can not do it... please take a look at the post up.

Is there no way doing it as I posted it, without an submit button. I mean the original works fine, however, I have hard times implementing it in the jQuery

P.S. I messedup with my accounts here, this is a new one :)

Update 2

Now this should work according all tutorials. But the delete button still does not submit the form... Why is that, please help me..

    <script type="text/javascript">
        $(function() {
            // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
            $("#dialog").dialog("destroy");


            $("#dialog-confirm").html('This dialog will show every time!');     
            $("#dialog-confirm").dialog({
                autoOpen: false,
                title: 'Kur za berbatov',
                resizable: false,
                height:140,
                modal: true,
                buttons: {
                    'Delete all items': function() {
                        document.dialog-confirm.submit(); 

                    },
                    Cancel: function() {
                        $(this).dialog('close');
                    }
                }
            });


            $('form#dialog-confirm').submit(function(){
                $('#dialog-confirm').dialog('open');
                return false;
            }); 

        });
        </script>



<form action="delete.php" name="dialog-confirm"  id="dialog-confirm"  method="post">
<input type="hidden" name="id" value="<{$pid}>" />
<input type="hidden" name="picture" value="<{$lang_del_pic}>" />
<input type="image" src="http://7est2.mqsto.com/themes/exnews/img/del-icon.gif" width="16" height="16" align="bottom" border="0" alt="Delete media" name="pictured" value="" id="opener"  />
</form>

Answer 1

why don't you submit the form with a submit button and if the form is submitted you can get the id by:

var id = 0;
$("form").submit(function(){
     id = $(this).attr("id");
});

now you get a global var and you can use it in your other functions

   buttons: {
    'Delete all items': function() {
    ...
    build an Ajax call here you can use id 
    ...     
    },

Update

instead of useing document.dialog-confirm.submit();

I should use:

$('#dialog-confirm').submit();

Update 2

take a look at $(document).ready(function() { ... } maybe you place the code wrong or something. and try to work with alert() to debug your javascript