CODEWITHSUNDEEP
javascriptajax
logobi
logobi

Reputation: 63

How to get the Id value of <li> element js/ajax

My working code to send value the of <option> is

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;
        }
    }

    // Ici on va voir comment faire du post
    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);
}

I'm just trying to change the sel var of my previous code to have the Id value of <li>.

My <li> (from php loop)

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

My old working select

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

How do I get the Id of the li element ("7" in this example)?

Upvotes: 0

Views: 872

Answers (3)

castletheperson
castletheperson

Reputation: 33466

Since you are using jQuery (according to your question tags),
All of your code can be simplified into just:

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

That way you don't have to worry about any XHR objects or browser compatibility. It's all already part of the library. It also removes the need for you to put any event markup in your HTML, so you can remove the onclick="go()".

P.S. When you assign a handler to a JavaScript event from the JavaScript, you can always just use this inside the handler in order to access the event.srcElement.
(ie use this.id to get the value of 7)
For example: document.getElementById("7").onclick = function() { alert(this.id); }

Upvotes: 1

Jan Wendland
Jan Wendland

Reputation: 1420

If you need a plain JavaScript solution, you could go with this: Given that you change your list element opening tag to this <li id="7" onclick="go(event)">, you can simply access the id in the go function like so:

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

Edit: Obviously this wouldn't work anymore if you nest further elements (as opposed to Anders solution). Assuming that you set the ID of your list element anyway, why don't you just do this:

<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>

And then you can access the ID as parameter of your function:

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

Upvotes: 0

Arno
Arno

Reputation: 161

Change these lines:

sel = document.getElementById('vehicule');
idmarque = sel.options[sel.selectedIndex].value;

into:

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

Upvotes: 0

Related Questions