CODEWITHSUNDEEP
phpajax
user1956040
user1956040

Reputation: 111

Passing a value to ajax with anchor.

I am trying to pass a value to a ajax function. This was simple on a form and working as expected(changed the id to gal_id1 in the example below) but I am getting undefined error on the value passing for my anchor. 

<html>
<head>
<script>
function ajax_post(){
    // Create our XMLHttpRequest object
    var hr = new XMLHttpRequest();
    // Create some variables we need to send to our PHP file
    var url = "ajax_json_gallerySQL.php";
    var gid = document.getElementById("gal_id").value;
    var vars = "gal_id="+gid;
    hr.open("POST", url, true);
    // Set content type header information for sending url encoded variables in the request
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // Access the onreadystatechange event for the XMLHttpRequest object
    hr.onreadystatechange = function() {
        if(hr.readyState == 4 && hr.status == 200) {
            var return_data = hr.responseText;
            document.getElementById("status").innerHTML = return_data;
        }
    }
    // Send the data to PHP now... and wait for response to update the status div
    hr.send(vars); // Actually execute the request
    document.getElementById("status").innerHTML = "processing...";
}
</script>
</head>

<body>
<h2>Test Pictures. </h2>

THis is working
<input id="gal_id1" name="gal_id1" type="text">  <br><br>
<input name="myBtn" type="submit" value="Submit Data" onclick="ajax_post();" > <br><br>
<div id="status"></div>
<?php 

$myValue='13';
This is not working
echo "<td> <a id='gal_id' name='gal_id' href='#' onClick='ajax_post();' value='13' ><img src='images/Parents/Brook/Brook1.jpg' alt='Image' width='270' height='203'></a><br><br>";

 ?>          


</body>
</html>

Upvotes: 1

Views: 1733

Answers (1)

rjdown
rjdown

Reputation: 9227

Anchors don't have values in the same way that inputs do, so .value won't work. What you can do instead is use document.getElementById("gal_id").getAttribute('value')

Having said that, you should probably be using data attributes, e.g.

<a data-value="13" id="gal_id">

and then

document.getElementById("gal_id").dataset.value

More information on data attributes

Upvotes: 2

Related Questions