How to pass variable value in html

Question

My javascript code is:

Table of Contents Show

Here is an example of passing data through URL within a site.
Passing data outside
Submitting form values through GET method
Submitting a form through POST method
Collecting data submitted by either GET or POST method
Every scripting language pages has its own way of receiving the data from the URL
Passing data within the site using URL
Passing the data between the site through URL
Passing variables through query string
Chang of data while passing through URL
Security issues while posting data through URL
How do you pass a value in HTML tag?
How do you assign a value to a variable in HTML?
How do you pass a value in a variable?
Can you do variables in HTML?

<script type="text/javascript">

         var cars = new Array(5);

         cars[0] = "Audi";
         cars[1] = "Bentley";
         cars[2] = "Mercedes";
         cars[3] = "Mini";
         cars[4] = "BMW";
      
        </script>

Now I want to show the value of each array one by one on button click on my page content.

Kindly Help.

Try this:

<div id="carsDiv">
</div>
<button id="addCarBtn">Add Car</button>
<script>
var current = 0;
var cars = new Array(5);
cars[0] = "Audi";
cars[1] = "Bentley";
cars[2] = "Mercedes";
cars[3] = "Mini";
cars[4] = "BMW";
document.getElementById("addCarBtn").onclick = function() {
       if (!(current > cars.length - 1))
       {
            document.getElementById("carsDiv").innerHTML += cars[current] + "<br />";
            current++;
       }
}
</script>

Hope this helps.

<html>
<head>
<script type="text/javascript">
 
var i=0;        
 var cars = new Array(5);
 
         cars[0] = "Audi";
         cars[1] = "Bentley";
         cars[2] = "Mercedes";
         cars[3] = "Mini";
         cars[4] = "BMW";

function BtnClick()
{
	
	if (i<= cars.length-1)
	{
	 document.getElementById("carsDiv").innerHTML += cars[i] + '<br />';
         i=i+1;
	}else
	{
	if(confirm('do you want to see again ?'))
	{
		i=0;
                document.getElementById("carsDiv").innerHTML='';
    
	}
	else 
	{
	 alert('Thanks!!');
        }	
	
       
	}
}      


</script>

</head>
<body>
<div id="carsDiv">
</div>

<input type='submit' onclick='javascript:BtnClick()' value='click' />
</body>
</html>

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900

There are different ways by which values of variables can be passed between pages. One of the ways is to use the URL to pass the values or data. Here the biggest advantage is we can pass data to a different site even running at different servers. Any scripting language like ASP, JSP, PHP or Perl running at receiving end can process and collect the value from the query string or from the URL.

Easy to save the URL or bookmark it for frequent use.
Copy the URL and send it to a friend to refer.

Here one main concern is the data gets exposed in address bar of the browser and can be easily accessible by using browser history. So it is not a good idea to pass sensitive data like password through the URL to different pages or different sites.

Passing variable with data to different pages

Here is an example of passing data through URL within a site.

<a href='page2.php?id=2489&user=tom'>link to page2</a>

When the above link is clicked, page2.php gets the variables id and user with data 2489 and tom respectively. Here is the code to collect data in PHP.

echo $_GET['id']; // output 2489

echo $_GET['user']; // output tom

The address of page2.php can be replaced with any site name and the same data can be passed to another site running in any server. Like this

Passing data outside

<a href=https://www.sitename.com/index.php?id=2489&user=tom>Link to another site</a>

Demo of passing data through a form
You can see in the above case the values can be posted to another site. Note that after the page name we are using question mark ( ? ) to start the variable data pair and we are separating each variable data pair with one ampersand ( & ) mark.

Submitting form values through GET method

A web form when the method is set to GET method, it submits the values through URL. So we can use one form to generate an URL with variables and data by taking inputs from the users. The form will send the data to a page within the site or outside the site by formatting a query string.

<form method=GET action='https://www.anysite.com/index.php'>

Submitting a form through POST method

By post method of form submission we can send more number or length of data. Sensitive information like password does not get exposed in URL by POST method, so our login forms we should use POST method to submit data. This is how we collect data submitted by POST method in PHP

$id=$_POST['id'];
$password=$_POST['password'];

Difference between GET and POST

issues	GET	POST
Browser History	Data remain in Browser History	Data Not available in Browser History
Bookmark	URL with Data can be bookmarked	No data is available in URL to bookmark the page
Data Length Restriction	The restriction (of URL ) is applicable	No Restriction
cached	Can be cached	No meaningful caching
Sensitive Data	Data like password , pin etc. are exposed through URL so they should not be passed using GET method	Better than GET method as data is not exposed through URL

Read more on difference between GET and POST method of form submission

Collecting data submitted by either GET or POST method

If a page is receiving a data which can come in any one of the method GET or POST then how to collect it ? Here we are not sure how to collect the data. So we will use like this.

$id=$_REQUEST['id'];
$password=$_REQUEST['password'];

Every scripting language pages has its own way of receiving the data from the URL

While receiving the data based on the server settings the values will be available to the pages. Here in a server running PHP will have to see the global settings of the server on how to collect the data.

$id=$_GET['id'];
$user=$_GET['user'];

Same way in ASP environment running VB script the data can be collected and assigned like this

Id = Request.QueryString("id")
User = Request.QueryString('user')

Passing data within the site using URL

The same principle is used like above to send the data within the site using URL. A query sting can be formatted with a link or a form can be used with get method to pass variables between pages.

Passing the data between the site through URL

Like above data can be passed to different pages of sites using URL . The best use is directly linking to a page dip inside another site by formatting a query sting. Like this

<a href=https://www.sitename.com/viewtopic.php?id=5248>Linking to a topic</a>

Passing variables through query string

In many applications we need to pass variables through query string. For example we want to display the product details where product ID is to be passed in query string through a variable. The product ID can be collected from a table so we don't know what is the value but we can use the variable which stores the product ID.

For example let us say we have collected product id from the product table. Read the tutorial on how to collect data from table. Our link with query string will have something like this.

$pid=$nt[product_id];
echo "<a href=product-detail.php?product_id=$pid>Product Details</a>";

You can directly display like this also.

echo "<a href='product-detail.php?product_id=$nt[product_id]'>Product Details</a>";

Chang of data while passing through URL

There is a problem in sending data other than plain text through browser. Empty space and some characters like & if present in the data , will create problem. To maintain the data integrity we have to encode the data before sending them though URL and then decode them again to get back the original data. In PHP encode command is used and in ASP VBScript the command is Server.URLEncode(string)

Security issues while posting data through URL

The most common type of security problem in using data from URL is injection attack. We must sanitize the date before using inside our script or generating any query to manage database.
Declaring variables Cookies to store Information

How do you pass a value in HTML tag?

HTML <param> tag is used to pass the parameters to the object that has been embedded using <object> element. We can use more than one <param> tag within an <object> element in any order, but each tag must contain name and value attribute and should be placed at the start of the content.

How do you assign a value to a variable in HTML?

Use the <var> tag in HTML to add a variable. The HTML <var> tag is used to format text in a document. It can include a variable in a mathematical expression.

How do you pass a value in a variable?

In order to pass a value using call by reference, the address of the arguments are passed onto the formal parameters. It is then accepted inside the function body inside the parameter list using special variables called pointers.

Can you do variables in HTML?

In this article, we define a variable in the HTML by using the <var> tag in the document. It is a phrase tag and used to specify the variable in a mathematical equation or in the computer program. The content of this tag is displayed in an italic format in most of the browsers.

kode html