양식의 모든 변수를 반복하도록 javascript 코드를 수정하십시오.

Question

양식에 변수를 추가하기로 결정한 지금까지 다음 코드를 사용해 보았습니다. 어떻게이 기능을 똑똑하게 만들고 반복하고 양식의 모든 변수를 전달할 수 있습니까?

function getquerystring(strFormName) { 
    var form  = document.forms[strFormName]; 
    var word = form.clock_code.value; 
    qstr = 'clock_code=' + escape(word); // NOTE: no '?' before querystring 
    return qstr; 
} 

pastie

Answer 1

그것은 가 보이는 시도 쿼리? 그렇다면 자바 스크립트 라이브러리가 정말 좋은 곳입니다.

이들 각각은 페이지의 첫 번째 양식을 쿼리 문자열로 serialize합니다.

// ExtJS 
var str = Ext.lib.Ajax.serializeForm(Ext.select('form').elements[0]); 

// jQuery 
var str = $("form").serialize(); 

// MooTools 
var str = $$('form').toQueryString(); 

// PrototypeJS 
var str = $$('form')[0].serialize(); 

당신은 몇 가지 다른 방법을 볼 수 있습니다 그들이 http://jquery.malsup.com/form/comp/

Answer 2

들이 모두 간단한 필드입니다 가정 @ 완전한 JS 코드는 잘 작동합니다 다음 (하지만, 그것을 테스트하지 않았다 - 미안은 "컴파일"하지 않는 경우) :

를

문제만을 언급 한 텍스트 저런 :

function getquerystring(strFormName) { 
    var qstr = ''; 
    var form  = document.forms[strFormName]; 
    var elements = form.elements; 
    var first = true; 
    for (elem in elements) { 
     var word = elem.value; 
     var name = elem.name; 
     if (first) { 
     first = false; 
     } else { 
     qstr = qstr + '&'; 
     } 
     qstr = qstr + name + '=' + escape(word); 
    } 
    return qstr; 
} 

여러 요소 유형을 지원에 대한 정보 추가 lds 그래서 나는 더 쉬운 대답은 충분하다고 가정했다. 잘못된!

JQuery를 사용할 수있어서 기쁩니다. 그러나 완벽을 기하기 위해 저는 자신의 "동적 양식 처리기"를 빌드하는 방법에 대한 약간의 정보를 제공합니다.

첫째, 당신과 같이, ELEM의 클래스에 검사를 추가해야합니다 :

function isCheckbox(o){ return (o && o.constructor == Checkbox) } 

당신은 당신이보고있는 개체의 유형에 따라 조금 다른 뭔가를해야합니다. 예를 들어

:

for (var elem in elements) { 
    var value = ''; 
    var name = elem.name; 
    if (isCheckbox(elem)) { 
     value = elem.checked ? 'true' : 'false'; 
    } else if (isSingleSelect(elem)) { 
     var index = elem.selectedIndex; 
     if(selected_index > 0) { 
      value = elem.options[selected_index].value; 
     } 
    } 
    } 

당신은 다중 선택 콤보 상자처럼, 앱에 의미가 무엇인가에 값을 설정해야 할 경우가있을 수 있습니다. 각 값에 대해 이름 = 값 쌍을 하나씩 보내거나 쉼표로 구분 된 목록 등으로 굴릴 수 있습니다. 모두 앱에 따라 다릅니다. 그러나이 접근 방식으로은 자신의 특정 요구에 맞는 "동적 양식 처리기"를 확실히 만들 수 있습니다.

체크 아웃 각 양식 필드 유형을 처리하는 방법에 대한 도움이 물건이 문서는 : http://www.javascript-coder.com/javascript-form/javascript-get-form.htm

Answer 3

코드와 문제는 당신 만 clock_code 요소 값을 잡고, 나머지를 무시하고 있다는 점이다. 다음은 내가 작성한 대체품입니다.

function getquerystring(strFormName) { 
    var qstr = '', word = ''; 
    var key = 0; 
    var form  = document.forms[strFormName]; 
    var fields = ['clock_code', 'message', 'type']; 

    for (var i = 0; i<fields.length; i++) { 
     key = fields[i]; 
     word = form[key].value; 
     if (qstr && qstr.length > 0) { 
      qstr += '&'; 
     } 
     qstr += encodeURIComponent(key) + '=' + encodeURIComponent(word); 
    } 

    return qstr; 
} 

Benjamin의 접근 방식은 좀 더 유연합니다. 광산은 특히 fields 배열

Answer 4

에 이름이 해당 필드 당신은 쿼리 문자열에 양식을 직렬화하는 것처럼이

function formToQueryString(form) { 
    var elements = form.elements; 
    var cgi = []; 
    for (var i = 0, n = elements.length; i < n; ++i) { 
    var el = elements[i]; 
    if (!el.name) { continue; } 
    if (el.tagName === 'INPUT' && (el.type === 'checkbox' || el.type === 'radio') 
     && !el.checked) { 
     continue; 
    } 
    cgi.push(encodeURIComponent(el.name) + '=' + encodeURIComponent(el.value)); 
    } 
    return cgi.length ? '?' + cgi.join('&') : ''; 
}