Obtaining the value of an item in an unordered list

Hi everyone, I have been trying to extract the value of <li> elements that display images horizontally. Below is the HTML code I am working with:

<div id="layoutInnerOptions">
<ul id="navigationItemsContainer" class="layouts_list">
<li class="layout_container" rel="0" value="temp1">
<img src="resources/Images/layout_bottom2.png" alt="bottom" rel="0" />
</li>
<li class="layout_container" rel="1" value="temp4">
<img src="resources/Images/layout_top2.png" alt="top" rel="1" />
</li>
<li class="layout_container" rel="2" value="temp3">
<img src="resources/Images/layout_menu2.png" alt="menu" rel="2" />
<li class="layout_container" rel="3" value="temp2">
<img src="resources/Images/layout_buttons2.png" alt="buttons" rel="3" />
</li>
</ul>
</div>

I have attempted to use jQuery to retrieve the values like temp1, temp2, etc. from the <li> elements but have encountered difficulties with the following code snippet:

if (confirm('Are you sure you want to save this thing into the database?')==true) {
   var Apptxt = $("#AppNametxt").val();
   var Appdesc=$("#txtdesc").val();
   var Applayout=$("#navigationItemsContainer").val();
   $.post("http://www.domain_name.com/data.php",{Starts:'appcontent', Appdesc:Appdesc, Apptxt:Apptxt, Applayout:Applayout},        
      function(data) {
    $('#message').html("Content Saved");
  });
}

I would greatly appreciate any assistance in resolving this issue. Thank you all for your help.

javascriptjqueryhtmlcss

Answer №1

Kindly update value=... to data-value=.... and utilize code similar to the example provided below:

var LayoutApp = $("#navigationItemsContainer").find('li').map(function() { return $(this).data('value'); }).get().join(',');

VIEW DEMO

MODIFY

The user's requirements have been adjusted to include a trigger - a click event on the li item - which results in the following code:

$(function() {
   $("#navigationItemsContainer").children( 'li' ).on( 'click', function() {
      if (confirm('Are you sure you want to save this data into the database?')) {
         var AppText = .....;
         var AppDescription = ......;
         var LayoutApp = $( this ).data( 'value' );
         $.post("http://www.domain_name.com/data.php",{Starts:'appcontent', Appdesc:AppDescription, Apptxt:AppText, Applayout:LayoutApp}, function(data) {
            $('#message').html("Data Saved");
         });
      }
   });
});

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

How can I position a Button at the center of my Grid item using Material UI?

In my React 16.13.0 application, I am utilizing Material UI's Grid and trying to center the content of a button in the middle of a row. Here is what I have tried: center: { alignItems: "center", width: "100%", }, halfRow: { width: "5 ...

cssreactjsmaterial-uialignmentcenter

Passing arguments from the command line to an npm script

The scripts section in my package.json is currently set up as follows: "scripts": { "start": "node ./script.js server" } This allows me to use npm start command to initiate the server. All working well so far. However, I ...

javascriptnode.jsnpm

Searching for values in nested arrays using lodash.find

Presented below is an array where I aim to employ lodash for item search: [ { "itemA": "apple", "itemB": [ { "itemC": "1", "itemD": "red apple" }, { "itemC": "2", "itemD": "green apple" }, ...

javascriptarraysnode.jslodash

determining the dimensions of an SVG element following skew transformation using JavaScript

I have an SVG element called rect that has the following attributes: <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" /> After applying a transformation of skewX(10), the dimensions of the rectangle are altered. How c ...

javascriptsvg

Transform the appearance of buttons within AppBar using Material UI React

Embarking on a new project using React and Node JS has led me into the battle with Material UI. My current challenge is customizing the style of AppBar items, particularly the Buttons. Here's what I have in my "Menu" component: const Menu = () => ...

javascriptreactjsmaterial-ui

How can I locate the quantity of items within an embedded document in MongoDB?

Examining my schema, it appears like this: name: value: p_vars: { name1: {}, name2: {}, } My goal is to determine the number of items in p_vars. Assuming the interpreter is JavaScript, I attempted the following: db.collection.findOne().p_vars.l ...

javascriptmongodb

Cross-building targets for Node modules for deployment on npm platform

I'm working on an ES6 module that needs to be compatible with different environments. I'm not sure whether to use webpack or rollup for building, and how to target specific environments. Building for Different Environments ES6 environments like ...

javascriptnode.jsnpmwebpacknode-modules

Having trouble making an Ajax request in Rails3

I am currently in the process of refactoring my project by incorporating AJAX functionality. I have a link that triggers an action in a controller: = link_to("Please work", "show_recent_chart", :remote => true) This links to a specific controller acti ...

jqueryruby-on-railsajaxujs

What is preventing me from displaying my paragraph?

I have some content that I want to show a paragraph with the class paragraphtoggle when clicked, but it's not working as expected. Here is what I have tried: https://example.com/jsfiddle HTML <div class="enzimskiprogramindex herbaprogramindex he ...

javascriptjqueryhtmlcss

How can I make SocketIO work with Nodejs and PHP?

I have recently developed a chat application that is designed to display received messages in real-time, without the need for manual refreshing. Currently, I am utilizing xampp and running it on port 80 for this project. Below is the code snippet include ...

javascriptphpnode.jsexpressxampp

Changing the appearance of a shadow root element using CSS styling

My CustomField has a FormLayout inside, and I want to change the #layout element within the shadow-root. While it can be done with JavaScript: document.querySelector("#myid > vaadin-form-layout") .shadowRoot .querySelector("#layout" ...

cssvaadinvaadin-flow

What could be causing this Vue.js component to show the body of a function instead of its intended output?

I'm currently developing a small Todo App using Vue 3 for the front-end and Slim 3 for the back-end (API). Within App.vue, you'll find: <template> <div id="app"> <Header title="My todo list" :un ...

javascriptvue.js

Ensure the initial value in the dropdown menu is automatically set to the first value in VueJs

How can I set the first value of my time object as the default value for my dropdown in Vue? I want the first value to be pre-selected when a user enters the website, but currently only display the value without actually selecting it. time Object:- { &quo ...

javascriptvue.jsbootstrap-4vuejs2dropdown

What is the best way to initiate a class constructor with certain parameters left out?

Currently, I am facing a challenge while trying to pass various combinations of arguments to a class constructor. The constructor has 2 optional arguments. Here is the code snippet: class MyClass { foo(a, b) { return new MyClass(a, b); } bar( ...

javascripttypescriptclass

Relocating JavaScript scripts to an external file on a webpage served by Node.js' Express

When using Express, I have a route that returns an HTML page like so: app.get('/', function(req, res){ return res.sendFile(path.resolve(__dirname + '/views/index.html')); }); This index.html file contains multiple scripts within t ...

javascriptnode.jsexpress

Directives causing disruption to one another

Two directives are at the same level in my code: function signUpForm(djangoAuth, Validate){ return{ restrict:'A', controller:["$rootScope","$scope",function($rootScope, $scope){ $scope.submitFunction = function(formData){ ...

javascriptangularjs

Using Jquery to retrieve the window size and dynamically apply it to a div's CSS, adjusting it accordingly when the

Hey there! I'm trying to create a full-screen div, but unfortunately CSS doesn't seem to do the trick in this case. JavaScript/jQuery is my only option. My plan is to dynamically set the size of the div based on the browser window's dimensi ...

javascriptjquery

Once AJAX has successfully retrieved the data

I am exploring the option of using jQuery ajax to fetch data from a database and display it asynchronously. However, I am faced with the challenge of achieving this without refreshing the entire page each time. For instance, the PHP file called during an ...

phpjquerymysqlajax

Is it feasible to place an ordered list within a table row <tr>?

Below is a code snippet demonstrating how to create an ordered list using JavaScript: Here is the JavaScript code: <script type="text/javascript"> $(document).ready(function() { $("ul").each(function() { $(this).find("li").each(functio ...

javascriptjqueryhtml

Adjusting the brightness of colors using JavaScript

I am looking for a way to return different color tones for a specific color using JavaScript. For example, if I have the color code #4a4a4a, I want to be able to return #494949 and #666464. If there is a package or method that can achieve this, please sugg ...

javascriptnode.js