Program Tip

양식 제출 전 Jquery 함수

programtip 2020. 12. 3. 19:10
반응형

양식 제출 전 Jquery 함수


양식 제출 버튼을 클릭 할 때 Jquery를 사용하여 함수를 실행하려고하는데 양식이 실제로 제출되기 전에 함수를 실행해야합니다.

제출시 일부 div 태그 속성을 숨겨진 텍스트 필드에 복사 한 다음 양식을 제출하려고합니다.

마우스 오버 기능을 사용하여 (제출 버튼을 가리킬 때) 작동하도록 관리했지만 터치를 사용하는 모바일 장치에서는 작동하지 않습니다.

$("#create-card-process.design #submit").on("mouseover", function () {
    var textStyleCSS = $("#cover-text").attr('style');
    var textbackgroundCSS = $("#cover-text-wrapper").attr('style');
    $("#cover_text_css").val(textStyleCSS);
    $("#cover_text_background_css").val(textbackgroundCSS);
});

.submit 함수를 가지고 놀았지만 양식이 제출 될 때 함수가 실행되기 때문에 값이 필드 내에 저장되지 않습니다.

많은 감사


onsubmit 함수를 사용할 수 있습니다.

거짓을 반환하면 양식이 제출되지 않습니다. 여기에서 그것에 대해 읽어보십시오 .

$('#myform').submit(function() {
  // your code here
});

$('#myform').submit(function() {
  // your code here
})

위의 내용은 Firefox 에서 작동 하지 않습니다 . 양식은 코드를 먼저 실행하지 않고 제출하기 만하면됩니다. 또한 유사한 문제 가이 질문 과 같이 다른 곳에서 언급됩니다 . 해결 방법은

$('#myform').submit(function(event) {

 event.preventDefault(); //this will prevent the default submit

  // your code here (But not asynchronous code such as Ajax because it does not wait for response and move to next line.)

 $(this).unbind('submit').submit(); // continue the submit unbind preventDefault
})

Aghhh ... .submit 기능을 처음 시도했을 때 일부 코드가 누락되었습니다 .....

이것은 작동합니다 :

$('#create-card-process.design').submit(function() {
var textStyleCSS = $("#cover-text").attr('style');
var textbackgroundCSS = $("#cover-text-wrapper").attr('style');
$("#cover_text_css").val(textStyleCSS);
$("#cover_text_background_css").val(textbackgroundCSS);
});

모든 의견에 감사드립니다.


버튼 대신 일부 div 또는 span을 사용할 수 있으며 클릭시 끝에서 양식을 제출하는 일부 함수를 호출 할 수 있습니다.

<form id="my_form">
   <span onclick="submit()">submit</span>
</form>

<script>
   function submit()
   {   
       //do something
       $("#my_form").submit();
   }
</script>

Wakas Bukhary 답변을 기반으로 응답 범위에 마지막 줄을 넣어 비 동기화 할 수 있습니다.

$('#myform').submit(function(event) {

  event.preventDefault(); //this will prevent the default submit
  var _this = $(this); //store form so it can be accessed later

  $.ajax('GET', 'url').then(function(resp) {

    // your code here 

   _this.unbind('submit').submit(); // continue the submit unbind preventDefault
  })  
}

제출 기능을 사용할 때마다이 실수를했기 때문입니다.

다음은 필요한 전체 코드입니다.

HTML 양식 태그에 ID " yourid "를 추가하십시오 .

<form id="yourid" action='XXX' name='form' method='POST' accept-charset='UTF-8' enctype='multipart/form-data'>

jQuery 코드 :

$('#yourid').submit(function() {
  // do something
});

참고URL : https://stackoverflow.com/questions/21938788/jquery-function-before-form-submission

반응형