No announcement yet.

New entry in text auto complete

  • Filter
  • Time
  • Show
Clear All
new posts

  • #16
    @Alan F

    The onLoad and onSubmit events you have to use are JavaScript events of the form object


    • #17
      Originally posted by Einstien View Post
      SOLVED: Autocomplete requires extra javascript to accept new entries

      You have two options to solve this:

      The easiest is to use the "Capture" option in the fields settings for your autocomplete field. This feature will place a search icon next to the field that the user will need to click in order to initiate the search. However, if the user just types in the field without invoking the search, this value will be saved in the database even if it is a new value.

      My users will never click the search icon, so I decided to use the more complicated option that requires javascript.

      For autocomplete fields, Scriptcase actually uses two fields internally - one field for the user to type in and another to store the value that goes into the database. Scriptcase does not push the value of the field that is typed in into the field that stores in the database unless an autocomplete option is selected. We can push that value over by adding extra javascript.

      You will need to define two javascript events in Scriptcase's javascript section, one to execute on form load and one to execute on submit.

      Here are the two generic functions (you will need to substitute your field names for this to work -- see below):


      //the autocomplete does not by default allow new values, therefore we need to capture the value as it is typed and re-assign it before submitting the form. There are two fields at play. The field where the input occurs and the field that gets saved to the database
      save_actual_value = ""; //initialize holding variable
      //on form load, the autocomplete will blank the input field, if we are returning to the form from a validation failure, we will now repopulate the input filed with the current value
      document.getElementById("id_ac_XXXXX").value = document.getElementById("id_sc_field_XXXXX").value;
      //only define the events if they are not already defined - this prevents javascript from locking up
      if (typeof document.getElementById("id_ac_XXXXX").onkeyup !== "function")
      {//define event to capture the input field on each keypress
      document.getElementById("id_ac_XXXXX").onkeyup=function(){save_actual_value = document.getElementById("id_ac_XXXXX").value};
      if (typeof document.getElementById("id_ac_XXXXX").onblur !== "function")
      {//define onblur event to capture the input field when the value has changed by selecting from the autocomplete dropdown list
      document.getElementById("id_ac_XXXXX").onblur=function(){save_actual_value = document.getElementById("id_ac_XXXXX").value};


      if (save_actual_value != "")
      {//only execute if meaningful to do so - this prevents the save button from becoming unresponsive
      //assign the input that was captured from the input field to the field that will be saved to the database
      document.getElementById("id_sc_field_XXXXX").value = save_actual_value;
      To use the above code, you will first need to paste those code fragments into a text editor to do a search and replace based on the field id names.
      In order to discover the field id names that sciptcase uses internally, run the form in a browser, right click inside the autocomplete field and select "inspect element"
      The field id name will show as id="ScriptcaseInternalFieldNameHere"

      There are two possibilities for the internal field names:
      1. If the field name ends in the same name as your field, then replace all occurrences of XXXXX with your the name of your Scriptcase field
      2. If the field name ends in a number, then you will need to do two replace functions:
        • replace all id_sc_field_XXXXX with id_sc_field_sc_field_AddTheNumberHere
        • replace all id_ac_XXXXX with id_ac_sc_field_AddTheNumberHere

      Usually, you will get the second case if your field name contains a space character.

      This solution works in Scriptcase 6 - I cannot vouch for other versions.

      Also, please note that manipulating and referencing the Scriptcase fields directly strays outside the Scriptcase framework and offers no guarantee that the code will continue to work after upgrading to an new version of Scriptcase or migrating an application, etc. In other words, use at your own risk.


      Does works in editable grid view form?

      I don't know what to put to replace the XXXXX since all the fields IDs are incremented.
      Like id_sc_field_XXXXX_1, id_sc_field_XXXXX_2, etc.