Form 태그 동적으로 만들어서 POST 전송 (Vanilla JS, jQuery)

가끔 form 태그를 직접 만들어서 submit 해야하는 경우가 있다.

Vanilla Javascript

Vanilla Javascript로 하면 다음과 같다.

function createForm() {
    var form = document.createElement("form");
    form.setAttribute("id", "form");
    form.setAttribute("method", "Get / Post");
    form.setAttribute("action", "action URL");
    // encoding 필요 시
    // form.setAttribute("encType", "application/x-www-form-urlencoded");

    var hiddenField = document.createElement("input");
    hiddenField.setAttribute("type", "hidden");
    hiddenField.setAttribute("name", "BD_ATT_SNO");
    hiddenField.setAttribute("value", bdAttSno);
    form.appendChild(hiddenField);

    document.body.appendChild(form);
    // 만약 euc-kr 페이지로 전송 시
    // IE를 제외한 브라우저는
    // form attr 로 accept-charset 속성에 euc-kr 부여하고
    // IE는 아래처럼 보내기 직전에 document에 설정해야함
    // document.charset = "euc-kr";
    form.submit();
    document.getElementById("form").remove();
}

---

jQuery

가끔 Vanilla Javascript로 안먹히는 경우가 있는데 그런 경우 jQuery로 시도해보자.
아마 IE 브라우저에서 Vanilla Javascript가 아직 제대로 작동 안하는 것일 수 있다.

var newForm = $('<form></form>');
newForm.attr("method", "Get / Post");
newForm.attr("action", "action URL");
newForm.attr("target", "_blank");

newForm.append($('<input/>', {type: 'hidden', name: 'name', value: 'value'}));

newForm.appendTo('body');
document.charset = "euc-kr";
newForm.submit();