Tips for retrieving the ID value of the <li> element using JavaScript and AJAX

Question

Tips for retrieving the ID value of the <li> element using JavaScript and AJAX

Here is a snippet of code I've been using to send the value of an <option>:

function getXhr() {
    var xhr = null; 
    if(window.XMLHttpRequest) // Firefox et autres
        xhr = new XMLHttpRequest(); 
    else if(window.ActiveXObject){ // Internet Explorer 
        try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
    } else { // XMLHttpRequest non supporté par le navigateur 
        alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
        xhr = false; 
    } 
    return xhr;
}

function go() {
    var xhr = getXhr();
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            leselect = xhr.responseText;
            document.getElementById('modelecontainer').innerHTML = leselect;
        }
    }

    // Here we are working on how to do a post request
    xhr.open("POST","contenu_a_charger.php",true);

    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

    sel = document.getElementById('vehicule');
    idmarque = sel.options[sel.selectedIndex].value;
    xhr.send("idMarque="+idmarque);
}

Now, I'm looking to modify the sel variable in my existing code to obtain the ID value of an <li>.

This is what my <li> element looks like (generated dynamically through PHP):

<li id="7" onclick="go()">
    <span class="badge"><?php echo $FM->etat_user;?></span>
    <span class="head"><?php echo $FM->login_user;?></span>
</li>

And here is my old working select element:

<select name="vehicule" id="pays" onchange="go()">
    <option value="0">Select your test</option>
    <option value="3">test3</option>
    <option value="1">test1</option>
    <option value="2">test2</option>
</select>

How can I retrieve the ID value of the li element ("7" in this example)?

javascript ajax

Answer 1

Answer №1

Given that you are utilizing jQuery (as indicated by the tags in your question),
You can simplify all of your code to this:

$("#7").click(function() {
    $.post("contenu_a_charger.php", "idMarque=" + $(this).attr("id"), function(returnedData) {
        $("#modelecontainer").text(returnedData);
    });
});

This approach eliminates the need for dealing with XHR objects or browser compatibility issues. Everything is seamlessly integrated within the jQuery library. It also eliminates the necessity of adding event markup directly into your HTML, allowing you to remove the onclick="go()" attribute.

Additional Note: When attaching a handler to a JavaScript event via JavaScript itself, you can simply use this inside the handler to access the event.srcElement.
(For instance, utilize this.id to obtain the value of 7)
As an illustration:

document.getElementById("7").onclick = function() { alert(this.id); }

Answer 2

Given that you are utilizing jQuery (as indicated by the tags in your question),
You can simplify all of your code to this:

$("#7").click(function() {
    $.post("contenu_a_charger.php", "idMarque=" + $(this).attr("id"), function(returnedData) {
        $("#modelecontainer").text(returnedData);
    });
});

This approach eliminates the need for dealing with XHR objects or browser compatibility issues. Everything is seamlessly integrated within the jQuery library. It also eliminates the necessity of adding event markup directly into your HTML, allowing you to remove the onclick="go()" attribute.

Additional Note: When attaching a handler to a JavaScript event via JavaScript itself, you can simply use this inside the handler to access the event.srcElement.
(For instance, utilize this.id to obtain the value of 7)
As an illustration:

document.getElementById("7").onclick = function() { alert(this.id); }

Answer 3

Answer №2

Revamp the following lines:

carSel = document.getElementById('vehicle');
brandId = carSel.options[carSel.selectedIndex].value;

to be:

brandId = this.options[this.selectedIndex].value

Answer 4

Revamp the following lines:

carSel = document.getElementById('vehicle');
brandId = carSel.options[carSel.selectedIndex].value;

to be:

brandId = this.options[this.selectedIndex].value

Answer 5

Answer №3

For a simple vanilla JavaScript solution, you can use the following approach: If you modify your list element opening tag to

<li id="7" onclick="go(event)">

, then you can easily retrieve the id within the go function like this:

function go(event){
    var id = event.target.id || event.target.parentNode.id;
}

Note: Keep in mind that this method may not work if you have nested elements (unlike Anders' solution). However, assuming you always assign an ID to your list element, you could simplify it by doing the following:

<li id="7" onclick="go(7)">
  <span class="badge"><?php echo $FM->etat_user;?></span>
  <span class="head"><?php echo $FM->login_user;?></span>
</li>

Then you can access the ID as a parameter in your function:

function go(id){
    var xhr = getXhr();
    // ....
}

Answer 6

For a simple vanilla JavaScript solution, you can use the following approach: If you modify your list element opening tag to

<li id="7" onclick="go(event)">

, then you can easily retrieve the id within the go function like this:

function go(event){
    var id = event.target.id || event.target.parentNode.id;
}

Note: Keep in mind that this method may not work if you have nested elements (unlike Anders' solution). However, assuming you always assign an ID to your list element, you could simplify it by doing the following:

<li id="7" onclick="go(7)">
  <span class="badge"><?php echo $FM->etat_user;?></span>
  <span class="head"><?php echo $FM->login_user;?></span>
</li>

Then you can access the ID as a parameter in your function:

function go(id){
    var xhr = getXhr();
    // ....
}

Tips for retrieving the ID value of the <li> element using JavaScript and AJAX

Answer №1

Answer №2

Answer №3

Similar questions

Is It Best to Override Behavior in a Directive?

What is the best way to combine a JSON response object with the variable J inside a for loop?

Ways to use the v-if directive to render conditionally based on a property, even if the object may be undefined

What is the best way to add uppercase letters exclusively?

The styles of a jQuery Mobile listview aren't updating properly when the list items are emptied and then dynamically re-created

jQuery Ajax form submission encountering issues

Is it possible to convert a string of elements in JavaScript into JSON format?

Frames of Animation

Sending data back and forth across 2 tabs within one page

How should I integrate my JS authentication function in Rshiny to enable the app to utilize the outcome?

What is the best way to set a checkbox to null instead of false using Angular?

Is the mounted hook not being triggered in a Nuxt component when deploying in production (full static mode)?

Instructions on how to implement a readmore button for texts that exceed a specific character length

Moving Rows Between AgGrids

The specified anti-forgery form field named "__RequestVerificationToken" is not found

Locate the nearest date (using JavaScript)

Blend jQuery fade in

Retrieve the link's "href" attribute and its text if they match the specified text

Order of tabs, dialog, and forms customization using Jquery UI

Struggling to figure out how to make Bootstrap toast close or autohide properly