차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- javascript:jquery:form [2011/04/25 20:06]
kwon37xi
+++ javascript:jquery:form [2016/09/02 13:27] (현재)
kwon37xi [jQuery Form Plugin]
@@ 줄 2: / 줄 2: @@
 ===== checkbox/radio =====
-  * $("input[type=checkbox]").is(":checked") : 체크박스나 라디오버튼의 체크 여부를 리턴한다. [[http://api.jquery.com/is/|jQUery is 현재 요소가 selector를 만족하는지 리턴]]
+  * $("input[type=checkbox]").is(":checked") : 체크박스나 라디오버튼의 체크 여부를 리턴한다. [[http://api.jquery.com/is/|jQUery is() - 현재 요소가 selector를 만족하는지 리턴]]
   * $("input[type=checkbox]:checked") : 체크된 요소만 리턴한다.
-  * $("input[type=checkbox]:not(checked)") : 체크 안 된 요소만 리턴한다.
+  * $("input[type=checkbox]:not(:checked)") : 체크 안 된 요소만 리턴한다.
+  * $("select").val() : ''select'' 요소의 선택된 값을 읽는다.
+  * $("select").val(1).select() : ''select'' 요소에서 ''option''의 value가 1인 것을 선택 상태로 만든다.
+  * $("select :selected").text() : ''select'' 요소에서 선택 상태인 ''option''의 문자열 값을 읽는다.
 ===== jQuery Form Plugin =====
@@ 줄 11: / 줄 13: @@
   * http://jquery.malsup.com/form/
   * Ajax 로 Form을 submit 할 수 있다.
+  * $.ajaxForm() 의 **beforeSubmit** 함수 내에서 폼의 내용을 바꾸는 것은 제대로 작동하지 않는다. 이럴 때는 폼의 내용을 바꾼뒤 $.ajaxSubmit()을 호출하는 것이 낫다.
+  * [[http://bassistance.de/jquery-plugins/jquery-plugin-validation/|Validation]] 플러그인과 함께 사용시에는 beforeSubmit에서 validate()를 호출하면 된다. [[http://mytory.co.kr/archives/2292|참조]]<code javascript>
+function(){ return $('.myForm').valid(); }
+</code>
+  * form의 submit 버튼을 ''<input type="submit" ../>'' 이나 ''<button type="submit" ...>'' 등으로 할 경우 2 중으로 submit 되는 현상이 발생할 수 있다. 이를 위해 ''onclick="return false;"''를 해당 태그에 추가해주면 된다.
+==== AjaxForm으로 파일 업로드 ====
-==== FileUpload ====
+  * 파일을 업로드 할 때는 **iframe: true** 옵션을 주면된다.
-  * 파일을 업로드 할 때는 *iframe: true* 옵션을 주면된다.
   * iframe: true 옵션을 줄 경우, 그 결과로 JSON을 그냥 받을 수 없다. Firefox/IE는 application/json MIME TYPE을 Javascript에 결과로 넘겨주지 않고 파일로 다운로드하여 저장하기 때문이다. http://pinoytech.org/question/2755802/jquery-ajaxform-returning-json-file
   * 회피법
@@ 줄 22: / 줄 28: @@
 </code>
     * 해당 결과를 jQuery.parseJSON(text); 로 JSON으로 변환하여 그 값을 사용한다.
+=== iframe 옵션과 Cross Domain 문제 ===
+  * ''document.domain=XX'' 로 Cross Domain 설정을 한 상태에서 iframe 옵션을 사용하면 업로드가 작동하지 않는다. iframe 내부 컨텐츠의 document.domain 설정은 항상 iframe URL의 도메인을 따르게 되기 때문이다. Chrome에서 보면 다음과 같은 오류 발생.<code>
+Unsafe JavaScript attempt to access frame with URL XXX from frame with URL YYY. Domains, protocols and ports must match.
+</code>
+  * 비록 document.domain 설정이 iframe 도메인을 포함한다고 하더라도 두 값이 정확히 동일하지 않으면 작동하지 않게 된다.
+  * 해결책
+    * iframe의 결과를 HTML로 하고, 해당 HTML의 <head>에서 **document.domain**을 호출자와 동일하게 설정하는 Javascript 코드를 넣어준다.
+    * 호출자는 응답 결과를 text나 json이 아닌 **html**로 지정하고, html DOM Parsing을 한다.
+    * 혹은, 응답 결과를 JSONP로 간주하고, 응답 html에서 callback 호출을 시도해본다.(아직 안해봄)
+  * [[http://www.sencha.com/forum/showthread.php?136092-Response-lost-from-upload-Ajax-request-to-iframe-if-document.domain-changed|Response lost from upload Ajax request to iframe if document.domain changed]] 참조
+===== Enter 키로 Form submit 되는 것 막기 =====
+  * [[http://stackoverflow.com/questions/585396/how-to-prevent-enter-keypress-to-submit-a-web-form|How to prevent ENTER keypress to submit a web form?]]
+<code javascript>
+$("form").on("keypress", function (e) {
+    if (e.keyCode === 13) {
+        //원하는 작업들..
+        return false;
+    }
+});
+</code>

권남

사용자 도구

사이트 도구

차이

문서 도구