2012-03-05 4 views
3

사용자가 양식의 제출 버튼을 클릭 할 때 양식을 제출하는 대신 비밀번호 프롬프트를 표시하고 있습니다. 사용자가 프롬프트의 "확인"버튼을 클릭하면 양식이 제출되기를 원합니다. jquery impromptu plugin (버전 3.1 및 4.0.1 모두 사용)을 사용하고 있습니다. 나는 서둘러 abd가 내 코드를 잘못 이해하지 못했거나 완전히 놓친다.jquery form submit() impromptu를 사용하는 동안 정상적인 제출을 막은 후에 콜백 함수 내부에서 작업하지 않음

여기 내 코드입니다 -

시험 1
HTML 부분

<form name="frmAddAdnetworkTemplate" id="frmAddAdnetworkTemplate" action="someAction"> 
    ... 
    ... 
    <input id="submit" type="submit" name="submit" value="Submit" onclick="return promptPassword();" /> 
</form> 

자바 스크립트 부분

function promptPassword() 
{ 
    /*prepared passwordForm = some html; here */ 
    $.prompt(passwordForm,{ buttons: { Ok:, Cancel: false , submit: }, callback: submitPasswordPrompt, focus: 1}); 

    return false; //so as to not submit the form 
} 

function submitPasswordPrompt(value,m,form) 
{ 
    $("form#frmAddAdnetworkTemplate").submit(); //this does not work - no js error as well 
} 

그러나, 양식을 제출하지 않습니다. 나는에서 preventDefault()를 시도 1.2

대신 제출에 submitPasswordPrompt를 호출 시험 1.1

,

function promptPassword() 
{ 
    $.prompt(passwordForm,{ buttons: 
          { Ok: $("#frmAddAdnetworkTemplate").submit(), //this too does not work 
           Cancel: false }, 
          focus: 1 
          }); 

} 

시험 -

HTML 부분

<input id="submit" type="submit" name="submit" value="Submit" onclick="promptPassword(event);"/> 

자바 스크립트 부분

function promptPassword(e) 
{ 
    e.preventDefault(); 
    $.prompt(passwordForm,{ buttons: { Ok: true, Cancel: false }, submit: submitPasswordPrompt}); 

    function submitPasswordPromptTest(e, value,m,form) 
    { 
    if(value) 
    { 
     $("#frmAddAdnetworkTemplate").submit(); //does not work 
    } 
    } 

시험이 나는 또한 제출 버튼을 클릭 이벤트와 결합함으로써, .ready $ .prompt 문서 내부 문서를 호출하려고 -

HTML 부분

<input id="submit" type="submit" name="submit" value="Submit" /> 

자바 스크립트 부분

$("#submit").click(function(){ 
    $.prompt(passwordForm,{ buttons: { Ok: $("#frmAddAdnetworkTemplate").submit(), Cancel: false }}); 
    return false; 
}); 

내가 ("#의 frmAddAdnetworkTemplate") 해제 ('제출') 제출() $를 시도 할 때이 오류가 발생했습니다..; - jQuery를 기능과 이벤트와 인라인 자바 스크립트를 혼합

e[h] is not a function 

enter image description here

+0

향후 혼란을 피하기 위해 양식의'action' 매개 변수로 코드를 업데이트하십시오. – tvanfosson

+0

@tvanfosson - 완료. –

+0

@tvanfosson - 나는 또한 $ ("# frmAddAdnetworkTemplate")을 해봤 다. off ('submit'). submit(); jQuery 1.7.1로 전환하여 제안했지만, (스크린 샷 첨부) 오류가 발생했습니다. Will $ ("# frmAddAdnetworkTemplate"). unbind ('submit'). submit(); 똑같은거야? 나는 그것을 시도하고 성공하지 못했습니다. –

답변

1

는 따라 가기 힘들 수 있습니다.

"이벤트"변수가 onclick="promptPassword(event);"에 정의되어 있지 않고 promptPassword() 함수가 인수를 허용하지 않기 때문에 "시험판 1.2"시도가 작동하지 않습니다. 따라서 을 e으로 정의 할 수 없으므로 (jQuery 객체로) 사용할 수 없습니다.

그러나 jQuery를 사용하면 양식 submit에 바인딩하여 모든 유형의 제출을 ​​포착 할 수 있습니다. 즉 Enter 키를 사용하거나 제출 버튼을 클릭 할 때.

$(document).ready(function() { 
    $('#myForm').submit(function(event) { 
     var password = "password", 
      promptText = "Password required", 
      isAuthenticated = (password == prompt(promptText)); 

     if (!isAuthenticated) { 
      event.preventDefault(); 
      //console.log("Invalid password"); 
     } 
    }); 

}); 

보기 demo.

+0

@Stefan ... 죄송합니다, 다시 한번 , 질문을하는 동안 나는 실수를했다. "이벤트"변수는 실제로 내 코드에서 정의되었습니다. 내 코드에서 똑같이 수정했습니다. 그러나 귀하의 대답은 내가 처음에 event.preventDefault()를 호출 할 필요가 없다는 것을 이해하는 데 도움이되었습니다. 그리고 나서 어떤 조건에 따라 form.submit()을 나중에 호출하십시오. 대신 event.preventDefault()를 조건에 따라 끝에 한 번 호출 할 수 있습니다. 이 질문을 확인하십시오 - http://stackoverflow.com/q/9570592/351903. –

1

이 문제는 id = "submit" 에 의해 발생하며 이는 HTML 제출과 섞여 발생합니다. 내가 전에이 문제를 가지고 있었고, 대답은 뭔가 다른 (안전을 위해) ID와 이름을 변경할 수 있습니다 :

<input id="my-form-submit" type="submit" name="my-form-submit" value="Submit" /> 
1

내 senario

에 대한

를 제출하여 버튼의 ID를 사용하여

$.prompt(msg, { 
    buttons: btns, 
    submit: function (v) { 
     //this is simple pre submit validation, the submit function 
     //return true to proceed to the callback, or false to take 
     //no further action, the prompt will stay open. 
    }, 
    callback: function (e, v, m, f) { 
     if (v) { 
      $("#MainContent_HiddenFieldIsContinueWithSave").val('1'); 
      $("#MainContent_buttonSave").submit(); 
     } 
     else { } 
    } 
});