사용자 도구

사이트 도구


javascript:jquery:form

JQuery Form

checkbox/radio

  • $(“input[type=checkbox]”).is(“:checked”) : 체크박스나 라디오버튼의 체크 여부를 리턴한다. jQUery is() - 현재 요소가 selector를 만족하는지 리턴
  • $(“input[type=checkbox]: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

  • Ajax 로 Form을 submit 할 수 있다.
  • $.ajaxForm() 의 beforeSubmit 함수 내에서 폼의 내용을 바꾸는 것은 제대로 작동하지 않는다. 이럴 때는 폼의 내용을 바꾼뒤 $.ajaxSubmit()을 호출하는 것이 낫다.
  • Validation 플러그인과 함께 사용시에는 beforeSubmit에서 validate()를 호출하면 된다. 참조
    function(){ return $('.myForm').valid(); }
  • form의 submit 버튼을 <input type=“submit” ../> 이나 <button type=“submit” …> 등으로 할 경우 2 중으로 submit 되는 현상이 발생할 수 있다. 이를 위해 onclick=“return false;”를 해당 태그에 추가해주면 된다.

AjaxForm으로 파일 업로드

  • 파일을 업로드 할 때는 iframe: true 옵션을 주면된다.
  • iframe: true 옵션을 줄 경우, 그 결과로 JSON을 그냥 받을 수 없다. Firefox/IE는 application/json MIME TYPE을 Javascript에 결과로 넘겨주지 않고 파일로 다운로드하여 저장하기 때문이다. http://pinoytech.org/question/2755802/jquery-ajaxform-returning-json-file
  • 회피법
    • JSON 결과를 text/plain;charset=utf-8 로 리턴한다. 받는 측에서도 요청을 보낼 때 dataType: “text”로 지정하여 보낸다.
    • 결과를 문자열로 받아서 striptags를 실행한다.
      text.replace(/(<([^>]+)>)/ig,"");
    • 해당 결과를 jQuery.parseJSON(text); 로 JSON으로 변환하여 그 값을 사용한다.

iframe 옵션과 Cross Domain 문제

  • document.domain=XX 로 Cross Domain 설정을 한 상태에서 iframe 옵션을 사용하면 업로드가 작동하지 않는다. iframe 내부 컨텐츠의 document.domain 설정은 항상 iframe URL의 도메인을 따르게 되기 때문이다. Chrome에서 보면 다음과 같은 오류 발생.
    Unsafe JavaScript attempt to access frame with URL XXX from frame with URL YYY. Domains, protocols and ports must match.
  • 비록 document.domain 설정이 iframe 도메인을 포함한다고 하더라도 두 값이 정확히 동일하지 않으면 작동하지 않게 된다.
  • 해결책
    • iframe의 결과를 HTML로 하고, 해당 HTML의 <head>에서 document.domain을 호출자와 동일하게 설정하는 Javascript 코드를 넣어준다.
    • 호출자는 응답 결과를 text나 json이 아닌 html로 지정하고, html DOM Parsing을 한다.
    • 혹은, 응답 결과를 JSONP로 간주하고, 응답 html에서 callback 호출을 시도해본다.(아직 안해봄)

Enter 키로 Form submit 되는 것 막기

$("form").on("keypress", function (e) {
    if (e.keyCode === 13) {
        //원하는 작업들..
        return false;
    }
});
javascript/jquery/form.txt · 마지막으로 수정됨: 2016/09/02 13:27 저자 kwon37xi