jQuery-기본값 방지 후 기본값 계속

jQuery-기본값 방지 후 기본값 계속

---

제출할 때 양식을 제출하기 전에 추가 처리를해야하는 양식이 있습니다. 기본 양식 제출 동작을 방지 한 다음 추가 처리 (기본적으로 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();
});

원하는 것을 수행하고 여러 제출에 대해 걱정할 필요가 없습니다.

---

그냥 ..

 $('#submiteButtonID').click(function(e){
     e.preventDefault();
     //do ur 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가 트리거했는지 확인하십시오.
  • 사용자가 티거를 한 경우-작업을 수행 한 다음 다시 트리거 (원하는 경우)-프로그래밍 방식
  • 그렇지 않으면-아무 작업도하지 않습니다 (= "기본값 계속").

As an example, note this elegant solution to adding "Are you sure?" popup to any button just by decorating a button with an attribute. We will conditionally continue default behavior if the user doesn't opt out.

1. Let's add to every button that we want an "are you sure" popup a warning text:

<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. Attach handlers to ALL such buttons:

$('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
});

That's it.

---

With jQuery and a small variation of @Joepreludian's answer above:

Important points to keep in mind:

• .one(...) instead on .on(...) or .submit(...)
• named function instead of anonymous function since we will be referring it within the 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...
    }
});

You can change the value of allIsWell variable in the below snippet to true or false to test the functionality:

$('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>

Good Luck...

---

You can use e.preventDefault() which will stop the current operation.

than you can do$("#form").submit();

 $('#form').submit(function (e)
{
    return !!e.submit;
});
if(blabla...)
{...
}
else
{
    $('#form').submit(
    {
        submit: true
    });
}

---

In a pure Javascript way, you can submit the form after preventing default.

This is because HTMLFormElement.submit() never calls the onSubmit(). So we're relying on that specification oddity to submit the form as if it doesn't have a custom onsubmit handler here.

var submitHandler = (event) => {
  event.preventDefault()
  console.log('You should only see this once')
  document.getElementById('formId').submit()
}

See this fiddle for a synchronous request.

---

Waiting for an async request to finish up is just as easy:

var submitHandler = (event) => {
  event.preventDefault()
  console.log('before')
  setTimeout(function() {
    console.log('done')
    document.getElementById('formId').submit()
  }, 1400);
  console.log('after')
}

You can check out my fiddle for an example of an asynchronous request.

---

And if you are down with promises:

var submitHandler = (event) => {
  event.preventDefault()
  console.log('Before')
    new Promise((res, rej) => {
      setTimeout(function() {
        console.log('done')
        res()
      }, 1400);
    }).then(() => {
      document.getElementById('bob').submit()
    })
  console.log('After')
}

And here's that request.

---

"Validation injection without submit looping":

I just want to check reCaptcha and some other stuff before HTML5 validation, so I did something like that (the validation function returns true or false):

$(document).ready(function(){
   var application_form = $('form#application-form');

   application_form.on('submit',function(e){

        if(application_form_extra_validation()===true){
           return true;
        }

        e.preventDefault();

   });
});

---

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

  // Do some stuff here
  ...

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

참고URL : https://stackoverflow.com/questions/14375144/jquery-prevent-default-then-continue-default