CODEWITHSUNDEEP
javascripthtml
dc62
dc62

Reputation: 1

How to pass in Parameters into a c++ file from input of a HTML page using AJAX?

So I am learning how to use HTML and Javascript and I am suppose to get input from the user to pass it into a c++ file someone else made. For an unknown reason it cant access the c++ program and it doesn't pass in the parameters.

Here is the code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href= "a12.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src= "a12js.js"></script>
        <title>Mileage Calculator</title>
    </head>
    <body>
        <h1>Mileage Calculator</h1>
        <div id="input">
          <form>
            <label>Starting City: *required</label>
            <input id="startCity" name="startCity">
            <label>Starting State: *required</label>
            <input id="startState" name="startState">
            <label>Ending City: *required</label>
            <input id="endCity" name="endCity">
            <label>Ending State: *required</label>
            <input id="endState" name="endState"><br></br>
            <button type="button" onclick="loadFile()">Submit</button>
          </form>
        </div>
        <div>
            <table id="displayInfo"></table>
        </div>
    </body>

function loadFile(){
    alert("This works");
    var txt ="";
    var startCity = String(document.getElementById("startCity").value);
    var startState = String(document.getElementById("startState").value);
    var endCity = String(document.getElementById("endCity").value);
    var endState = String(document.getElementById("endState").value);
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var obj = this.responseText;
        var data = JSON.parse(obj);
        txt +="<tr><th>Starting Location<th><th>End Location<th><th>Miles in Between<th><tr>";
        txt +="<tr><td>" + data.trip.startCity + ", " + data.trip.startState;
        txt += "<td><td>" + data.trip.endCity + ", " + data.trip.endState + "<td>";
        txt += "<td>" + data.trip.miles + "<td><tr>";
        document.getElementById("displayInfo").innerHTML = txt;
      }
    }
    xhttp.open("GET", "/cgi-bin/cs213/mileageAjaxJSON? startCity="+startCity+"&startState="+startState+"&endCity="+endCity+"&endState="+endState, true);
    xhttp.send();
}

I don't know if I added the variables to the url in the request correctly or not?

Upvotes: 0

Views: 571

Answers (1)

Danny Fardy Jhonston Berm&#250;dez
Danny Fardy Jhonston Berm&#250;dez

Reputation: 5571

I have seen that your code has some bugs. Let me give some bugs fixes.

HTML:

  1. The <br> is a self-closing tag. According to the HTML specification you could use: <br> or <br /> when DOCTYPE is XHTML. So your HTML markup must be like this:
<h1>Mileage Calculator</h1>
<div id="input">
  <form>
    <label>Starting City: *required</label>
    <input id="startCity" name="startCity">
    <label>Starting State: *required</label>
    <input id="startState" name="startState">
    <label>Ending City: *required</label>
    <input id="endCity" name="endCity">
    <label>Ending State: *required</label>
    <input id="endState" name="endState"><br>
    <button id="btnLoadFile" type="button">Submit</button>
  </form>
</div>
<div>
  <table id="displayInfo"></table>
</div>
  1. It's a good practice to use unobtrusive JavaScript. Here we have a reference: The principles of unobtrusive JavaScript. You can add an id attribute to your <button>. Like this: <button id="btnLoadFile" type="button">Submit</button> then you can programmatically control the behavior of this element by using its id attribute through document.getElementById() without using the onclick="loadFile()" directly. Something like this:
var btnLoadFile = document.getElementById("btnLoadFile");
btnLoadFile.onclick = function() {
  // Some code...
};

JavaScript: In this case by using EcmaScript 5 standard.

  1. Helper function to perform asynchronous requests. First of all, you need a helper function to perform asynchronous request by using XMLHttpRequest object. Something like this:
var newXHR = null; // Once initialized with the XMLHttpRequest object, you can use the abort() method from anywhere in the code.

function sendXHR(options, callback) {
  newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
  newXHR.open(options.type, options.url, true);
  newXHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  newXHR.send(options.data);
  newXHR.onreadystatechange = function() {
    if (this.status === 200 && this.readyState === 4) {
      callback(this.response);
    }
  };
}

With the above function, you can make an asynchronous request by setting some options like url or http method.

sendXHR({
  url: url,
  type: "GET"
}, function(response) {
  // Gets the response from the asynchronous request by using XMLHttpRequest object.
  console.log(response);
});
  1. Rendering table with results: You have missed some closing tags: <tr></tr>, <th></th> and <td></td>. You can concatenate your txt variable by using this code:
txt += "<tr><th>Starting Location</th><th>End Location</th><th>Miles in Between</th><tr>";
txt += "<tr><td>";
txt += data.trip.startCity;
txt += ", ";
txt += data.trip.startState;
txt += "</td><td>";
txt += data.trip.endCity;
txt += ", ";
txt += data.trip.endState;
txt += "</td><td>";
txt += data.trip.miles;
txt += "</td></tr>";

You can see the full source here:

(function() {

  var newXHR = null; // Once initialized with the XMLHttpRequest object, you can use the abort() method from anywhere in the code.

  function sendXHR(options, callback) {
    newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
    newXHR.open(options.type, options.url, true);
    newXHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    newXHR.send(options.data);
    newXHR.onreadystatechange = function() {
      if (this.status === 200 && this.readyState === 4) {
        callback(this.response);
      }
    };
  }

  window.onload = function() {
    var btnLoadFile = document.getElementById("btnLoadFile");
    btnLoadFile.onclick = function() {

      alert("This works");

      // Declare variables.
      var sCity = document.getElementById("startCity");
      var sState = document.getElementById("startState");
      var eCity = document.getElementById("endCity");
      var eState = document.getElementById("endState");

      // Validate variable availability of the HTML element.
      if (sCity && sState && eCity && eState) {

        // Build url to perform HTTP Request by using XMLHttpRequest object.
        var url = "/cgi-bin/cs213/mileageAjaxJSON?startCity=";
        url += sCity.value;
        url += "&startState=";
        url += sState.value;
        url += "&endCity=";
        url += eCity.value;
        url += "&endState=";
        url += eState.value;

        sendXHR({
          url: url,
          type: "GET"
        }, function(response) {

          var obj = response;
          var data = JSON.parse(obj);
          var txt = "";

          txt += "<tr><th>Starting Location</th><th>End Location</th><th>Miles in Between</th><tr>";
          txt += "<tr><td>";
          txt += data.trip.startCity;
          txt += ", ";
          txt += data.trip.startState;
          txt += "</td><td>";
          txt += data.trip.endCity;
          txt += ", ";
          txt += data.trip.endState;
          txt += "</td><td>";
          txt += data.trip.miles;
          txt += "</td></tr>";
          document.getElementById("displayInfo").innerHTML = txt;
        });
      }
    };
  };
}());
<h1>Mileage Calculator</h1>
<div id="input">
  <form>
    <label>Starting City: *required</label>
    <input id="startCity" name="startCity">
    <label>Starting State: *required</label>
    <input id="startState" name="startState">
    <label>Ending City: *required</label>
    <input id="endCity" name="endCity">
    <label>Ending State: *required</label>
    <input id="endState" name="endState"><br>
    <button id="btnLoadFile" type="button">Submit</button>
  </form>
</div>
<div>
  <table id="displayInfo"></table>
</div>

Upvotes: 1

Related Questions