Question

I have returned a form with some key value pairs populated. Depending on user interaction I want to insert some of them into my HTML. I have found some answers using AJAX but could not workout how to access the key value pairs via javascript. I do not want to use jquery yet as I want understand how javascript and the DOM works first. Below is an idea of what I want to do

<script> 
  function changeanchor(urlitem) {
    document.getElementById("urlanchor").innerHTML = "";  
    while ($urls as $url) {
      if (urlitem == $url->item) {
        document.getElementById("urlanchor").innerHTML .= $url->urlanchor;
      }
    }
</script>

I know “$urls as $url” etc is PHP but I thought it was the easiest way to explain what I need to do.

I use PHP to generate the function call but I am unable to get it to display here it (pieces of code do not display)

Answer 1

Like so?

<script> 
  function changeanchor(urlitem) {
    document.getElementById("urlanchor").innerHTML = ""; 

    for (i in urls) {
      var url = urls[i];

      if (urlitem == url.item) {
        document.getElementById("urlanchor").innerHTML += url.urlanchor;
      }
    }
</script>

urls was never defined so this code won’t execute unless urls stores a bunch of url objects with those properties.

In order to create a url object that acts like the one you try to use, either use JSON to pipe it to the JavaScript or make an object:

var urls = [
  {
    'item': 100,
    'urlanchor': 'foo'
  }, {
    'item': 200,
    'urlanchor': 'bar'
  }
];