Retrieve the data-value from the unordered list using jQuery on a list item

Having trouble grabbing the UL assigned data-value of a particular list item? Let me provide you with the code. I want to fetch the top UL data value along with the LI value. Although I have set up jQuery to grab the LI value, I am struggling to retrieve the UL value simultaneously. Due to my lack of knowledge about jQuery syntax, I find it difficult to do it correctly...

Thank you in advance.

<form class="searchwrapper" id='searchformmain' action="linkdsearchpagination.php" method="POST" enctype="multipart/form-data">
    <input type="text" id="searchfor" name="searchfor" placeholder="What Are you Looking for?" class="textsearchmain">
    <button name="submitted" type="submitmain" action="submit" target='linkdsearchpagination.php' class="searchbuttonmain">Search</button> 
</form>

<div id="ggg" class="col">
    <h4 class="ban">Temp jobs</h4>
    <div class="cats">
        <ul id="tempjobs" data-value='temp jobs' class="left">
            <li><strong>Creative</strong></li>
            <li><a href="" data-value="tv film video">tv / film / video</a></li>
            <li><a href="" data-value="crew">crew</a></li>
            <li><a href="" data-value="talent">talent</a></li>
            <li><a href="" data-value="event">event</a></li>
            <li><a href="" data-value="labour">labour</a></li>
                <br>
                    <li><strong>Computer</strong></li>
            <li><a href="" data-value="internet engineers">internet engineers</a></li>
            <li><a href="" data-value="web info design">web/info design</a></li>
            <li><a href="" data-value="writing editing">writing / editing</a></li>
            <li><a href="" data-value="admin office">admin / office</a></li>
            <li><a href="" data-value="art media design">art / media / design</a></li>
                <br>
                    <li><a href="" data-value="security"><strong>Security</strong></li>
            <li><a href="" data-value="business">business</a></li>
            <li><a href="" data-value="public">public</a><li>
            <li><a href="" data-value="domestic">domestic</a></li>
            <li><a href="" data-value="personal">personal</a></li>
            <li><a href="" data-value="transport">transport</a></li>
                <br>
                    <li><strong>Skilled trade / craft</strong></li>
            <li><a href="" data-value="education">education</a></li>
            <li><a href="" data-value="architech egineering">arch / engineering</a></li>
            <li><a href="" data-value="legal paralaegal">legal / paralegal</a></li>
            <li><a href="" data-value="business management">business / mgmt</a></li>
            <li><a href="" data-value="accounting finance">accounting+finance</a></li>
            <li><a href="" data-value="customer service">customer services</a></li>
        </ul>
    </div>
</div>

</div> <!----central column-------->

</div><!------WRAP-------->

</body>
</html>

<!---get list value and post to form--->
<script>
$("#jobs a,#tempjobs a,#community a,#dating a,#services a,#housing a,#forsale a").on("click", function(e) {
    e.preventDefault();
    $("#searchfor").val($(this).data('value'));
    var data2 = $(this ul).data('value');
    $("#catagorymain").val($(this).data2('value')); // IV GOT ISSUE WITH THIS
    //$("#searchformmain").submit(); 
});
</script>

Answer №1

<form class="searchwrapper" id='searchformmain' action="linkdsearchpagination.php" method="POST" enctype="multipart/form-data"  >

<input type="text" id="searchfor" name="searchfor" placeholder="What Are you Looking for?" class="textsearchmain" >


<button name="submitted" type="submitmain" action="submit" target='linkdsearchpagination.php' class="searchbuttonmain" >Search</button> 

</form>



    <div id="ggg" class="col">
        <h4 class="ban">Temp jobs</h4>
        <div class="cats">

            <ul id="tempjobs" data-loc-subject='temp jobs' class="left">


                    <li data-loc-subject='temp jobs'><strong>Creative</strong></li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="tv film video">tv / film / video</a></li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="crew">crew</a></li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="talent">talent</a></li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="event">event</a></li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="labour">labour</a></li>

                <br>

                    <li data-loc-subject='temp jobs'><strong>Computer</strong></li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="internet engineers">internet engineers</a></li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="web info design">web/info design</a></li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="writing editing">writing / editing</a></li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="admin office">admin / office</a></li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="art media design">art / media / design</a></li>

                <br>

                    <li data-loc-subject='temp jobs'><a href="" data-value="security"><strong>Security</strong></li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="business">business</a></li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="public">public</a><li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="domestic">domestic</a></li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="personal">personal</a></li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="transport">transport</a></li>

                <br>

                    <li data-loc-subject='temp jobs'><strong>Skilled trade / craft</strong></li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="education">education</a></li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="architech egineering">arch / engineering</a></li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="legal paralaegal">legal / paralegal</a></li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="business management">business / mgmt</a></li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="accounting finance">accounting+finance</a></li>
                    <li data-loc-subject='temp jobs'><a href="" data-value="customer service">customer services</a></li>

            </ul>

        </div>
        </div>

</div> <!-----jobs--->

</div> <!----central column-------->

</div><!------WRAP-------->

</body>

</html>

<!---get list value and post to form--->
<script>
$("#jobs a,#tempjobs a,#community a,#dating a,#services a,#housing a,#forsale a").on("click", 
function(e) {e.preventDefault(); //prevent auto submitting the form

             $("#searchfor").val($(this).data('value'));   //get # id=searchfor input .value to this.data.value

             $("#catagorymain").val($(this).data('loc-subject')); //get # id=catagorymain .value to = this.data.value

            });
</script>

Added a data-loc-subject attribute to each LI element and utilized jQuery to retrieve it by changing ".data('value')" to ".data('loc-subject')". This modification functions correctly.

Everything is working fine.

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

Click on every link to reveal a hidden div

When I click on and select the first link in the mainPart, I want to automatically select the first subLink div in the secondPart while hiding the other subLink classes. This sequence should be maintained: when the second link is selected, the second sub ...

What is the method for sending data through $_POST using a plain text HTML link (otherwise known as an href URL)?

I'm in the process of designing a basic webpage where a user lands on it, enters their username and password, and after clicking a button (which I'd prefer to turn into a clickable URL text, but I'm having trouble figuring out how to do that ...

Generating a partially translucent image overlay

I am currently working on a one-page WordPress theme. Each section of the page includes a header with an image and an overlay. The header consists of a background image, with a wrap-width image inside. Below that, there is a semi-transparent png image tha ...

Display two images consecutively within a single img tag

My goal is to display two images using a single <img /> tag. The first small image will be loaded and shown using the src attribute, while the second large image will be contained within the data-src attribute. Only one image will be displayed at a t ...

Is there a way to disable certain CSS features in Chrome, like CSS grid, for testing purposes?

I'm exploring alternative layouts for my app in case CSS grid is not supported. Is there a way to disable features like CSS grid in Chrome or Canary? ...

Modifying element size using jQuery causes issues with maintaining a 100% height

I am facing an issue with a sidebar that is styled using the following css properties: background:#164272; position:absolute; left:0px; top:70px; width:250px; height:100%; When I use jQuery to display a table that is initially hidden and on ...

When the width of a tr tag is reduced, an <select> and <span> tag will split into two lines

I am working on creating a table that includes a field for each row along with a symbol to indicate mandatory fields. As the screen width decreases, I want the content to break into a new line at a specific point. Desired behavior: The field width should ...

The right-aligned navigation bar elegantly shifts downward when it exceeds the screen width

I've been struggling to create a Right Aligned Navigation Bar with a search bar and a login icon that stay in one row on the page. No matter how I try, it keeps jumping down instead of aligning properly. Here is an image of what I'm trying to ach ...

The Bootstrap justify-content-around is causing the last item to be out of

My current prototype Website has this layout, utilizing justify-content-around: https://i.sstatic.net/WUJdl.jpg I am seeking a solution for when there is an odd number of cards, ensuring that the final card aligns with the rest. Is there a way to achieve ...

Accessing JSON information using jQuery in an ASP.NET C# WebService

I am currently in the process of developing a basic script that interacts with JSON data using jquery $.post(). Here is the code I have implemented so far: DateWebService.asmx using System; using System.Collections; using System.ComponentModel; using Sy ...

Boosting your website with a slick Bootstrap 4 responsive menu that easily accommodates additional

I have incorporated a main menu in my website using the Bootstrap 4 navbar. However, I also have an additional div (.social-navbar) containing some extra menu items that I want to RELOCATE and INSERT into the Bootstrap menu only on mobile devices. Essentia ...

How can we minimize the data contained in JSON HTML markup?

https://i.stack.imgur.com/mzuB0.png Currently, I am attempting to find a way to conceal the last 12 digits in the price shown on a button, as it is excessively long. The method I am utilizing involves a JSON api and insertAdjacentHTML markup. This snipp ...

Is there a way to create a JavaScript-driven search filter that updates automatically?

My website showcases a lineup of League of Legends champion icons, with one example shown below: <div class = "champion"> <p>Aatrox <img class = "face_left" src = "images/small/Aatrox.png"> <div class = "name" onmouseover="if(cha ...

Customize Joomla content in a component by using CSS within a template that I personally designed

Is there a way to customize the text content of a component in Joomla by editing the body text? The CSS properties for #content are adjusting padding, margin, border, width, height, and background but not affecting font attributes... Inside index.php < ...

Maintaining Aspect Ratio and Adding Letterboxes with Next.js Image

In my Next.js app, there is a section dedicated to displaying selected photos from a gallery. It's crucial for this area to maintain a fixed size of 566px*425px as users navigate through images or when a photo is loading. While the layout is responsiv ...

Centering spans and divs is proving to be a challenge, as well as getting the margin-top and margin-bottom properties to function properly

I encounter this issue frequently, where my usual methods for centering objects do not seem to work. I am in search of a universal way to accomplish this task: <div> <span>content</span> <span> content</span> < ...

How to Display JavaScript Error Messages Beside an HTML/JSP Input Field with CSS

Hey there! I've got a simple CRUD input form with Javascript validation. When an error occurs, the error message pops up below the input field in red text. I've tried various methods like floats and adjusting margins, but nothing seems to work. ...

What is the correct way to load a column of images without affecting the readability of the text alongside them? (see image below)

https://i.stack.imgur.com/rBL50.png Whenever my page loads, there is a card with a vertical list of images. Due to the loading time of the images, the text appears first and gets squished as shown in the provided screenshot. Is there a way for the text to ...

What is the reason for the presence of "CTYPE" in my HTML upon refreshing the page?

As I am utilizing Harp and Bootstrap for my project, I am encountering a peculiar issue. Upon refreshing the page, I notice that the text ""CTYPE html>"" is inserted within the body tags. Can anyone shed light on why this is happening? ...

When viewing HTML "Div" on smaller screens, the full height may not be displayed properly

My setup includes two monitors: one is 24" and the other is my laptop's 12.5" screen. I have a red box (div) in my web application that displays full height on the larger monitor, but only partially on the smaller one. I'm puzzled as to why it s ...