• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

javascript for popup on selected item in dropdown

 
Ranch Hand
Posts: 38
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I have searched on google but can't get any javascript for popup on selected item in dropdown please help me or suggest me reference site



Here I want new popup on item selected

Thank you in adv
 
Greenhorn
Posts: 20
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
It's not clear what sort of popup you want and what for. If you make it clear I'll be able to help you.
 
shilpa deshmukh-kadam
Ranch Hand
Posts: 38
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
for example below code shows popup on item selection but it is a alert box where I can not put image or buttons in popup window



this above is simple one example another one when I searched a lot I got javascript as below



Now code for style.css is as below


Fine this code is displaying popup on item selected but Problem is that It shows same popup on each selection although I changed id of popupbox ......
Please help me....

you can run this code it works as mentioned............. and I send whole code

 
Kumar Barun
Greenhorn
Posts: 20
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Below is the modified version:



and




I think you don't understand the basics of JS and jQuery well. You want the data to be displayed in the div with id content on every new item selected and initially the data should have selected value but you were not doing that.

I'll write and post a simple tutorial on what to do for a simple plain JS version and the approach you should take when you make a popup. I'll post the link here.
 
shilpa deshmukh-kadam
Ranch Hand
Posts: 38
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Your modified code is executing properly.... which Item I have selected It shows into popup ...... but problem is with the description ... If I try to describe each Item It is not possible through my code....
Below is my updated code...

index.html


Here is Style.css




You give me very proper way to my search but in above example It shows only boxpopup div .... Here I understand its due to passing the Id ti javascript function ... Now I don't understand how to pass anather Id i.e boxpopup2
Please guide me...
Thank you in advance... !!
 
Kumar Barun
Greenhorn
Posts: 20
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Shilpa, there's a lot for you in store to learn as I can feel from your new code. I would love to help you to your success. But for that give me the complete requirement you need. Then I will write a short tutorial for your problem with detailed discussion and post it for you.

Some obvious misconceptions can be found in your code like the same id (content) two times in your page and others.

Ready to help you but be clear first with all of your requirements.
 
shilpa deshmukh-kadam
Ranch Hand
Posts: 38
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator


such like this one

If financial year is selected the related report open in popup
 
Kumar Barun
Greenhorn
Posts: 20
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
It's simple you have to write a new function that should be called from within the openOffersDialog(x) function like this:



function openOffersDialog(x){

var store = func1();

}



Now store variable should be written in div with id content using:

either

$('#content').html(store);



or



document.getElementById('content').innerHTML=store;



Misconceptions

Below is the code she had tried:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>JQuery Popup | JQuery Slide Popup | Demo</title>
<link rel="stylesheet" type="text/css" href="style1.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function openOffersDialog(x) {
$('#overlay').fadeIn('fast', function() {
$(boxpopup).css('display','block');
$(boxpopup).animate({'left':'30%'},500);

$('#content').html(x);
});
}


function closeOffersDialog(prospectElementID) {
$(function($) {
$(document).ready(function() {
$('#' + prospectElementID).css('position','absolute');
$('#' + prospectElementID).animate({'left':'-100%'}, 500, function() {
$('#' + prospectElementID).css('position','fixed');
$('#' + prospectElementID).css('left','100%');
$('#overlay').fadeOut('fast');
});
});
});
}
</script>
</head>

<body onLoad="openOffersDialog('Audi');">
<div id="wrapper">
<div id="overlay" class="overlay"></div>
<select onChange="openOffersDialog(this.value);">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>

<div id="boxpopup" class="box">
<a onClick="closeOffersDialog('boxpopup');" class="boxclose"></a>
<div id="content">
This is popupbox. This is popupbox.
</div><!--end of content -->
<table width="50%" border="0">
<tr>
<td><a href="http://www.audi.in/" target="_blank"><img src="images/pdf.png"></a></td>
<td><a href="http://www.javaranch.com/" target="_blank"><img src="images/pdf.png"></a></td>
</tr>
<tr>
<td>audi1</td>
<td>audi2</td>
</tr>
</table>

</div><!--end of popupbox -->

<div id="boxpopup2" class="box">
<a onClick="closeOffersDialog('boxpopup');" class="boxclose"></a>
<div id="content">
This is popupbox. This is popupbox.
</div><!--end of content -->
<table width="50%" border="0">
<tr>
<td><a href="https://coderanch.com/" target="_blank"><img src="images/pdf.png"></a></td>
<td><a href="http://www.volvobuses.com/" target="_blank"><img src="images/pdf.png"></a></td>
</tr>
<tr>
<td>Volvo1</td>
<td>Volvo2</td>
</tr>
</table>


</div><!--end of popupbox -->

</div><!--end of wrapper -->
</body>
</html>



I have highlighted the miconceptions part:

1. id attribute must be unique on the page, it means it must not be repeated. It is also obvious from its name. You have class attribute for that.

2. The description in the table you have is not being manipulated on the basis of selection. So it will become a part of the box for keeps.


Due to work overload I couldn't write much for you, but you can visit this link:

displaying data in pop up
 
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
I want to write a code in html JavaScript. In this the the user have to select one option from drop-down list....like i want to buy a tv and there is a option of selecting size....when i click on 32 inch ..it gives a popup that you have 10% discount on this .....and when i select 40 inch it gives popup that you have 20% discount on this....
reply
    Bookmark Topic Watch Topic
  • New Topic