html 양식 제출 중지

Question

안녕하세요. 예를 들어 사용자에게 묻는 onclick 이벤트가있는 HTML 양식이 있습니다. 확실한 경우 예/아니오. 아니요를 선택하면 양식 제출을 중단한다고 가정하지만 대화 상자가 비동기로 호출됨에 따라 처리하는 것처럼 보입니다. 내 프롬프트를 표시하기 위해 jquery 플러그인 http://marcosesperon.es/apps/messi/을 사용하고 있습니다. 내가 ASP.NET MVC 4와 I '를 사용하고

<script> 

var COMMAND = { 
    SAVE: { value: 0, name: "Save", tense: "saved" }, 
    EMAIL: { value: 1, name: "Email", tense: "emailed" }, 
    SUBMIT: { value: 2, name: "Submit", tense: "submitted" }, 
}; 

function processCommand(command) { 
    if (command == COMMAND.EMAIL) { 

    } 
    else if (command == COMMAND.SAVE) { 
     $('#Submit').val(command.name); 
     $('#inspectionForm').submit(); 
    } 
    else if (command == COMMAND.SUBMIT) { 
     $('#Submit').val(command.name); 
     var photosAttached = '@Model.Survey.SitePhotoes.Count()'; 
     console.log('processCommand: submit - begin'); 
     if (photosAttached >= 1) { 
      console.log('processCommand: submit photos attached.'); 
      return true; 
     } else { 
      console.log('processCommand: prompt messi.'); 
      new Messi('Are you sure you wish to submit as no inspections photos are currently attached?', { 
       title: command.name + ' Inspection', 
       buttons: [{ id: 0, label: 'Yes', val: 'Y', btnClass: 'btn-success' }, 
          { id: 1, label: 'No', val: 'N', btnClass: 'btn-danger' }], 
       modal: true, 
       callback: function (val) { 
        if (val == 'Y') { 
         console.log('processCommand: yes.'); 
         return true; 
        } 
        else { 
         console.log('processCommand: no.'); 
         return false; 
        } 
       } 
      }); 
     } 
     console.log('processCommand: submit - end'); 
    } 

}

: 자바 스크립트 기능 다음

<div id="buttonCommnads"> 
     <button type="submit" class="k-button cancel" id="save" value="Save" title="Save inspection so it may be submitted at a later time" onclick="processCommand(COMMAND.SAVE);">Save</button> 
     <button type="submit" class="k-button" id="Submit" value="Submit" title="Submit inspection" onclick="return processCommand(COMMAND.SUBMIT);">Submit</button> 
     @*<button type="submit" class="k-button" id="email" title="Generate draft email for inspection photos" onclick="processCommand(COMMAND.EMAIL);">Email</button>*@ 
     <button type="button" class="k-button" id="cancel" title="Discard changes" onclick="location.href='@Url.Action("Index", "Inspections")'">Cancel</button> 
    </div> 

과 : 아래

는 내 코드의 조각이다 웹 개발에 상당히 새로운 것이므로 제 무지를 용서하십시오. 어떤 도움이라도 대단히 감사합니다.

빈스.

Answer 1

대화 상자가 비동기 적으로 행동하고이를 방지 할 수있는 방법은 없습니다.

HTML : :

<button type="submit" class="k-button" id="email" title="Generate draft email for inspection photos" onclick="(function() {processCommand(COMMAND.EMAIL);return false;})()">Email</button> 

자바 스크립트 :

function processCommand(command) { 
    if (command == COMMAND.EMAIL) { 

    } 
    else if (command == COMMAND.SAVE) { 
     $('#Submit').val(command.name); 
     $('#inspectionForm').submit(); 
    } 
    else if (command == COMMAND.SUBMIT) { 
     $('#Submit').val(command.name); 
     var photosAttached = '@Model.Survey.SitePhotoes.Count()'; 
     console.log('processCommand: submit - begin'); 
     if (photosAttached >= 1) { 
      console.log('processCommand: submit photos attached.'); 
      return true; 
     } else { 
      console.log('processCommand: prompt messi.'); 
      new Messi('Are you sure you wish to submit as no inspections photos are currently attached?', { 
       title: command.name + ' Inspection', 
       buttons: [{ id: 0, label: 'Yes', val: 'Y', btnClass: 'btn-success' }, 
          { id: 1, label: 'No', val: 'N', btnClass: 'btn-danger' }], 
       modal: true, 
       callback: function (val) { 
        if (val == 'Y') { 
         console.log('processCommand: yes.'); 
         $("form:first").submit(); 
        } 
        else { 
         console.log('processCommand: no.'); 
        } 
       } 
      }); 
     } 
     console.log('processCommand: submit - end'); 
    } 

Answer 2

기본 동작 인 submit 이벤트를 방지하여 양식 제출을 중지합니다. click 이벤트는 키보드로도 양식을 제출할 수 있으므로 적절하지 않습니다.

jQuery를에 그건 :

$('form').on('submit', function(){ 
    return false; 
}) 

프롬프트가 항상 정상 제출 및 힘을 중지 할 때 사용자 프레스 "예"form.submit()와 함께 제출해야합니다 비동기이기 때문에.

Answer 3

event.preventDefault(); 

기본 동작을 방지하려면이 설정을 사용하십시오.

More info

Answer 4

I 그러나 당신이 할 수있는 것은 양식이 버튼을 클릭 제출하는 대신 적절한 경우 콜백 내에서 제출되지 않도록이다 제출 단추를 일반 단추 (변경 type="submit" ~ type="button")로 변경합니다. 그리고, 당신은 사용자가 누른 것으로 평가되는 경우, 버튼에 의해 트리거되는 함수에 "예", jQuery를 사용하여 양식을 제출

('#yourFormID').submit();

그렇지 않으면 단지 return false합니다.

편집 : 이미 submit()이 jQuery를 사용하고 있기 때문에 버튼이 submit 일 필요는 없습니다. 버튼 type을 submit 대신 button으로 변경하고 아무 것도 제출하지 않으려는 경우 return false을 추가하면 어떻게됩니까? 너의 질문에 그게 무슨 뜻이야?