아약스 양식 제출 (8)

나는 원래의 형태로 소스 코드를 사용자 정의하고 두 가지 형태로 만든 :아약스 양식 제출 (8)

을

IE (8)를 제외한 모든 브라우저에서 작동합니다. 뭐가 문제 야?

첫 번째 형태 :

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>First form</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
</head> 

<body> 
    <form method="POST" id="ss-form"> 
    <br> 
    <div class="errorbox-good"> 
     <div class="ss-item ss-text"> 
     <div class="ss-form-entry"> 
      <label class="ss-q-title" for="entry_0">Name 
      </label> 
      <label class="ss-q-help" for="entry_0"></label> 
      <input type="text" name="entry.0.single" class="ss-q-short" value="" id="entry_0"> 
     </div> 
     </div> 
    </div> 
    <br> 
    <input type="hidden" name="pageNumber" value="0"> 
    <input type="hidden" name="backupCache" value=""> 
    <div class="ss-item ss-navigate"> 
     <div class="ss-form-entry"> 
     <input type="submit" name="submit" value="Submit"> 
     </div> 
    </div> 
    </form> 
    <script> 
    $("#ss-form").submit(function (event) { 
     event.preventDefault(); 
     $.ajax({ 
     type: 'POST', 
     url: 'https://docs.google.com/spreadsheet/formResponse?formkey=dGd3WHdkOTFRMzMyd0J1ZGFLVW50WlE6MQ&amp;ifq', 
     data: { 
      'entry.0.single': $('#entry_0').val() 
     }, 
     success: function() { 
      alert('Thanks!'); 
     } 
     }); 
    }); 
    </script> 
</body> 

</html>

두 번째 형태 :

$(function(){ ... });

일예 :

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Second form</title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
</head> 

<body> 
    <form method="POST" id="ss-form"> 
    <br> 
    <div class="errorbox-good"> 
     <div class="ss-item ss-text"> 
     <div class="ss-form-entry"> 
      <label class="ss-q-title" for="entry_0">Name 
      </label> 
      <label class="ss-q-help" for="entry_0"></label> 
      <input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0"> 
     </div> 
     </div> 
    </div> 
    <br> 
    <input type="hidden" name="pageNumber" value="0"> 
    <input type="hidden" name="backupCache" value=""> 
    <div class="ss-item ss-navigate"> 
     <div class="ss-form-entry"> 
     <input type="submit" name="submit" value="Submit"> 
     </div> 
    </div> 
    </form> 
    <script> 
    $("#ss-form").submit(function (event) { 
     event.preventDefault(); 
     $.post('https://docs.google.com/spreadsheet/formResponse?formkey=dGd3WHdkOTFRMzMyd0J1ZGFLVW50WlE6MQ&amp;ifq', $("#ss-form").serialize(), 
     function() { 
      alert('Thanks!'); 
     } 
    ); 
    }); 
    </script> 
</body> 

</html>

출처

2012-10-18 Mori

코드에 어떤 문제가 있는지 알려면 약간의 코드가 필요합니다. –

위의 사용자 지정 양식과 해당 소스 코드에 액세스 할 수 있습니다. – Mori

@RainLover 내년에 이용할 수 있습니까? –

그냥에 모든 스크립트를 포장

$(function(){ 

    $.support.cors = true; // for cross-origin requests in IE 

    $("#ss-form").submit(function(event) { 
     event.preventDefault(); 
     $.post('https://docs.google.com/spreadsheet/formResponse?formkey=dGd3WHdkOTFRMzMyd0J1ZGFLVW50WlE6MQ&amp;ifq', $("#ss-form").serialize(), 
      function() { 
       alert('Thanks!'); 
      } 
     ); 
     }); 

});

문서가 끝에로드되지 않고 이벤트 대상이 아직 DOM에없는 경우 이벤트 콜백이 지정됩니다. 스크립트를 $(function(){ ... });에 랩핑하면 페이지가로드 된 후 코드가 실행됩니다.

출처

2012-10-18 20:01:43

해답을 가져 주셔서 감사합니다. 그러나 차이점은 없습니다 - 방금 테스트되었습니다 : http : //dl.dropbox.com/u/4017788/Labs/third-form.htm – Mori

jQuery의 알려진 버그로 밝혀졌습니다 IE의 경우 : http://bugs.jquery.com/ticket/10660 해결 방법에 대한 답변을 확인하십시오. –

운이 없다고 시도했습니다. : ( – Mori

아약스 양식 제출 (8)

답변

관련 문제