Нужно изображение для изменения, когда установлен флажок

Question

У меня есть форму, которая требует от пользователя сделать выбор из выгруженного окна, когда они сделают выбор, логотип в верхней части страницы изменится в соответствии с их выбором. здесь jsfiddle. Итак, моя проблема заключается в том, что я хочу, чтобы иметь возможность опубликовать имя выделения в раскрывающемся списке в mysql, но быть таким, как значение уже используется javascript для изменения изображения, все, что размещается в db, имя изображения, а не значение в поле.

Что бы я хотел сделать, вместо использования раскрывающегося списка, чтобы изменить изображение, как я могу использовать флажки для выполнения того же самого? У меня есть логотип по умолчанию, который всегда отображается в форме до тех пор, пока не будет сделан выбор, поэтому мне нужно сохранить это на месте.

здесь код в 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> 

и Javascript

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

Answer 1

Я думаю, что с помощью флажков будет немного более сложным, если вы не заставить их работать как радио группа. Если вы хотите сохранить выбор, вы можете поместить IMG SRC в title, что позволяет использовать значение -

<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> 

Затем в JS, получить выбранный вариант названия -

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

посмотреть обновленный jsFiddle примера - http://jsfiddle.net/UtcTc/

редактировать
, если вы хотите, чтобы сохранить выбранный IMG SRC, я рекомендовал бы создать скрытые е lement чуть ниже выберите

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

затем измените swapImage() на

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;  
}; 

, которые затем могут быть захвачены на форму пост -

$img_url = $_POST['img_url']