Member Avatar for maggoteer

I'm currently trying to modify 2 scripts to work together. I've gotten everything working except the script isn't passing any, or the incorrect information when it's trying to create a checkbox. Here's the code I have so far:

if (strlen($q)>0)
{
$hint="";
for($i=0; $i<($x->length); $i++)
  {
  $f=$x->item($i)->getElementsByTagName('id');
  $g=$x->item($i)->getElementsByTagName('item');
  $h=$x->item($i)->getElementsByTagName('price');
  $y=$x->item($i)->getElementsByTagName('keyword');
  if ($y->item(0)->nodeType==1)
    {
    //find a link matching the search text
    if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
      {
      if ($hint=="")
        {
        $iteration = 0;
        $hint="<a id='item' href='javascript:void(0)' onClick='add()'>" . 
        $g->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
      else
        {
        $iteration++;
        $hint=$hint . "<br /><a id='item' href='javascript:void(0)' onClick='add()'>" . 
        $g->item(0)->childNodes->item(0)->nodeValue . "</a>";
        }
      }
    }
  }
}

The code "$g->item(0)->childNodes->item(0)->nodeValue" is the name of whatever item is being pulled at the current time.

Here's the javascript function for creating the checkboxes:

<script>
var i=0;
function add(){  
if (document.getElementById('item').value!='') 
    {     
        i++;  
        var title = document.getElementById('item').value;
        var node = document.createElement('div');        
        node.innerHTML = '<input type="checkbox" id="check' + i + '" name="check' + i + '"><label for="check' + i + '">' + title + '</label>';       
        document.getElementById('container').appendChild(node); 
        }   
}
</script>

And the script is being used in this fasion:

<form>
    <input type="text" size="30" onkeyup="showResult(this.value)">
    <div id="livesearch"></div>
    </form>

If I'm not making the code clear, please comment on what needs to be clarified. Any help is appreciated!

  • 4 Contributors
  • 3 Replies
  • 295 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by Member #46692

Dani AI

Generated

Quick diagnosis and a clean, safe fix.

The live-search entries must not reuse the same id or rely on an anchor’s non-existent form value. was right to suggest passing the clicked item instead of using getElementById. A more robust pattern is to render each suggestion with a class and data-* attributes, attach one click listener to the results container (event delegation), then build the checkbox + label with DOM methods rather than innerHTML. That avoids collisions, XSS risk, and the “first element only” problem.

Example (vanilla JS — event delegation + safe DOM creation):

let counter = 0;
document.getElementById('livesearch').addEventListener('click', function (ev) {
  const item = ev.target.closest('.search-result');
  if (!item) return;
  const title = item.dataset.title || item.textContent.trim();
  const container = document.getElementById('container');
  if (!container) return;

  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.id = 'check_' + (++counter);
  checkbox.name = 'check_' + counter;
  checkbox.value = item.dataset.id || title;

  const label = document.createElement('label');
  label.htmlFor = checkbox.id;
  label.appendChild(document.createTextNode(title));

  const row = document.createElement('div');
  row.appendChild(checkbox);
  row.appendChild(label);
  container.appendChild(row);
});

Server-side output should set safe attributes (escape values) instead of inline onclicks. Example PHP fragment:

$label = htmlspecialchars($g->item(0)->childNodes->item(0)->nodeValue, ENT_QUOTES);
echo "<div class='search-result' data-id='{$id}' data-title='{$label}'>{$label}</div>";

Troubleshooting notes: confirm livesearch and container exist before binding, use textContent/dataset to read values, avoid duplicate ids, and prefer wrapping input inside a <label> or using matching for attributes for accessibility. jQuery (as and mentioned) can simplify DOM ops, but modern vanilla JS covers this cleanly and safely.

Recommended Answers

All 3 Replies

Member Avatar for paulkd

Can you describe, without code, how you expect your form to work?

Is using jQuery out of the question?

Member Avatar for AleMonteiro

You can't use the same id item for all the objects. The method getElementById always returned only the first object with that Id.
The <a> object doesn't have an value property. To get the text you need .innerText;

Try those changes:

$hint=$hint . "<br /><a id='item' href='javascript:void(0)' onClick='add(this)'>" . 
        $g->item(0)->childNodes->item(0)->nodeValue . "</a>";

And

var i=0;
function add(objA){    
        i++;  
        var title = objA.innerText;
        var node = document.createElement('div');        
        node.innerHTML = '<input type="checkbox" id="check' + i + '" name="check' + i + '"><label for="check' + i + '">' + title + '</label>';       
        document.getElementById('container').appendChild(node); 
}
Member Avatar for Member #46692

Recommend using jquery... it has a very nice DOM parser.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.