ajax same id with multiple values

Question

Hello,

i have a calendar showing the full year. on click of the button this needs to update mysql and display info using ajax and php. it impractical to have a unique id for each date how can this be done. the code is only currently display the first date???

    var dateClicked = document.getElementById('dateClicked').value;
var queryString = "?dateClicked=" + dateClicked;
ajaxRequest.open("GET", "ajaxScript.php" + queryString, true);
ajaxRequest.send(null); 

<form >
<button type="button" name="dateButton" id='dateClicked' value='2010-04-05' onclick='ajaxFunction()'>date</button>
<button type="button" name="dateButton" id='dateClicked' value='2010-05-10' onclick='ajaxFunction()'>date 2</button>
<button type="button" name="dateButton" id='dateClicked' value='2010-06-16' onclick='ajaxFunction()'>date 3</button>
</form> 
<div id='ajaxDiv'></div>

thanks Gareth

Answer 1

I don't understand the question. Is something not displaying or is some click not working?

html id attributes must be unique, though. In your example they are all 'dateClicked'. You can do something like the following with jquery

$(document).ready(function() {
    $('button[name=datebutton]').each(function() {
            $(this).click(function(e) {

            });
        });
 })

to add a click handler to all the buttons with name 'datebutton'. You can also get the value off the button element to know which button was clicked.

So you don't need to explicitly ID each button. In effect having the value explicitly ids it.

Answer 2

how about passing your element to the javascript function?

onclick='ajaxFunction(this)'

then ajaxFunction will be like this:

function ajaxFunction(el) {
   var dateClicked = el.value;
   // rest of your code...
}

Answer 3

You can't have more than one element share an id. However, you don't need to, as you can access the clicked element directly from the event object.

How about:

function ajaxFunction(event) {
   var dateClicked = event.target.value;
   var queryString = "?dateClicked=" + dateClicked;
   ajaxRequest.open("GET", "ajaxScript.php" + queryString, true);
   ajaxRequest.send(null); 
}

<form >
<button type="button" name="dateButton" value='2010-04-05' onclick='ajaxFunction()'>date</button>
<button type="button" name="dateButton" value='2010-05-10' onclick='ajaxFunction()'>date 2</button>
<button type="button" name="dateButton" value='2010-06-16' onclick='ajaxFunction()'>date 3</button>
</form> 
<div id='ajaxDiv'></div>