How to dynamically populate values in HTML page?

Question

I am new to HTML and website development. I am building a website using HTML, CSS mainly (got a template online and trying to edit it). There is a HTML page which I want to treat like a template and I will pass few URL parameters to it and populate the same into the HTML page. Somehow I am not able to get it done.

I have created an dynamic web project in Eclipse and added Tomcat 7.0 as a server and Chrome 66.0 as a browser.

Following is the code snippet:

URL Pattern: http://localhost:8080/NPW_WEB/shop-single.html?Product_Name=First_Product

Javascript:

<script> 

$(document).ready(function(){
   $("#Product_Name1").text("amit");
});

function GetURLParameter(sParam)
    {
        var sPageURL = window.location.search.substring(1);
        alert(sPageURL);

        var url = window.location.href;
        alert(url);

        var sURLVariables = sPageURL.split('&');
        for (var i = 0; i < sURLVariables.length; i++) 
        {
            var sParameterName = sURLVariables[i].split('=');
            if (sParameterName[0] == sParam) 
            {
                return sParameterName[1];
            }
        }
    }

    function setURLParameter()
    {
        var Product_Name = GetURLParameter('Product_Name');
        document.getElementById("Product_Name").innerHTML = Product_Name;
    }

window.onload = function() 
{
   document.getElementById("Product_Name1").innerHTML = "amit";
   document.getElementById("Product_Name4").textContent = "amit";
   $("#Product_Name1").text("amit");
}

var yourvar='amit';
document.getElementById("Product_Name1").innerHTML = "amit";
document.getElementById('Product_Name2').value = 'amit';
document.getElementById("Product_Name3").textContent="amit";

</script>

HTML:

<div class="container">
  <div class="column">
  <h1  id="Product_Name4">Single Product - <span id="Product_Name1"></span></h1>
  <h1>Single Product - <span id="Product_Name2">s</span></h1>
  <h1>Single Product - <span id="Product_Name3"></span></h1>
</div>

This topic is discussed in many threads already, I tried few of them, it looks very obvious, but still not working for me.

@KunalMukherjee I want to pass some test values like product name, image name, price etc. Is there a better way to do that? — amit
– amit, Commented May 7, 2018 at 0:29
where are you calling your URL? where is sPageURL being called? — Kunal Mukherjee
– Kunal Mukherjee, Commented May 11, 2018 at 5:12

Bhushan · Accepted Answer · 2018-05-11 06:35:58Z

You have written the code to read and set values from the query string in the method setURLParameter();, which you need to invoke somewhere. In below code, I have invoked the method in $(document).ready.. function.

Please try the code below:

JavaScript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script> 

$(document).ready(function(){
   $("#Product_Name1").text("amit");
   setURLParameter();
});

function GetURLParameter(sParam) {
        var sPageURL = window.location.search.substring(1);
        alert(sPageURL);

        var url = window.location.href;
        alert(url);

        var sURLVariables = sPageURL.split('&');
        for (var i = 0; i < sURLVariables.length; i++) 
        {
            var sParameterName = sURLVariables[i].split('=');
            if (sParameterName[0] == sParam) 
            {
                return sParameterName[1];
            }
        }
    }

    function setURLParameter() {
        var Product_Name = GetURLParameter('Product_Name');
        document.getElementById("Product_Name").innerHTML = Product_Name;

        var Product_Name = GetURLParameter('Product_Name2');
        document.getElementById("Product_Name2").innerHTML = Product_Name;
    }

</script>

HTML:

<div class="container">
  <div class="column">
      <h1>Single Product - <span id="Product_Name"></span></h1>
      <h1>Single Product - <span id="Product_Name2"></span></h1>
  </div>
</div>

SwapNeil · Accepted Answer · 2018-05-04 07:51:54Z

0

You can try this below code using JavaScript and JQuery: Note: This is way to add text in html tag like(span, p, div, etc). you can add text to the element by adding text to it dynamically

// Javscript Code
var yourvar = 'amit';
document.getElementById("Product_Name1").innerHTML = "amit";
document.getElementById('Product_Name2').innerHTML = 'amit';
document.getElementById("Product_Name3").innerHTML = "amit";

// Jquery Code
$(document).ready(function() {
  $("#Product_Name6").text("amit");
  $("#Product_Name7").text("amit");
  $("#Product_Name8").text("amit");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h3> With Javascript</h3>
<div class="container">
  <div class="column">
    <h1 id="Product_Name4">Single Product - <span id="Product_Name1"></span></h1>
    <h1>Single Product - <span id="Product_Name2">s</span></h1>
    <h1>Single Product - <span id="Product_Name3"></span></h1>
  </div>


  <h3> With Jquery</h3>

  <div class="container">
    <div class="column">
      <h1 id="Product_Name5">Single Product - <span id="Product_Name6"></span></h1>
      <h1>Single Product - <span id="Product_Name7">s</span></h1>
      <h1>Single Product - <span id="Product_Name8"></span></h1>
    </div>

edited May 4, 2018 at 7:51

answered May 4, 2018 at 7:47

SwapNeil

5552 silver badges14 bronze badges

2 Comments

amit Over a year ago

I have tried the exact same (both the approaches), but no luck.

amit Over a year ago

I think this is not about the code, something is wrong with my system / project / browser settings.But have no idea.

Collectives™ on Stack Overflow

How to dynamically populate values in HTML page?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related