javascript 자바스크립트로 form 작성 > 질문답변

• 목록

/**
 * 폼생성
 * @param frmName {폼이름}
 * @param frmMethod {get post)
 * @param frmAction {액션 주소)
 * @param frmTarget {타겟)
 */
 function createForm(frmName, frmMethod, frmAction, frmTarget) {
  var frm = document.createElement(\"form\");
  frm.name  = frmName;
  frm.method  = frmMethod;
  frm.action  = frmAction;
  frm.target  = frmTarget;
  return frm;
 }
 /**
 * 히든추가
 * @param frmName {폼이름}
 * @param hiddenName {히튼이름)
 * @param hiddenValue {히든 값)
 */
  function addHidden(frmName, hiddenName, hiddenValue) {
  var item = document.createElement(\"input\");
  item.type = \"hidden\";
  item.name = hiddenName;
  item.value = hiddenValue;
  frmName.insertBefore(item);
  return frmName;
}
/**
  * 폼 서브밋
  */
function fromSubmit(){
 var form = createForm(\"popForm\", \"post\", \"thekziel.html\", \"kizel\");
 document.insertBefore(form );
 form = addHidden(form, \"method\", \"pop\");
 form.submit();
}









-----------------------


보통 내가 자바스크립트를 통해 url과 parameter를 전송할때에 쓰는 스크립트는 아래와 같이 GET방식을 이용한 전송을 사용한다.


document.location.href=\"http://example.com/a.php?q=a\";

하지만 어떤 경우에는 POST 방식의 전송을 써야하는 경우가 발생하는데 아래와 같이 <form>태그를 이용하려면 값을 입력하고 전송해주는 스크립트를 만들고 <form>를 선언해놔야 사용할 수가 있다.


<form action=\"http://example.com/a.php\" method=\"POST\">
  <input type=\"hidden\" name=\"q\" value=\"a\">
</form>
이러한 번거로운 작업을 피하기 위해 아래 소스를 찾게 되었다.참고하여 실 작업에 반영하도록 하자.


/*
 * path : 전송 URL
 * params : 전송 데이터 {'q':'a','s':'b','c':'d'...}으로 묶어서 배열 입력
 * method : 전송 방식(생략가능)
 */
function post_to_url(path, params, method) {
    method = method || \"post\"; // Set method to post by default, if not specified.
    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement(\"form\");
    form.setAttribute(\"method\", method);
    form.setAttribute(\"action\", path);
    for(var key in params) {
        var hiddenField = document.createElement(\"input\");
        hiddenField.setAttribute(\"type\", \"hidden\");
        hiddenField.setAttribute(\"name\", key);
        hiddenField.setAttribute(\"value\", params[key]);
        form.appendChild(hiddenField);
    }
    document.body.appendChild(form);
    form.submit();
}
  실제로 구동시킬 때 입력 예제


post_to_url('http://example.com/', {'q':'a'});