Harnessing Drupal's auto-complete values and events to dynamically adjust form elements based on search results

Although I'm not an expert in AJAX, Drupal, or Javascript, I'll do my best to articulate my question clearly.

Currently, I am working with Drupal 7 on MySQL in a dev environment. I've created my own module called 'acid' to manage custom autocomplete functions.

I'm in the process of developing a website for a company where they can input customer satisfaction forms for all their sites. In my database, I have tables named 'acid_company' and 'acid_sites', where one company can have multiple sites.

For adding a new site, users need to first enter the company name to check if it already exists in the DB. The autocomplete function for the company name field is functioning properly. However, I want to tweak the submit button functionality on the 'add company' form to redirect the user to the site addition form instead.

The envisioned steps are as follows:

  • [user clicks 'add site'] -> [display 'add company' form] -> [validate user input in company_name autocomplete field]->
  • If company already exists -> change form submit button to 'add site' (or provide a link to 'add site form')
  • If company doesn't exist -> keep submit button unchanged -> user submits [add company and proceed to 'add site' form]

My query pertains to capturing events from the company_name element once a user has chosen a company name from the search results and adapting other components of the form accordingly.

Something like:

(user inputs company name) -> results found -> (user selects one of the results)<br />
<code>
do_disableForm()<br />
{<br />
&nbsp;&nbsp;this.form.addcompany.company_name.disable();<br />
&nbsp;&nbsp;this.form.addcompany.submit.disable();<br />
&nbsp;&nbsp;this.a.addsite.setVisable(TRUE);
}<br />
</code>

The "<a href='?q=addsite&companyid=xx'>add site</a>" link should also include the company ID in its hyperlink reference, possibly stored in a hidden form component.

Any assistance on this matter would be highly appreciated.

On a side note, I've attempted to adhere to the principles of 'the drupal way' throughout my work :)

Answer №1

The file misc/autocomplete.js contains a declaration for the JavaScript object known as Drupal.jsAC, which is utilized for autocomplete functionality. Below is the code snippet that may be of interest to you:

/**
 * Puts the currently highlighted suggestion into the autocomplete field.
 */
Drupal.jsAC.prototype.select = function (node) {
  this.input.value = $(node).data('autocompleteValue');
};

It's important to note that in JavaScript, it is possible to override almost everything, including prototypes.

To customize this functionality, simply copy the code snippet into your own custom .js file and incorporate your modifications, for example, by adding a custom code like do_disableForm.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Generate a pre-set Promise<T>[] for delivering the component in the absence of a backend at the moment

I need to implement a function that will eventually make a backend call to fetch data. However, at this moment, I just want to return dummy data to the component. How can I create a hardcoded array of Promises with type IMySetting? export function getMyS ...

What is the best way to retrieve data once an action has been completed in Redux?

After triggering specific actions to update an array of objects in my global state, I want to send a PUT request to my Firebase database. This action can involve adding, deleting, or editing objects within the array, and I need to initiate the request righ ...

Utilizing OAuth 2.0 in Server-to-Server Communication

I'm looking for an example in VB.NET for the JSON Web signature piece. The examples provided are for java and Python. To sign the UTF-8 representation of the input using SHA256withRSA with the private key from Google Developers Console, you can use ...

refreshing MySQL data without the need to reload the page

I am currently working on creating a universal "like button" that updates a MySQL table after being clicked without the need to reload the page. I believe this task can be achieved using JavaScript, although I am unsure of how to interact with MySQL usin ...

Navigating specific elements within ReactORTraversing designated components

Trying to iterate through specific elements in React to render a portion of an array for each view. The rendering of the array should start from ArrayIndexStart and end at ArrayIndexEnd. Here is the current implementation: const ObjectArray = [ {" ...

how to open a new tab using JavaScript with Selenium

My code is supposed to open a new window that goes from the login window to the main menu, module, reports, and finally the report name. The report name should be opened in the next tab. Issue: The report name is not opening in a new tab; it's openin ...

Tips for displaying an edit action icon when hovering over specific text

Looking for a way to display or hide the edit icon when hovering over specific text? Take a look at this snippet of HTML code: <ul> <li> <a id="pop" href="javascript:;;" data-content="test Desc" data-id="123"> &l ...

Leveraging Material-UI in Electron Environment

I'm currently working on an electron app using React and incorporating Material-UI for the user interface. I've added a datepicker and timepicker to a component, but when clicking on the input in the electron app, nothing happens. I'm unsure ...

Error: The method specified in $validator.methods[method] does not exist

Having trouble solving a problem, despite looking at examples and reading posts about the method. The error I'm encountering is: TypeError: $.validator.methods[method] is undefined Below that, it shows: result = $.validator.methods[method].call( t ...

Pressing the Enter key will result in data fetched from JSON being logged multiple times

I am currently implementing a search feature on my React website. When a user enters a keyword in the search input, the keyword is matched in a JSON file. If a match is found, it logs "yes" to the console; otherwise, nothing is logged. Here is an example ...

Executing a Javascript function from a C# WebBrowser: A Step-by-Step Guide

I am currently working on web automation using C# and a WebBrowser. There is a link that I need to 'click', however, since it triggers a Javascript function, it seems that the code needs to be executed rather than simply clicking the element (i.e ...

Stop zombie.js from loading exclusively third-party resources

During a test, I am using zombie.js to load a page from a local express server. However, the page contains a script element that makes a call to Google Analytics. I want to prevent this external script from loading while allowing other local scripts to run ...

Displaying Elements of a JSON Array using v-for

I am currently working with an API that stores my Data in JSON format. While I am able to successfully load and display the entire array, I am facing challenges in displaying specific fields. The array is located in a field: peoples: '&ap ...

Exploring the method of extracting link text with jQuery

Is there a way to extract link text using jQuery? Here is the link: <a href="https://www.google.com" id="id1">google site</a> I am looking to retrieve the text "google site" using jQuery. ...

How can I pass authentication details using jqGrid?

I am currently working with a service that has CORS support enabled. Typically, when making a server request, I create a request object using jQuery and include the withCredentials parameter set to true, which usually works well. However, I am facing an i ...

The local time displayed by Moment JS is not accurate and matches the time stored in the database

Is there a solution to displaying the createdAt field date based on the local timezone? I've attempted to implement it, but it only seems to work for localhost. When I upload it to the server, it displays the createdAt field data in UTC format. Below ...

optimal method for importing intricate data structures into a graphical user interface (eclipse)

I have developed an Eclipse plugin that is capable of calling a service, requiring the user to specify values for various parameters. These parameters can sometimes be quite complex in nature. I have been contemplating the most effective method for users t ...

Combining Django and Vue.js for efficient module importing

Is there a method to bring in modules for a VueJS app within a template, rendered by Django? I'm specifically looking to import the CKEditor module. This is my current setup: template.html: <div id="app"> <form> <vue ...

problem | JQuery slide causing automatic page scroll to top

Here is the HTML for my slide: <div class="slide_container"> <div class="one_slide"> <a href="#"><img alt="slide_img" class="slide_img img-responsive" src="images/slide2.jpg"></a> </div> ...

Tips for including information in a chart

I'm facing an issue with my current code as it is not functioning properly. Here is the link to the current output: http://jsfiddle.net/4GP2h/50/ ...