Display a <div> based on the database query for the portal field

I am new to JavaScript and have been successfully using the code below with a checkbox.

function showAddress() {
  var objectAddress = document.getElementById("objektadresse");
  var addressToShow = document.getElementById("adresseeinblenden");
  addressToShow.style.display = (objectAddress.checked) ? "" : "none";
}
<h4>
  <!-- Show Address --><input id="objektadresse" onchange="showAddress()" type="checkbox" wtx-context="BBCF87B1-40E3-47D2-8436-F8C2B75940EF" /> Capture and publish object address</h4>

<p>Please enter the object address here only if it can be published.</p>

<div id="adresseeinblenden" margin-top="2em" style="display:none">
  <table border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
    <tbody>
      <tr>
        <td>
          <h4>Street</h4>
        </td>
        <td>
          <wstag class="wsTag" id="266" type="ddbf_67" widget="text">Portal Field :: street</wstag>
        </td>
        <td>
          <h4>House Number</h4>
        </td>
        <td>
          <wstag class="wsTag" id="275" type="ddbf_70" widget="text">Portal Field :: house number</wstag>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Is there a way to replace the checkbox with the result of a database query (such as text, "yes", or "no")?

The 

<div id="adresseeinblenden"...>
should be visible if the result is "yes" and hidden if the result is "no".

The field delivering the result appears as follows:

<wstag class="wsTag" id="5853" type="ddbf_197" widget="select">Portal Field :: address display</wstag>

I don't require any onclick events, as no user action is needed to display the div.

javascriptjqueryhtmlcss

Answer №1

Utilize jquery and ajax to enhance your web functionality. Invoke your database fetch function through ajax within the 

$( document ).ready(function(){ }

Store the fetched data from the database in a variable, let's call it dbRes.

Then update your condition 

adresseeinblenden.style.display = (objektadresse.checked) ? "" : "none"; }
with 
adresseeinblenden.style.display = (dbRes == 'yes') ? "" : "none"; }

Answer №2

Once you retrieve the information from your database, modify the style of the element. One approach is to use jQuery for sending a GET request and updating the styles:

$.get("https://database-url.com", function(data, status){
    if(data.attribute == "yes"){
        $("#objektadresse").css("display", "inline");
    }
    else{
        $("#objektadresse").css("display", "none");
    }
});

Answer №3

Try using this snippet of code:

function toggleAddressVisibility(res) {
  var addressInput = document.getElementById("objektadresse");
  var addressSection = document.getElementById("adresseeinblenden");
  addressSection.style.display = (res == "yes") ? "" : "none";
}
<h4>
  <!-- Show Address --><input id="objektadresse" onchange="toggleAddressVisibility(this.checked?'yes':'no')" type="checkbox" /> Enter and publish property address</h4>

<p>Please only enter the property address here if it can be published.</p>

<div id="adresseeinblenden" style="display:none">
  <table border="0" cellpadding="1" cellspacing="1" style="width: 100%;">
    <tbody>
      <tr>
        <td>
          <h4>Street</h4>
        </td>
        <td>
          <wstag class="wsTag" id="266" type="ddbf_67" widget="text">Portal Field :: strasse</wstag>
        </td>
        <td>
          <h4>House Number</h4>
        </td>
        <td>
          <wstag class="wsTag" id="275" type="ddbf_70" widget="text">Portal Field :: hausnummer</wstag>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer №4

I am grateful to each and every one of you!

After some modifications, I am pleased to announce that my code is now working like a charm. Here is the updated and functioning code:

<div id="objektadresse" onload="adressfreigabe(dbRes)">
  <div id="adresseeinblenden" margin-top="2em" style="display:none">Table or Text (address) will be displayed if the database field contains the text "Yes" (or in German, "Ja")</div>
  <script type="text/javascript">
    $(document).ready(function(adressfreigabe) {
      var dbRes = '<wstag class="wsTag" id="5853" type="ddbf_197" widget="select">Portal Field :: provisionspflichtig</wstag>';
      var objektadresse = document.getElementById("objektadresse");
      var adresseeinblenden = document.getElementById("adresseeinblenden");
      adresseeinblenden.style.display = (dbRes == 'Ja') ? "" : "none";
    })
  </script>
</div>

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

What steps are needed to create a transport directly from the Console?

In my current setup, this is the code I have: const logger = new winston.Logger(); logger.add(winston.transports.Console, { level: environment === 'development' ? 'silly' : 'info', colorize: true, prettyPrint: true }); ...

javascriptnode.jsexpresswinston

When the JSON object is transferred to the node server, it undergoes modifications

With the following code snippet, I have managed to develop a function that generates JSON data and transmits it to server.js (my node server). function deleteEmail(i) { emailObj.splice(i, 1); var general = {}; var table = [] general.table ...

javascriptjsonnode.jsexpress

Develop a new object using NodeJS within a module for a function

I am working with a file named item.js exports.itemParam = function(name, price, url, id){ this.name = name; this.price = price; this.id = id; this.url = url; }; In my www.js file, I have imported item.js like this: var item = require('../m ...

javascriptnode.js

Error in compiled.php on line 7772: Laravel throwing a RuntimeException when sending HTTP requests from Angular

Hey there, I've been encountering an error intermittently while using Angular $http methods with a Laravel API. Can someone please explain what this error means and suggest potential solutions? I've shared the error log on CodePen for easier refe ...

javascriptangularjslaravelhttplaravel-5

Tips for looping through nested JSON data in Google Sheets

In my attempt to iterate through the nested "line_items" element in a JSON response triggered by a post event, I aim to populate a Google Sheets spreadsheet using Google Apps Script. My objective is to write the elements within each "line_item" into new ro ...

javascriptgoogle-apps-scriptgoogle-sheets

Having trouble with Angular + Rails combination: Angular can't seem to locate the controller

Issue: I am encountering an error in my Angular / Rails app. When trying to access a Rails controller function from the Angular controller, I receive the following error: Uncaught TypeError: tasks.moveOrder is not a function. Strangely, all other functions ...

javascriptruby-on-railsrubyangularjs

Can Firebase data be updated in real-time in a Vue app?

Utilizing Firebase for Authentication and integrating a database into a Vue app, my current task involves monitoring changes within a 'friends' collection specific to a user. The objective is to seamlessly display the list of friends while refle ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Transforming a grid of radio buttons into a numerical representation or percentage

I am facing an issue with calculating the total value of radio button selections in three rows. Each row belongs to a specific group, and I want the value of each selection to appear in the last column. The first radio button in each row has a value of 2, ...

jqueryhtmljscript

Changing the rotation of an object in THREE.js to match Canvas rotation

Hello amazing minds of stackoverflow. I am in the process of converting three js mesh positions to html5 canvas positions. While I have successfully converted vector3 position to canvas position, I am facing difficulties with converting mesh rotation to ca ...

javascriptcanvasthree.jshtml5-canvas

Ways to fill ng-style with a CSS object

Creating a dynamic form to manipulate CSS properties in real time has been my latest project. I've managed to define the CSS property names and values within an object, but now I'm struggling to style the item elegantly on the page as the user in ...

cssangularjs

Having trouble getting the form to submit with jQuery's submitHandler

I am in the process of converting a contact form to AJAX so that I can utilize the success function. Currently, I am encountering an issue where the code is halting at the submitHandler section due to it being undefined. Can anyone identify why my submitHa ...

javascriptphpjqueryajaxforms

There appears to be a slight issue with the tailwind dark mode not fully extending when scrolling to the bottom of the page

While using dark mode in a Next.js web app with Tailwind, you may have noticed that when scrolling, if you go past the scroll container (almost as if you're bouncing off the bottom or top of the page), the dark mode doesn't extend all the way. In ...

cssnext.jstailwind-cssdarkmode

Steps for permanently closing dismissible alerts in Bootstrap 4

On my MediaWiki site, my goal is to display a bootstrap 4 alert for new visitors on specific pages, and have it stay permanently dismissed after it is closed. The alert will be transcluded to multiple pages, but once dismissed, it should not reappear on an ...

javascriptbootstrap-4alertdismissible

Struggling with a scrolling problem in Bootstrap 4 horizontal cards?

Recently, I utilized a bootstrap card to display an image with text below it. I opted for the card class because of its solid structure and to avoid excessive CSS styling to horizontally align div lists. I envisioned creating an image gallery with a horizo ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

ReactJS creating trouble with incorporation of CSS in Table

I've noticed some strange behavior with the alignment of my table data. It seems to be all over the place. How can I fix this issue? Is there a way to specify column widths and ensure the text starts from the same position? Take a look at the table b ...

cssreactjscss-tables

Encountering a Microsoft error while trying to install jsdom with node.js

I'm currently in the process of setting up jsdom on my system. I found a helpful guide at but encountered the following issue: C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\Microsoft.Cpp.InvalidPlatform .Targets(23,7): e ...

javascriptnode.jsjsdomnode.js-domains

Ajax issues persist in Rails 4 as no updates are reflected even after submitting the request

After clicking a link_to ajax link, I am attempting to print out a URL. The code for this functionality can be found in my performer_payout_display.html.erb file. Get url to sign up to Payoneer: <br/> <%= link_to "Generate",controller:"performers ...

ruby-on-railsrubyajaxjquery

Hover background color not being applied to child elements within Button element in Firefox

Ensuring that my product is SEO-friendly, I incorporated semantic markup using the button element and schema attributes. To separate individual items, I utilized "span" elements while setting hover effects on selected items by adding display:block. This a ...

htmlcssbuttonhover

Adding the API JSON response to the MetaInfo in Vue.js

i am dealing with a meta tag that has the following structure metaInfo () { return { title: 'my title', meta: [ { name: 'description', content: 'my description' }, ...

javascriptjsonvue.jsvue-meta

Split a JavaScript string at a mathematical operator while ensuring that the operator is still included in

Hello there, I am attempting to break down a string of text into an array whenever a '+' or '-' is present. First of all, I am looking for a way to split at the plus sign and ensure it is included in the array. I have experimented with ...

javascriptregexsplit