Is there a way to log and process div data posted using jQuery in CSS format?

I am looking to extract and log a JavaScript-calculated result from an anonymous survey created using a WordPress plugin.

The generated HTML code is:

<div ref="fieldname57_1" class="cff-summary-item">
<span class="summary-field-title cff-summary-title">Yearly costs</span>       
<span class="summary-field-value cff-summary-value">£120</span></div> 
(...)

When rendered, it looks like this:

Yearly costs: £120
Monthly costs: 10

This formatting is achieved through the use of CSS, for instance:

fbuilder .cff-summary-title:after {
    content: ': ';
}

To capture and post the text for logging using a basic jQuery post handler, I can do something like this:

var stuff = jQuery('#fieldname66_1').text();
jQuery.post( "/formpost.txt", { name: "result", value: stuff } );

However, the output ends up being

Yearly costs£120Monthly costs£10
.

If I retrieve jQuery('#fieldname66_1').html(), then I have to deal with the HTML structure.

One option could be to explore backend processing utilizing Node.js and relevant npm packages.

While I am familiar with jQuery's array functions, they still return HTML data. I could potentially utilize the .next() method to iterate through the spans and store the results in an array.

But... am I overlooking a more efficient solution?

  • When I mention "logging," it doesn't necessarily need to follow a specific line-by-line format.

  • I aim to log the entire div "as is." Unfortunately, modifying the plugin code is not an option.

  • The entire page content is dynamically rendered via JavaScript in the browser.

Appreciate your help!

Answer №1

It appears that the HTML structure could be improved, possibly using a table or definition list for better organization. Alternatively, consider creating a form with fields if you plan to send this data to a server.

If you prefer to keep it as is, you can extract the text from the spans individually and combine them with a colon manually.

Are the title/value pairs grouped together within one item? If so, how would you like these pairs to be separated when submitting them to the server?

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

Instead of only one menu icon, now there are three menu icons displayed on the screen. (Additionally, two more divs containing

When visiting on a smartphone browser, you may notice that instead of one menu icon, three icons appear. Upon inspecting the elements, you will find that there are three div's that look like this: <div class="responsive-menu-icon">&l ...

"Discover a simple method to calculate the combined value of checkboxes and seamlessly transfer it to the next page

I have utilized jQuery to perform calculations on Page1.html, where I retrieve values from input boxes using the get function and set those values in other input boxes using the set function. I am having trouble getting the total value of checkboxes when t ...

What are the steps for positioning material-ui icons to the right?

I have a list that is dynamically generated with the following code snippet: <list className = "todos-list"> {allTodos.map((todo, index)=> { return ( ...

Making jquery's one() function work effectively with duplicated classes

Take a look at the following HTML code snippet: <div class="options-selecter"> <span class="item-option" data-value="8">XYZ</span> <span class="item-option" data-value="11">LMN</span> <span class="item-option a ...

tag-swapping function

I have a specific HTML code paragraph that I am working with: <p id=tag1> html statements before click </p> My goal is to create a function that will split the paragraph into two separate paragraphs like so : <p id=tag1> html statement ...

Tips for avoiding word fragmentation in <pre> code blocks

pre { white-space: pre-wrap; /* CSS 3 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ overflo ...

The setTimeout function fails to behave as intended when used in conjunction with synchronous ajax

Within my code, I have a function that is being invoked multiple times due to iterating through an array of length n and creating 'Plants' with synchronous ajax calls. These calls involve querying the Google Maps API, so it is crucial to throttle ...

Using the swiper carousel on WordPress results in an unexpected horizontal scrolling issue

Running an Elementor website, I need to incorporate various image carousels within my post content. Initially, I created a template for each carousel using Elementor. However, I have now decided to switch to utilizing a shortcode that leverages Elementor&a ...

Troubleshooting Problem with Flexbox and Expandable/Accordion Side Menu

I currently have a wrapper class that contains an expandable side menu and main content section positioned side by side. The side menu acts as a filter for the content displayed in the main area, but I am encountering an issue where the rows separate when ...

Learn the process of obtaining a location and showcasing it on Google Maps

I am working on creating a program that utilizes modernizer to ask for the user's location and then displays it using Google Maps. So far, I have been able to use geolocation to determine the coordinates of the user's location and attempted to in ...

AJAX request receives a Flask 404 response

I'm currently facing a challenge in getting my Flask application to properly handle a straightforward AJAX request. The issue seems to be related to sending the request to the correct address. Within my app.py file, I've set up a basic route and ...

The CSS styles on my GitHub Pages website are not being reflected on the HTML page

I've been struggling for a while now to host my Portfolio CV on GitHub and I can't seem to get my CSS styles to apply correctly on the URL. - This is how I have linked it in the HTML document: <link rel="stylesheet" type="text/ ...

The issue of duplicated elements arises when Ajax is utilized within Django

Upon form submission, a Graph is generated using Plotly. Utilizing Ajax to submit the form without refreshing the page results in duplicating the form div on the screen. How can this issue be resolved? The code snippet below showcases my implementation wit ...

clearInterval function is not functioning

Could this be a simple syntax error causing my frustration? The resizeTime variable seems to persist despite multiple attempts to clear it using clearInterval. Any thoughts on what may be going wrong here? Below is the code snippet: var resizeTime; // e ...

I am experiencing difficulty getting my CSS styles to apply to my application that is being rendered using zappa, express, and node.js

Here is a link to my code: http://pastebin.com/jcLRCrQr Although everything else seems to be working fine - CSS sheets loading correctly, JavaScript files functioning properly - I am facing an issue where the styles are not being applied. An odd thing I ...

Verify if the second list item contains the "current" class

When displaying a list of blog items on the blog page, I am using grid-column: 1 / -2;. In the first row, the first blog item spans two columns while the second and subsequent rows display three items in each row. This setup works well, but when moving to ...

"During a single click event, the jQuery AJAX function is invoked a total of 6

For my project using C# MVC 5, I have implemented an AJAX call on the client side with the following code snippet: function addEventListener() { $('#createNotification').bind('click', function (e) { if($('# ...

Obtaining the Div ID After Clicking on a Link

I'm attempting to fade out a box once the X in that box is clicked. I haven't been able to make it work even after searching on Google. I managed to get it working when clicking the div itself using $(this), but my goal is for it to work when the ...

Conceal DIV containers during the loading of the page, and reveal them only upon the selection of Radio Buttons

In my user interface, I have implemented three radio buttons labeled as "Easy," "Medium," and "Hard." Each button is assigned to a distinct Javascript function that manipulates the visibility of corresponding div elements. The main purpose behind this setu ...

Fluidity of Containers on Mobile Devices

I currently have a list structured like this: https://i.sstatic.net/ei4Xt.png In order to display more details about each list item, I've added a hidden div that can be toggled open like so: https://i.sstatic.net/61k5Z.png While this works fine on ...