[javascript] jQuery-기본값 방지 후 기본값 계속

Program / 글쓴이

제출할 때 양식을 제출하기 전에 추가 처리를해야하는 양식이 있습니다. 기본 양식 제출 동작을 방지 한 다음 추가 처리 (기본적으로 Google Maps API를 호출하고 양식에 숨겨진 필드 몇 개를 추가 함)를 수행 한 다음 제출할 양식이 필요합니다.

“불이행을 방지”하고 나중에 “불이행을 계속”하는 방법이 있습니까?

답변

.submit()이벤트를 양식에 바인딩하고 반환하기 전에 원하는 작업을 수행하면 (true) 이러한 일이 실제 제출 전에 발생합니다.

예를 들면 :

$('form').submit(function(){
    alert('I do something before the actual submission');
    return true;
});

간단한 예

jquery.com의 또 다른 예 : http://api.jquery.com/submit/#entry-examples

답변

사용하다 jQuery.one()

요소의 이벤트에 핸들러를 연결합니다. 핸들러는 이벤트 유형별로 요소 당 최대 한 번 실행됩니다.

$('form').one('submit', function(e) {
    e.preventDefault();
    // do your things ...

    // and when you done:
    $(this).submit();
});

one이 사용자 정의 submit이벤트는 첫 번째 제출 후 분리 되기 때문에 방지도 무한 루프를 사용 합니다.

답변

나는 그냥 할 것입니다.

 $('#submiteButtonID').click(function(e){
     e.preventDefault();
     //do your stuff.
     $('#formId').submit();
 });

양식을 제출해야하는 경우 preventDefault처음에 호출 하고 submit()나중에 함수를 사용 하십시오.

답변

이 방법을 사용하면 JS에서 무한 루프를 수행합니다. 더 나은 방법으로 다음을 사용할 수 있습니다.

var on_submit_function = function(evt){
    evt.preventDefault(); //The form wouln't be submitted Yet.
    (...yourcode...)

    $(this).off('submit', on_submit_function); //It will remove this handle and will submit the form again if it's all ok.
    $(this).submit();
}

$('form').on('submit', on_submit_function); //Registering on submit.

도움이 되었기를 바랍니다. 감사!

답변

IMHO는 가장 일반적이고 강력한 솔루션입니다 (예 : ‘사용자가 버튼을 클릭’하는 경우와 같이 작업이 사용자에 의해 트리거되는 경우).

  • 핸들러가 처음 호출되면 WHO가 트리거했는지 확인하십시오.
    • 사용자가 티거를 한 경우-작업을 수행 한 다음 다시 트리거 (원하는 경우)-프로그래밍 방식
    • 그렇지 않으면-아무 작업도하지 않습니다 (= “기본값 계속”).

예를 들어 “Are you sure?”를 추가하는이 우아한 솔루션에 주목하십시오. 속성으로 버튼을 장식하기 만하면 모든 버튼에 팝업이 표시됩니다. 사용자가 옵트 아웃하지 않으면 조건부로 기본 동작을 계속합니다.

1. “확실합니까”팝업을 원하는 모든 버튼에 경고 텍스트를 추가해 보겠습니다.

<button class="btn btn-success-outline float-right" type="submit"  ays_text="You will lose any unsaved changes... Do you want to continue?"                >Do something dangerous</button>

2. 이러한 모든 버튼에 핸들러를 연결합니다.

$('button[ays_text]').click(function (e, from) {
    if (from == null) {  // user clicked it!
        var btn = $(this);
        e.preventDefault();
        if (confirm() == true) {
            btn.trigger('click', ['your-app-name-here-or-anything-that-is-not-null']);
        }
    }
    // otherwise - do nothing, ie continue default
});

그게 다야.

답변

$('#myform').on('submit',function(event){
  // block form submit event
  event.preventDefault();

  // Do some stuff here
  ...

  // Continue the form submit
  event.currentTarget.submit();
});

답변

로 jQuery와 @ Joepreludian의 대답은 위의 작은 변화 :

명심해야 할 중요 사항 :

  • .one(...) 대신에 .on(...) or .submit(...)
  • named대신 기능을 anonymous function우리가 내을 참조되기 때문이다 callback.
$('form#my-form').one('submit', function myFormSubmitCallback(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    var $this = $(this);
    if (allIsWell) {
        $this.submit(); // submit the form and it will not re-enter the callback because we have worked with .one(...)
    } else {
        $this.one('submit', myFormSubmitCallback); // lets get into the callback 'one' more time...
    }
});

allIsWell아래 스 니펫 의 변수 값을 변경 true하거나 false기능을 테스트 할 수 있습니다.

$('form#my-form').one('submit', function myFormSubmitCallback(evt){
  evt.stopPropagation();
  evt.preventDefault();
  var $this = $(this);
  var allIsWell = $('#allIsWell').get(0).checked;
  if(allIsWell) {
    $this.submit();
  } else {
    $this.one('submit', myFormSubmitCallback);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" id="my-form">
  <input name="./fname" value="John" />
  <input name="./lname" value="Smith" />
  <input type="submit" value="Lets Do This!" />
  <br>
  <label>
    <input type="checkbox" value="true" id="allIsWell" />
    All Is Well
  </label>
</form>

스 니펫 확장

행운을 빕니다…