Autofill form fields after first field is filled without reloading the page

Autofill form fields after first field is filled without reloading the page

by Olivia Bula -
Number of replies: 3

Hello. I'm creating a form using moodle forms. There are many fields in the form - course code, course name, course faculty, etc. I'm trying to figure out how to automatically fill the other fields after the user enters the course code. All the data for the fields exist in the block_mcrs_courses table. So when the user enters course code, I want to get the corresponding course name, course faculty, etc, for that course code and fill the other fields.

I've done some searching and found that AJAX is required. I'm not really sure how to use AJAX with moodle forms. Any help would be appreciated. 

Average of ratings: -
In reply to Olivia Bula

Re: Autofill form fields after first field is filled without reloading the page

by A. Obeid -
Create a JavaScript  file module.js and add an event listener to the field course code.
require(['jquery'], function($) {

/* event listener */
var codefield = document.getElementsByName("coursecode")[0];
codefield.addEventListener('change', doThing);
let coursecode = codefield.value;
if(coursecode != null){
        doThing(coursecode)
}
function doThing(coursecode){
$.ajax(
    { url:"action.php",
      type: "POST",
      data: { action: "getcoursedata", coursecode: coursecode},
      success:function(maindata){
          if(maindata !== 'undefined' ){
            maindata = JSON.parse(maindata);
            // in action.php you get all other data
            loadForm(maindata); //TODO fill all other fields         
          }
      }
 });
}
});

Average of ratings: Useful (2)
In reply to A. Obeid

Re: Autofill form fields after first field is filled without reloading the page

by Olivia Bula -

Hi. Thanks for the response. So I tried what you said but it doesn't work. I created a module.js file and put it in the same folder as my requestcourse_form.php file and requestcourse.php file. requestcourse_form.php is where the form and all the elements are defined and requestcourse.php is where I instantiated the form. 

requestcourse.php

requestcourse.php

requestcourse_form.php

requestcourse_form.php

I was a bit doubtful about the action.php file. Am I correct in changing the url in module.js file to requestcourse_form.php instead of action.php? I wasn't really sure what to add in action.php

Also, in requestcourse_form.php I added this line at the top:

$PAGE->requires->js('/blocks/usp_mcrs/module.js');

Am I on the right track or is it completely wrong? Sorry if this is something very simple but I'm just really confused. 

The results I am getting with the current code is when I select the course code from the form, the page freezes for about 2 to 3 minutes then the selected course code shows.

Average of ratings: -
In reply to Olivia Bula

Re: Autofill form fields after first field is filled without reloading the page

by A. Obeid -
Hi,

$PAGE->requires->js('/blocks/usp_mcrs/module.js'); this line must be in the file where the $mform->display(); is called.
The action.php (Or your form->display()) is executed after the user enter his text in the code-field. The form-page will be reload.
In your requestcourse_form.php should
$coursecode = optional_param('coursecode', null, PARAM_TEXT);
If $coursecode is not null, get course information and return the form with the Information.

Average of ratings: -