2010-05-21 8 views
8

내가 jQuery를 사용하여 확인 대화 상자를 할 노력하고있어,하지만 양식이 전혀 제출되지 않습니다, 이것은 내가 가진 것입니다 :JQuery와의 대화 : 버튼 제출에 클릭을 확인하는 것은

<script type="text/javascript"> 
    var currentForm; 
    $(function() { 
     $("#dialog-confirm").dialog({ 
      resizable: false, 
      height: 140, 
      modal: true, 
      autoOpen: false, 
      buttons: { 
       'Delete all items': function() { 
        currentForm.submit(); 
        $(this).dialog('close'); 
       }, 
       Cancel: function() { 
        $(this).dialog('close'); 
       } 
      } 
     }); 
    }); 

    function ask() { 
     currentForm = $(this).closest('form'); 
     $("#dialog-confirm").dialog('open'); 
    } 
</script> 
<form ... > 
    <input type="submit" value="delete" onclick="ask();return false;" /> 
</form> 

답변

16

:

   'Delete all items': function() { 
        $(this).dialog('close'); 
        $("#myForm").submit(); 
       } 

나머지 코드는 맞지만 현재는 대화 상자를 닫고 돌아 오는 중입니다. 실제로 양식을 제출해야합니다. 또한, (는 의견을 업데이트)과 같이, onclick 대신, 클릭 핸들러로이 작업을 수행하는 것이 좋습니다 :

var currentForm; 
    $(function() { 
     $("#dialog-confirm").dialog({ 
      resizable: false, 
      height: 140, 
      modal: true, 
      autoOpen: false, 
      buttons: { 
       'Delete all items': function() { 
        $(this).dialog('close'); 
        currentForm.submit(); 
       }, 
       'Cancel': function() { 
        $(this).dialog('close'); 
       } 
      } 
     }); 
     $(".delete").click(function() { 
      currentForm = $(this).closest('form'); 
      $("#dialog-confirm").dialog('open'); 
      return false; 
     }); 
    }); 

그럼 그냥 delete의 당신의 <input> 클래스를 제공,이 같은 :

<input class="delete" type="submit" value="delete" /> 
+1

문제는 내가 그것들 안에 삭제 버튼이있는 형태가 많다는 것이다. 단지 숨겨진 입력이다. '이 양식의 차이를 만드는 것 – Omu

+0

양식에 다른 이름/ID를 부여 할 수 있습니다. 이름에 양식 + theId가 포함될 수 있습니다. – Omu

+1

@Omu - "currentForm ='$ (this) .closest ('form')'를 호출 한 다음, delete 버튼의 핸들러에서'currentForm.submit()'을 호출하고, ID가 필요 없다 ... 클래스 또는 애트리뷰트 선택자를 사용하기 위해 delete 클릭 핸들러를 변경하면된다. –

4

하는 경우 당신은 인라인 자바 스크립트 제대로을 피하고, jQuery를 사용하고 있습니다 :

당신은 당신의 대화 버튼이처럼 <form> 제출이 필요
$(function(){ 
    $("form").submit(function(){ 
    // return false if you don't want this to be submitted 
    // maybe do a 
    // return ask(); 
    // but with the code provided it doesn't seem 
    // to work like that - ask() is not returning anything at all! 
    }); 
}); 
0

이것은 나를 위해 일한 :

$(function() { 
    $("#accordion").accordion({ 
     heightStyle: "content" 
    }); 

    function confirmDialog(title, message, success) { 
     var confirmdialog = $('<div></div>').appendTo('body') 
      .html('<div><h6>' + message + '</h6></div>') 
      .dialog({ 
       modal: true, 
       title: title, 
       zIndex: 10000, 
       autoOpen: false, 
       width: 'auto', 
       resizable: false, 
       buttons: { 
        Yes: function() { 
         success(); 
         $(this).dialog("close"); 
        }, 
        No: function() { 
         $(this).dialog("close"); 
        } 
       }, 
       close: function() { 
        $(this).remove(); 
       } 
      }); 

     return confirmdialog.dialog("open"); 
    } 

    $('form').on('submit', function (e) { 
     e.preventDefault(); 
     var form = this; 

     confirmDialog('Confirm', 'Are you sure?', function() { 
      form.submit(); 
     }); 
    }); 
}); 

참조 : http://jsfiddle.net/pmw57/67Ge2/

관련 문제