Member Avatar for web_develop

Hi all,
I'm building a shopping website that within the products' page, there's an HTML select that allows the user to choose what product type he wants to view. beneath the select, there's a heading followed by a div or a table created at runtime showing the product name, image and a description.

My problem is in dynamically write the title. The designer provided me the prototype with a static heading in a span,once i try to automate it, the heading is created on a blank page not within the same page.

Here's my code so far:

Product type: <select name="product_type" id="product_type" onchange="select_type()">
                            		<option value="none" selected="selected">---</option>
                                    <option value="screen">monitors</option>
                               		<option value="map">maps</option>
                                    <option value="all">View all</option>
                                    </select>
.
.
.
 <div class="module">
                	
					<span>
					<script language="javascript">
	function select_type()
	{
					if(document.getElementById("product_type").value=="screen")
					document.write("<h2> Monitors</h2>");
					
					else if(document.getElementById("product_type").value=="map")
					document.write("<h2>Maps</h2>");
					
					
					else if(document.getElementById("product_type").value=="all")
					document.write("<h2>All Products</h2>");
					
					else
					document.write("<h2>Please select a product type</h2>");
	}
					</script>
					
                    </span>

I think the problem is in document.write and it's the way it works, but i need something to write the heading in the same place of the code.

can anyone help??

Thank you

  • 2 Contributors
  • 3 Replies
  • 116 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by niranga
Member Avatar for niranga

Do not use document.write. Try using innerHTML.

<head>
	<script language="javascript">
		function select_type()
		{
			if(document.getElementById("product_type").value=="screen")
			document.getElementById("display_title").innerHTML = "<h2> Monitors</h2>";
			
			else if(document.getElementById("product_type").value=="map")
			document.getElementById("display_title").innerHTML = "<h2>Maps</h2>";
			
			
			else if(document.getElementById("product_type").value=="all")
			document.getElementById("display_title").innerHTML = "<h2>All Products</h2>";
			
			else
			document.getElementById("display_title").innerHTML = "<h2>Please select a product type</h2>";
		}
	</script>
</head>
<body>
	Product type: 
	<select name="product_type" id="product_type" onchange="select_type();">
		<option value="none" selected="selected">---</option>
		<option value="screen">monitors</option>
		<option value="map">maps</option>
		<option value="all">View all</option>
	</select>
	
	<div class="module">
		<span>
			<h2 id="display_title">Please select a product type</h2>
        </span>
	</div>
</body>

EDIT: Some times its not working if you do not put the ; in onchange="select_type();". So use the ;

Edited by niranga because: n/a
Member Avatar for web_develop

Thank you niranga, it works :)

Member Avatar for niranga

Welcome :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.