select에서 Mootools에 PHP를 연결

Question

드롭 다운 메뉴에서 값 중 하나를 선택하면 폼의 상자를 어떻게 채울 수 있습니까 (드롭 다운은 DB에서 가져온 것입니다) 어떻게 든 자바 스크립트에서 함수로 연결해야합니다. 양식 필드와 관련된 다른 테이블이 있습니다. 질문

내가 $ 필드 이름을 사용하여 필드를 설정해야합니까?

if(document.id('LoadExtension') && document.id('ExtensionResponse')) { // id of select box 
var sel = document.id('LoadExtension'); // ser select box as var. 
sel.addEvent('change', function(chg) { // add change event to select box. 
    if(sel.getSelected().get('value') != '') { // on change if selected value is not empty. 
     new Request.HTML({ 
      url : 'http://domain.co.nz/index.php?extension='+ sel.getSelected().get('value'), 
      onRequest: function() { 

      }, 
      onComplete: function(r1, r2, html, js) { 
       document.id('ExtensionResponse').set('html', html); 
      } 
     }).send(); 
    } 
}); 

}

위의 코드는 URL에 다른 문서에서 얻을하도록 설정되었습니다 상자를하지만 한 페이지에서 할 싶습니다.

Answer 1

에코 테스팅 서비스 (응답을 시뮬레이트하는 약간 다른 데이터 객체)를 통해 jsfiddle에서 작동하는 사용자에게

http://www.jsfiddle.net/dimitar/TXHYg/3/

Answer 2

대신 document.id ('ExtensionResponse')를 사용하면 $ ('ExtensionResponse') 을 작성할 수 있습니다. 요소의 내용 만 업데이트하면 Request.HTML의 업데이트 매개 변수를 사용할 수 있습니다.

new Request.HTML({ 
     url : 'http://domain.co.nz/index.php', 
     data: 'extension='+ sel.getSelected().get('value'), 
     update: $('ExtensionResponse') 

}).send(); 

Answer 3

@medrod; 그건 $()에 관한 것이지만 최신 버전의 mootools를 사용하고 Jess가 라이브러리 안전을 유지하도록하기 위해 document.id()는 호환성을위한 훨씬 안전한 옵션입니다.

ajax 요청의 결과로 나머지 양식을 빌드하고 채울 필요가 있습니다. 예 : http://domain.co.nz/index.php?extension=

첫 번째 HTML 양식을 드롭 다운 만 시작하면 아약스 스크립트는 나머지 양식을 작성하여 채 웁니다.

http://www.jsfiddle.net/dimitar/TXHYg/4/ 당신이 정말로 몇 가지 튜토리얼과 예제 및 요청 및 Request.HTML/JSON/JSONP

예에 대한 문서를 보라

(function() { 
    // anon closure for scope purposes of local vars. 

    // cache selectors used repeatedly into local vars. 
    var sel = document.id('LoadExtension'), resp = document.id('ExtensionResponse'); 

    // if they are in the dom... 
    if (sel && resp) { 
     // ... then attach event listener. 
     sel.addEvent('change', function(event) { 
      // this == sel. 
      var value = this.get("value"); // cache getter. 

      if (value === '') { 
       return false; // do nothing if not selected/ 
      } 

      // otherwise, it will run the request 
      new Request.HTML({ 
       method: "get", // or post. 
       data: { 
        extension: value // etc etc, can add more object properties and values 
       }, 
       url: 'http://domain.co.nz/index.php', 
       onComplete: function(r1, r2, html, js) { 
        resp.set('html', html); 
       } 
      }).send(); 
     }); 
    } // end if 
})(); // end closure. 

, 유사한 코드에 대한