Reveal concealed fields following the selection of a specific option

I'm looking to create a bookmarklet that will automatically fill in values when clicked.

Currently, I can select values using:

document.getElementById('component').value="IAE-Data Agent";
document.getElementById('component').onchange();

However, this method does not display hidden fields. The javascript code on the page after the selection box seems to be responsible for displaying the field after manual selection:

showFieldWhen('cf_agents',
            'component', ['IAE-Data Agent']);

I've tried various ways to execute the function but haven't been able to show those fields.

Before manual selection (when the field is hidden):

<th class="field_label  bz_hidden_field" id="field_label_cf_agents">
        <label for="cf_agents">
      <a title="A custom Free Text field in this installation of Bugzilla." class="field_help_link" href="page.cgi?id=fields.html#cf_agents">Agent Class Name:</a>
    </label>
    </th>

After the field is shown:

  <th class="field_label" id="field_label_cf_agents">
        <label for="cf_agents">
      <a title="A custom Free Text field in this installation of Bugzilla." class="field_help_link" href="page.cgi?id=fields.html#cf_agents">Agent Class Name:</a>
    </label>
    </th>

The only change is in the class attribute. Even through script, I haven't been able to achieve this.

When using a Selenium script:

Select dropdown = new Select(driver.findElement(By.id("component")));
    dropdown.selectByValue("IAE-Data Agent");

I can see the hidden field getting displayed. However, running a Java application isn't practical for this task.

Are there other methods to try and show these fields? If javascript doesn't work, is it possible to execute Selenium code via bookmarklet or another approach?

Answer №1

After selecting an option from the drop-down box, the class attribute of the field changes. To display the field, I simply utilized the following code:

document.getElementById('field_label_cf_agents').className="field_value";

This code effectively updated the class name attribute, resulting in the field being shown.

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

Utilizing JavaScript to send various arrays to a .NET web service

Hey everyone, I'm currently facing an issue with posting multiple arrays to a .net web service and here is the signature of the web service. <WebMethod()> _ Public Function Lib_Processor(ByVal w_vendor As String(), _ ...

Locating items within a complex array and identifying their corresponding positions

I recently found an interesting code snippet from a different question that allowed me to identify an object. However, I am now faced with the challenge of determining the position of that object within the array. Let's take a look at the example belo ...

Error message: The beauty soup find_all method is throwing an IndexError due to an out-of-range list index

I am currently working on a personal project that involves extracting data from a football website. However, I have encountered a challenge that I am struggling to overcome. The issue arises when I include a break statement at the end of the for loop wit ...

Storing the blob received from an AJAX call into Azure Blob Storage may result in a corrupted image

When I send a PDF to my vendor's API, they return a .png file as a blob (note: see update 2 regarding the data type being returned). I want to store this in Azure Blob Storage. However, when using the code below, the uploaded file becomes corrupted. ...

New project was successfully generated, but the information is missing when transmitted from React to Django API

I recently developed a React + Django application and implemented a basic CRUD feature. Everything was working smoothly until I encountered an issue while creating a project and storing it in the Django database. When I view the project at projects/list, o ...

Printing incorrect value in $.ajax call

I came across this code that I have been working on: var marcas = { nome: '', fipeId: '' }; var marcasVet = []; var select; $.ajax({ dataType: "json", url: 'http://fipeapi.wipsites.co ...

Navigate through each row and then perform a click action

Below is the HTML table I am working with: <table> <tr> <td>Link 1</td> <td>Archieved</td> </tr> <tr> <td>Link 2</td> < ...

Converting a webpage into UTF-8 format

Can you explain the concept of encoding a webpage to me? When someone mentions that a page is encoded in UTF-8 or another format like EUC-KR, what does that signify? Does it pertain to encoding done on the server-side or client-side? Is it related to th ...

Display a single specific outcome within a React component's list

import {useState, useEffect } from 'react' import axios from 'axios' const Singlecountry = ({searchedCountries, setWeather, weather}) => { const weatherName = searchedCountries[0].capital console.log(weather) useEffect(() =&g ...

Exploring the Angular framework: Combining form requirements and controllers in directives' link functions

In my coding journey, I have developed a powerful directive known as formNavHandler. This directive plays a crucial role in handling dirty checking and smooth navigation between different pages. The functionality of formNavHandler heavily relies on the exp ...

What is the best framework for building a Java web application with graph and drag-and-drop functionality?

Looking to develop an interactive web application that involves moving nodes and connecting them with other nodes through relations (graph editing). The nodes will have different types, as will the relations between them. What framework would you recommend ...

angular-routing does not seem to redirect properly

I'm encountering an issue after logging in, as my page is not redirecting to the main page. Upon investigation, I found that the login condition works when using $window.location. However, I want to implement angular-route to restrict access to the ma ...

Tips for positioning a chat box at the bottom of a v-card's visible area

My goal is to create a chat app using Vuejs 3 and Vuetify 3, but I'm encountering an issue aligning the chatbox with the v-card component. Instead of being positioned at the bottom of the v-card, the chatbox (green) appears at the bottom of the page. ...

Choosing a value in the second dropdown menu based on the selection made in the first dropdown menu can be achieved by retrieving both values from the database using a common list

I have a scenario where I am utilizing two drop-down menus with the same data sourced from a database. When a particular item is selected in the first drop-down, it should not be available in the second drop-down. For instance, the values in the first dro ...

What is the method for extracting JavaScript code as data from a script tag?

I have a file external (let's say bar.js) function qux() {} Then in my webpage, I include it using the script tag: <script type="text/javascript" src="bar.js"></script> I am looking for a way to retrieve the JavaScript code from within ...

Extract specific elements from an array using Mongoose's $slice operator while still maintaining the

Currently, my task is to retrieve the total number of items in my News object and return a portion of those items as objects. While I have successfully implemented the $slice operator in my query, I am struggling to determine the original array size of the ...

Despite the presence of data, MongoDB is not returning any values

I am currently working on a code that utilizes $geoNear to find the closest transit stop to a given GPS coordinate. The issue I am facing is that the result sometimes returns undefined, even though I have confirmed that the data exists in the STOPS collect ...

Inconsistency in date serialization using JSON.stringify across various web browsers

I've written this snippet in an HTML file: alert(JSON.stringify(new Date())); To cater to older browsers lacking JSON.stringify(), I've included the latest json2.js (2009-09-29 version) along with jquery-1.3.2.js. In modern browsers with native ...

Is there a way to connect a Button to a different page in VUE.JS?

I currently have a button that needs to be linked to another page. This is the code I am working with at the moment. How can we write this login functionality in vue.js? It should direct users to the page "/shop/customer/login" <div class="space-x ...

Passing a null value to a SQL field using JavaScript

I am facing an issue where sending null from AngularJS/JavaScript to my C# controller does not actually set the field as null. How can I properly set a field as null from JavaScript? $scope.formData.currentTempDocument = null return $http({ method: ...