takn25 Posted April 29, 2011 Share Posted April 29, 2011 Hi, I was in need of a function getelementbyclass after searching a while I found that Yahoo has created a similar function. Ok its working fine, the problem I am facing is that I have been able to find the class with their function but I have not been able to extract a value out of it like we do with document.getElementById('').value This is their link for the function http://developer.yahoo.com/yui/dom/#getElementsByClassName (sorry I don't know if I am allowed to post links or not) Below is a button with the class 'hey' with yahoos function I am able to show that hey is a Html button but I am having trouble extracting the value which for this instance is 8 <button type='submit' class='hey' value='8' name='daba' onclick="insert();"/> </button> The reason for this function is I have multiple buttons with different values. Please any help would be appreciated If some one can guide me how I can extract the value! Quote Link to comment Share on other sites More sharing options...
gizmola Posted April 29, 2011 Share Posted April 29, 2011 The value of an html element is something you get from the DOM. It's not related to CSS properties or names. Since you have a generic function, what you want is to have that function utilize the event and determine which element the event is tied to. Inside your insert() function there should be something like this: insert(e) { var event = e || window.event; var target = event.target || event.srcElement; // now check target.value. } Try that and see how it works out. Quote Link to comment Share on other sites More sharing options...
takn25 Posted April 29, 2011 Author Share Posted April 29, 2011 Hi, Thanks for helping but tbh this is like my 3rd 4th time using javascript. I am mostly trying to create something with AJAX. I am just stuck at extracting the value it works fine with document.getelementbyId but with this function from yahoo cant do anything and cant even find a better function similar to the yahoos. Quote Link to comment Share on other sites More sharing options...
gizmola Posted April 29, 2011 Share Posted April 29, 2011 I just showed you how to get the value inside the insert function. What is it that you don't understand? Quote Link to comment Share on other sites More sharing options...
takn25 Posted April 29, 2011 Author Share Posted April 29, 2011 Ok I am sorry this might be asking a bit too much but I will post my code could you kindly tell me where am I suppose to put this as I am totally lost!. I would like to test the value with an alert() also thanks! <script type="text/javascript" src="http://yui.yahooapis.com/combo?2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> <script type='text/javascript'> function insert() { // checking browser if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); }else { xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById('message').innerHTML = xmlhttp.responseText; } } // passing data to php parameters = 'text='+ YAHOO.util.Dom.getElementsByClassName('hey').value;// getElementbyId works fine here. trying yahoos function xmlhttp.open('POST','update.inc.php','true'); xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded'); xmlhttp.send(parameters); } </script> <body> <button type='submit' class='hey' value='ya' name='daba' onclick="insert();"/> </button> <div id='message'> </div> </body> Quote Link to comment Share on other sites More sharing options...
markjoe Posted April 29, 2011 Share Posted April 29, 2011 I have not used the Yahoo framework, but if it is anything like jQuery (and not completely stupid) getElementsByClassName should be returning an array. Note is says "Elements", plural. So if you want to use that method, you will need to iterate though the array and find which element matches the button clicked. But you don't actually know what button was clicked in your function. Which brings us back to gizmola's answer: Add those lines at the top of your function (don't forget the 'e' argument) and in place of YAHOO.util.Dom.getElementsByClassName('hey').value use target.value. I'll confess, I was going to make a condescending comment and point you to the Yahoo documentation, but I then found that the Yahoo docs for YUI suck as bad as YUI does. I'd recommend learning the language and basic programming techniques first before trying to use any framework like this. But if you still want a framework, try jQuery, it really is easier than plain JS in many cases. Quote Link to comment Share on other sites More sharing options...
gizmola Posted April 29, 2011 Share Posted April 29, 2011 Here you go. Note several things--- -- first you must pass event when you associate the event handler in your onClick(). Make sure you notice that I altered what you had to do this, with the button element. -- For this to work with IE AND FF, you can't use value for a variable in a button form element due to the fact that IE sets the value of the button to be whatever is between here. So in FF, you will get the value of the value attribute, but IE basically ignores this. Name= is honored by both, so you might want to forget about value, and set name= to be the value you actually want to return. This is what I did for this demonstration. Ultimately that is not a problem of the code, but a cross browser compatibility issue. function insert(e) { var event = e || window.event; var target = event.target || event.srcElement; // checking browser if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); }else { xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById('message').innerHTML = xmlhttp.responseText; } } // passing data to php parameters = 'text='+target.name; alert(parameters); //xmlhttp.open('POST','update.inc.php','true'); //xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //xmlhttp.send(parameters); } wtf Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.