How do I convert this jQuery codes to JavaScript?

Question

I am having trouble in solving my previous post. I only got a solution which requires jQuery, but I want to use JavaScript instead.

Really need help on this.

Previous Post (For Reference) : HTML - How To Display & Direct Selected Values From Drop Down Menu To A New HTML Page

This is the first jquery codes.

<input type="submit" id="btngo" value="Go" />
<script type="text/javascript">
  $(function() {
    $("#btngo").bind("click", function() {
      var url = "Page2.htm?foodbeverage=" + encodeURIComponent($("#foodbeverage").val()) + "&status=" + encodeURIComponent($("#status").val());
      window.location.href = url;
    });
  });
</script>

This is the second jquery codes.

< script type = "text/javascript" >
  var queryString = new Array();
$(function() {
  if (queryString["foodbeverage"] != null && queryString["status"] != null) {
    var data = "<b>Food Beverages:</b> " + queryString["foodbeverage"] + " <b>Dine Takeaway:</b> " + queryString["status"];
    $("#showdata").html(data);
  }
}); <
/script>

Possible duplicate of Is there an easy way to convert jquery code to javascript? — Maxim
– Maxim, Commented Aug 25, 2017 at 7:11

Thijs · Accepted Answer · 2017-08-25 07:12:45Z

1

I've converted the first snippet to a native JS equivalent. I didn't add the status to the URL, it is just more of the same as getting the food beverage.

(function() {
  /**
   * Handles the click of the submit button.
   */
  function onSubmitClicked(event) {
        // Get the input element from the DOM.
    var beverage = document.getElementById('foodbeverage'),
        // Get the value from the element.
        beverageValue = beverage.value,
        // Construct the URL.
        url = 'Page2.html?foodbeverage=' + encodeURIComponent(beverageValue) + '&status=test';

    // Instead of going to the URL, log it to the console.
    console.log('goto to URL: ', url);
  }
  
  // Get the button from the DOM.
  var submitButton = document.getElementById('btngo');
  // Add an event listener for the click event.
  submitButton.addEventListener('click', onSubmitClicked);
})();

<label>
Beverage:
<input type="text" id="foodbeverage"/>
</label>
<input type="submit" id ="btngo" value="Go" />

answered Aug 25, 2017 at 7:12

Thijs

2,3612 gold badges14 silver badges22 bronze badges

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

2 Comments

cerberus99 Over a year ago

Thanks a bunch, man. I just realized that I had to change the the 'console.log'. Extremely sorry.

Thijs Over a year ago

I've outlined some steps to take in your newer question, I hope it will help you to figure out what to do next.

Phani Kumar M · Accepted Answer · 2017-08-25 07:39:23Z

For the second code snippet, add a div to the form/page. The JS function below will update the div value on window onload with parameters passed. Note that div is only updated if both the querystring paramaters are present.

         <div id="showdata"></div>

         <script type="text/javascript">
            window.onload = passParameters;

            //Function to update "showdata" div with URL Querystring parameter values
            function passParameters() {
                var foodbeverage = getParameterByName("foodbeverage");
                var status = getParameterByName("status");
                if (foodbeverage != null && status != null) {                
                    var data = "<b>Food Beverages:</b> " + foodbeverage + " <b>Dine Takeaway:</b> " + status;
                    document.getElementById("showdata").innerHTML = data;
                }
            }
            //Get URL parameter value
            function getParameterByName(name, url) {
                if (!url) url = window.location.href;
                name = name.replace(/[\[\]]/g, "\\$&");
                var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                    results = regex.exec(url);
                if (!results) return null;
                if (!results[2]) return '';
                return decodeURIComponent(results[2].replace(/\+/g, " "));
            }
        </script>

Collectives™ on Stack Overflow

How do I convert this jQuery codes to JavaScript?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related