CODEWITHSUNDEEP
phpjavascript
user2447848
user2447848

Reputation: 289

Need image to change when checkbox is selected

I have a form that requires the user to make a selection from a drown down box, when they make the selection the logo on the top of the page will change to match their selection. here is the jsfiddle. So my problem is this, I want to be able to post the name of the selection in the drop down box to mysql but being as how the value is already being used by the javascript to change the image all that posts in the db is the name of the image and not the value in the box.

What I would like to do is instead of using the drop down box to change the image, how can I use check boxes to accomplish the same thing? I have a default logo that is always displayed on the form until a selection is made so I need to keep that in place as well.

here is the code in the jsfiddle 

<br/><br/>

<select id="dd" onChange="swapImage()" style="width: 150px">
<option value=""></option>
<option value="http://xxxs.com/demo1/decals/falcons2013.jpg">Falcons</option>
<option value="http://xxxxx.com/demo1/decals/gvklogo2013.png">Green Valley   Knights</option>
<option value="http://xxxxx.com/demo1/decals/longhorns2013.jpg">Longhorns</option>
</body>
</html>

and the javascript

function swapImage(){
var image = document.getElementById("logoimage");
var dropd = document.getElementById("dd");
image.src = dropd.value;    
};

Upvotes: 2

Views: 824

Answers (1)

Sean
Sean

Reputation: 12433

I think using checkboxes will be a little more challenging, unless you make them work like a radio group. If you want to keep the select, you can put the img src at the title, allowing you to use the value -

<select id="dd" onChange="swapImage()" style="width: 150px">
    <option value=""></option>
    <option value="Falcons" title="http://xxxxx.com/demo1/decals/falcons2013.jpg" >Falcons</option>
    <option value="Green Valley Knights" title="http://xxxxx.com/demo1/decals/gvklogo2013.png">Green Valley Knights</option>
    <option value="Longhorns" title="http://xxxxx.com/demo1/decals/longhorns2013.jpg">Longhorns</option>
</select>

Then in your js, get the selected option title - 

function swapImage(){
var image = document.getElementById("logoimage");
var dropd = document.getElementById("dd");
image.src = dropd.options[dropd.selectedIndex].title;   
};

see this updated jsFiddle example - http://jsfiddle.net/UtcTc/

edit
if you want to save the selected img src, I would recommend creating a hidden element just below select

<input type="hidden" name="img_url" id="img_url" />

then change your swapImage() to

function swapImage(){
    var image = document.getElementById("logoimage");
    var dropd = document.getElementById("dd");
    image.src = dropd.options[dropd.selectedIndex].title;
    document.getElementById("img_url").value = dropd.options[dropd.selectedIndex].title;    
};

which can then be captured on form post -

$img_url = $_POST['img_url']

Upvotes: 3

Related Questions