Set dynamic variable to an ajax XMLHttpRequest instead of getting value from onchange event

Question

I´ve come across a script which I need to modify but I don't know how, what I need is to set on page load it reads the value and toss the result that is coming from a database.

The code I will paste is working and does fetch the result from the DB from the select form, now how I can I set a variable that is loaded when page loads and get the result from the DB?

have 3 pages I depend on
1 datalyer page its all good
2 php page
3 html page. here hast the script below, I'm using select option for Peter Griffin his value I will like it to be variable member.

I said onload because on page 1, when ever user surf through the web the pages refresh then new data I send and I need the result of the DB based on the variable.

  <script>

/** page one  where member is a value that is fetch from a layer
  var member = google_tag_manager["GTM-x"].dataLayer.get('ContractNumber');

console.log(member); **/

  function showUser(str) {
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
} else { 
    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 (this.readyState == 4 && this.status == 200) {
            document.getElementById("txtHint").innerHTML = this.responseText;
            console.log(this.responseText);
        }
    };
    xmlhttp.open("GET","elsewhere.php?q="+str,true);
    console.log(str);
    xmlhttp.send();
}
}
</script>

 <body>


  <select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="variable member">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>

 <br>
 <div id="txtHint"><b>Person info will be listed here...</b></div>

 </body>

as I said before this code is working, but instead of using the select how can I tell it on pageload read the variable X and fetch result, in this case "0000004445" is what I need, the variable will be dynamic so "0000004445" can become anything.

Would it be simpler just add the data at the server-side before the page loads? — Teemu
– Teemu, Commented Jan 23, 2018 at 17:08
Try using Local storage to save dynamic variable values and fetch the data from db using that local storage variable. — Mohd Asim Suhail
– Mohd Asim Suhail, Commented Jan 23, 2018 at 17:10

guest271314 · Accepted Answer · 2018-01-23 17:10:51Z

0

You can set the selected attribute at the <option> element where the the value should be retrieved, attach load event to window and within load handler call showUser() with document.querySelector("select[name=users]").value as argument

function showUser(str) {
  console.log(str);
}

onload = function() {
  showUser(document.querySelector("select[name=users]").value)
}

<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="0000004445" selected>Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>

answered Jan 23, 2018 at 17:10

guest271314

1

Sign up to request clarification or add additional context in comments.

18 Comments

Mohd Asim Suhail Over a year ago

select value won't be available after page reload.

guest271314 Over a year ago

@MohdAsimSuhail Not following what you mean?

walter alexander Over a year ago

almust what i needed, but "0000004445" is a number i set manually, the value must be dynamic since is like an ID , so example <option value="somevaribale" selected>Peter Griffin</option> is this possible?

guest271314 Over a year ago

@walteralexander You can set the value of the <option> to any valid valid, and set selected attribute at any <option> element

guest271314 Over a year ago

@walteralexander Do you mean that showUser function is within an HTML document that is opened after "page one"?

|

Collectives™ on Stack Overflow

Set dynamic variable to an ajax XMLHttpRequest instead of getting value from onchange event

1 Answer 1

18 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

18 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related