LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » HTML-CSS-PHP-JavaScript / JavaScript Codes » Compare Multiple Different Products Using JavaScript

Compare Multiple Different Products Using JavaScript

Compare-Multiple-Different-Products-Using-JavaScript
Comparing Products is a good option to make your customer mind clear what they are gonna buy so this will increase count in your regular and trusted user they them self a will be confirmed that what they bought is est from another one.

Now a days peoples open soo many tabs to see every product features and to compare them and to get the best open to buy that is a bad optimize way so you have to solve this. Here we have JavaScript Product Compare snippet that will put your all products on one page that you can select from drop down menu that will change the product at run time.

Features:

1.) No JQuery File Added.
2.) JavaScript Files Added.
3.) No CSS Added.
4.) Simple And Fast Loading Widget.
5.) Can Work With Any Browser.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

JavaScript:

<script type="text/javascript">

function lista()
{
var a=document.getElementById("listc").selectedIndex;
var b=document.getElementById("listd").selectedIndex;
if(a==b)
{
alert("Please Select Two Different Product");
document.getElementById("listc").option[0].selected=true;
z=document.getElementById("iframe3");
z.style.visibility="visible";
}
else if(a==1)
{
z=document.getElementById("iframe3");
z.style.visibility="visible";
z.src="1.html";
}
else if(a==2)
{
z=document.getElementById("iframe3");
z.style.visibility="visible";
z.src="boss page1.html";
}
else if(a==3)
{
z=document.getElementById("iframe3");
z.style.visibility="visible";
z.src="levis page1.html";
}
else if(a==4)
{
z=document.getElementById("iframe3");
z.style.visibility="visible";
z.src="prada page1.html";
}
}

function listb()
{
var aa=document.getElementById("listc").selectedIndex;
var bb=document.getElementById("listd").selectedIndex;
if(aa==bb)
{
alert("Youu Have to Select To different Product..");
document.getElementById("listd").option[0].selected=true;
z=document.getElementById("iframe4");
z.style.visibility="visible";
}
else if(bb==1)
{
z=document.getElementById("iframe4");
z.style.visibility="visible";
z.src="gucci page1.html";
}
else if(bb==2)
{
z=document.getElementById("iframe4");
z.style.visibility="visible";
z.src="boss page1.html";
}
else if(bb==3)
{
z=document.getElementById("iframe4");
z.style.visibility="visible";
z.src="levis page1.html";
}
else if(bb==4)
{
z=document.getElementById("iframe4");
z.style.visibility="visible";
z.src="prada page1.html";
}
}
</script>

HTML:

<div id="compare">
<table width="800px">
<tr>
<td colspan="2"><center><h1>Compare Product</h1></center></td>
</tr>
<tr>
<td class="select1"><select>
<option>-----------</option>
<option>Hard drive</option>
<option>USB Flash drive</option>
<option>USB data traveller</option>
<option>Solid State Drive</option>
<option>Memory Cards</option>
<option>CD/DVD</option>
</select>&nbsp;
</td>
<td class="select1">
<select>
<option>-----------</option>
<option>Hard drive</option>
<option>USB Flash drive</option>
<option>USB data traveller</option>
<option>Solid State Drive</option>
<option>Memory Cards</option>
<option>CD/DVD</option>
</select>
</td>
</tr>
<tr>
<td height="25" width="387px"><span class="select1">
<select name="compare1" id="listc" onChange="lista()">
<option>----------</option>
<option>Verbatim</option>
<option>Sony</option>
<option>Kingston</option>
<option>Sandisk</option>
</select>
</span></td>
<td height="25" width="387px"><span class="select1">
<select name="compare2" id="listd" onChange="listb()">
<option>----------</option>
<option>Verbatim</option>
<option>Sony</option>
<option>Kingston</option>
<option>Sandisk</option>
</select>
</span></td>
</tr>
<tr>
<td height="600"><iframe src="" height="100%" width="100%" frameborder="0" id="iframe3"></iframe></td>
<td height="600"><iframe src="" height="100%" width="100%" frameborder="0" id="iframe4"></iframe></td>
</tr>
</table>
</div>

Customization:

1.) You Can Add More CSS. If You Are Pro, Then You Can Do Any Thing.

Recommended For You:
Show/Hide Child Sub-Menu Vertically Using Pure JavaScript

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…

You Like It, Please Share This Recipe With Your Friends Using...

Be the first to write a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *