Binding PHP with Mootools when choosing

Question

How to fill in the fields of my form, if I select one of the values ​​from the drop-down menu (the drop-down menu is obtained from the database) Somehow in my javascript I need to connect to the functions, since there are different tables with form fields.

Question

Do I need to set fields using $ field name?

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(); } }); 

}

The above code was configured to go from another document to the url: field, but I would like to do this on one page.

Answer 1

for your code:

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

 (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. 

you should really look at some tutorials and examples and documentation for Request and Request.HTML / JSON / JSONP

an example similar to yours that works for jsfiddle through its echo verification service (slightly different data object that mimics the response)

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

Answer 2

instead of document.id ('ExtensionResponse') you can write $ ('ExtensionResponse') if you are only updating the contents of an element, you can use the update parameter from Request.HTML.

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

Answer 3

@medrod; This is true for $ (), but using the latest version of mootools +, making sure that Jess remains safe in the library, document.id () is a much safer option for compatibility.

you need to collect the rest of your form and fill it out as a result of an ajax request. for example: http://domain.co.nz/index.php?extension=

run your first HTML form with just a dropdown, then your ajax'd script will create and populate the rest of the form.