Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Xml

I Need To Make A Javascript Function Which Will Be Invoked When User Clicks On The “search” Button

Post a Comment
The function reads the item name, and processes the order.xml data and displays all order's item id and customer id that their item_name is matched. It also has to do a partial sea

Solution 1:

You can't use the i as an index into customerid, item, and name, because there can be multiple items for each customer.

You should loop over the order elements, and then loop over item within that. Then you can check whether that item name contains the filter string when deciding to include it in the result.

You need to set filter in the onclick function so you use the value that the user has entered before clicking.

Synchronous AJAX is deprecated. You should use asynchronous mode, and display the table in the onload function.

var button = document.getElementById("button");
var search = document.getElementById("textfield");
button.onclick = function() {
  var filter = search.value.toLowerCase();

  var xhttp = newXMLHttpRequest();
  xhttp.open("GET", "order.xml", true);
  xhttp.send();
  xhttp.onload = function() {
    var xmlDoc = xhttp.responseXML;
    var output = "<table width='229' border='1'>";
    var orders = xmlDoc.getElementsByTagName("order");
    output += "<td width='135'><b>Customer Id</td><td width='78'><b>Item Id</td>"for (let i = 0; i < orders.length; i++) {
      let order = orders[i];
      let customerid = order.getElementsByTagName("customerid")[0];
      let items = order.getElementsByTagName("item");
      for (let j = 0; j < items.length; j++) {
        if (items[j].getElementsByTagName("name")[0].innerHTML.toLowerCase().includes(filter)) {
          output += "<tr>";
          output += "<td>" + customerid.innerHTML + "</td>";
          output += "<td>" + items[i].getAttribute("itemid") + "</td>";
          output += "</tr>";
        }
      }
    }
    output += "</table>";
    document.getElementById("pend").innerHTML = output;
  }
}
<!doctype html><html><head><metacharset="utf-8"><title>Project 1- Q8</title></head><body><p><labelfor="textfield">Enter Item Name:</label><inputtype="text"name="textfield"id="textfield"><inputtype="button"name="button"id="button"value="Search"></p><h3>List of all information about the item</h3><pid="pend"></p></body></html>

Post a Comment for "I Need To Make A Javascript Function Which Will Be Invoked When User Clicks On The “search” Button"