Member Avatar for Sorcher

I need to make this code set "str" as "Recent" if the "str" got no value.
Right now i have to use this:

<form>
<select name="users" onChange="showUser(this.value)">
<option value="">Select album:</option>
<option value="Recent">Somealbumname</option>
</select>
</form>

but its really annoying to have to use the select, i want the code to load with the "str" as "Recent" if its not declared already.

<script type="text/javascript">
function showUser(str)
{

if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","xxxx/xxxx.php?q="+str,true);
xmlhttp.send();
}
</script>
  • 2 Contributors
  • 3 Replies
  • 106 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Taywin

Dani AI

Generated

Two practical ways to make the page show "Recent" by default are: 1) change the page so the initial content is already "Recent" (server-side render) as suggested, or 2) keep the AJAX flow but call it with "Recent" when the page loads and make the JS treat an empty value as a default. Both are valid — server-side rendering saves an extra HTTP request, while the JS approach keeps the page logic in the client.

If you want the client-side route, change the start of your function so an empty parameter becomes the default, then call the function once when the DOM is ready. Example patterns:

/* inside showUser */
str = str || 'Recent';
/* run once on page load */
window.addEventListener('DOMContentLoaded', function () {
  var sel = document.querySelector('select[name="users"]');
  showUser(sel && sel.value ? sel.value : 'Recent');
});

Note: body onload="showUser(this.value)" will not work because this will refer to the body element, not the select. You must read the select element's value explicitly before calling showUser.

If you modernize the AJAX, use fetch and encode the query value:

fetch('/xxxx/xxxx.php?q=' + encodeURIComponent(str))
  .then(r => r.text())
  .then(html => document.getElementById('txtHint').innerHTML = html)
  .catch(console.error);

Quick tips and gotchas: remove or disable the "Select album" placeholder and mark "Recent" selected if you want it visually chosen; ensure the server understands the literal "Recent" q value; and avoid sending duplicate requests by tracking the last requested value. If the initial content is stable, prefer server-side rendering to avoid an extra round-trip.

Recommended Answers

All 3 Replies

Member Avatar for Taywin

If you want it that way, then you need to modify the page you are displaying, not Ajax part. You just load the "Recent" data to the page and remove the "Select Album" option from the list.

Member Avatar for Sorcher

Do you mean something like <body onload="showUser(this.value)"> ?
im not sure how i should make the ajax run with str as "Recent"

Member Avatar for Taywin

Nope, you don't need to call Ajax when you first load the page. You just simply load the value ready for "Recent" and display it on the page. Then you could get rid of "Select Album" option and let the select tag on "Recent" option.

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.