Welcome visitor
* Login
* Register
It is currently July 24th, 2019, 10:52 am
All times are UTC [ DST ]
* Search
View unanswered posts - View active topics

FORUMS » Client Side » JavaScript



Post new topic Reply to topic  [ 2 posts ] 
Author Message
  Show an image when a radio button is selected
PostPosted: October 29th, 2009, 12:15 am 

Posts: 26
Hello, today I'm working on a form with radio options. Each radio belongs to one picture wich will be submitted. How can I display the picture of the selected radio?


Top
 Profile  
 
  Re: Show an image when a radio button is selected
PostPosted: October 29th, 2009, 1:30 am 
User avatar

Posts: 112
this is the simple javascript that will handle all the changing-picture stuff
<script type="text/javascript">
function replacePic(newpic){
document.getElementById('preview').src=newpic;
}
</script>

and this is the html with radios, etc. that will call the previous javascript to change the pictures
<form name="form"><input type="reset"  value="remove pic" onclick="replacePic(''); 
document.getElementById('preview').style.display='none';" /><br /><br /> <!--this looong line is for safari ¬¬-->
<input type="radio" name="radioPic" id="rad1" value="firstpic.jpg" onfocus="replacePic(this.value);"
onclick="replacePic(this.value);" />  <!--this line is for safari too-->
<label for="rad1">pj's</label><br />
<input type="radio" name="radioPic" id="rad1" value="second.jpg" onfocus="replacePic(this.value);"
onclick="replacePic(this.value);" /> <!--this line is for safari too-->
<label for="rad1">her</label><br />
<input type="radio" name="radioPic" id="rad1" value="third.jpg" onfocus="replacePic(this.value);"
onclick="replacePic(this.value);" /> <!--this line is for safari too-->
<label for="rad1">blue</label><br />
<input type="radio" name="radioPic" id="rad1" value="etc.jpg" onfocus="replacePic(this.value);"
onclick="replacePic(this.value);" /> <!--this line is for safari too-->
<label for="rad1">pink</label><br />
<br />
<img src="" id="preview" />


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 2 posts ] 

FORUMS » Client Side » JavaScript


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to: