2010-02-25 2 views
0

Я хочу, чтобы предоставить пользователю 3 изображения, каждое изображение будет иметь соответствующее значение:Изменение значения поля поля по щелчку

1. left,middle,right 
2. middle,left,right 
3. left,right,middle 

Затем я хочу, чтобы написать это значение в текстовое поле в форме, так он сохраняется, когда пользователь нажимает кнопку «Отправить».

У меня уже есть рабочая форма, в которой пользователь может вводить значения, 1,2 or 3, но хочет, чтобы текстовое поле было скрыто, а пользователь вместо этого выбирал изображение и обновлял текстовое поле.

+1

Не могли бы вы сказать, что в следующий раз вы используете рамки? – aefxx

+0

Где это весело, я не имею в виду конкретную структуру. Как раз так происходит при исследовании jQuery уже включен в решение, поэтому было чистой телепатией, что Мэтт нашел решение jQuery. – CLiown

+0

Зачем вам тогда отмечать пост Мэтта? Он использует jQuery, тем самым ограничивая вас. – aefxx

ответ

0

Прикрепите обработчик onclick к изображениям, который устанавливает атрибут значения текстового поля в нужное вам положение.

Вот что-то для него в JQuery:

<img class="clickable" src="something.jpg" alt="left,middle,right"/> 
<img class="clickable" src="something.jpg" alt="middle,left,right"/> 
<img class="clickable" src="something.jpg" alt="left,right,middle"/> 
<input type="hidden" id="clicked-image" name="something"/> 

<script> 
$(document).ready(function() { 
    $('.clickable').bind('click', function() { 
    $('#clicked-image').val($(this).attr('alt')); 
    }); 
}); 
</script> 
+0

+1 для использования jQuery - должно быть, прочитал мой разум. – CLiown

+0

-1 для злоупотребления тегом alt. – aefxx

+0

Трудно злоупотреблять на мой взгляд ... Значения являются точными изображениями изображений. – Matt

1

@id Установить атрибут для ваших скрытых входов, а затем на изображениях вы можете использовать код яваскрипта, например

<img src="1.jpg" onclick="document.getElementById('inputID').value='your value'"> 
<input type="hidden" id="inputID" name="somename"> 
0

если вы используете JQuery:

<img class="selector123" src="..." rel="1"/> 

в JQuery

$(".selector123").click(function(){ 
    $("#value123input").val($(this).attr('rel')); 
}); 

Это один из примеров:

0

JQuery делает это тривиальная задача. Вы можете связать событие click с изображениями.

выдержка:

<img src="/images/lmr.png" class="direction" name="left,middle,right" /> 
    <img src="/images/mlr.png" class="direction" name="middle,left,right" /> 
    <img src="/images/lrm.png" class="direction" name="left,right,middle" /> 


    <input type="text" value="Click an image" /> 

<script> 
    $('.direction').click(function() { 
     var text = $(this).attr('name'); 
     $("input").val(text); 
    }); 
</script> 

Испытано локально, и поле ввода типа получает заданное значение. Теперь вы можете сделать это скрытым, и оно будет опубликовано. (<input type="hidden" etc.)

Смежные вопросы