Как изменить часть URL-адреса с помощью ввода формы?
Я работаю над сайтом, где клиенты могут нажимать на различные кнопки и вводить текст в формы, и изображение продукта изменится. Они также могут просматривать несколько видов продукта с помощью ползунка.
Мне нужно иметь возможность получить их ввод из поля формы и заменить часть URL-адреса, с которого вызывается изображение продукта, их вводом. Я включил jsfiddle кода, которым я сейчас являюсь с помощью.
Http://jsfiddle.net/Jaysenedwinward/4pu2k4m3/1/
<div id="productimage">
<img id="vignette" src="http://scene7.website.com/layer/decal&src=ir{vignette=012345&color=678910&pos=1&show}"
width="300" alt="slider images"/>
</div>
<div id="spinner">
<input type="range" name="slider" id="slider" value="180" min="0" max="370" step="45"/>
</div>
В "src" я хотел бы иметь возможность использовать ввод из разных форм для изменения чисел для "виньетки", "цвета". Мне бы еще больше хотелось, чтобы слайдер также мог изменять значение "pos" в URL-адресе, поэтому текущее значение слайдера используется в URL-адресе в качестве позиции вместо формы.
Не могли бы вы мне помочь, пожалуйста?
2 answers
Обновление
Скрипка для этого, похоже, исчезла. :(
Если вы используете jQuery, это очень просто. Все, что вам нужно сделать, это назначить событие onChange для этой формы ввода в готовом документе.
Затем измените .prop('src', value) элемента img.
$("#myInput").on('change', function() {
var inputValue = $(this).val();
var linkModified = "http://scene7.website.com/layer/decal&src=ir{vignette="+inputValue+"&color=678910&pos=1&show}";
$("#vignette").prop('src', linkModified);
});
С помощью JavaScript вы можете получить значения из полей ввода. Основываясь на этих значениях, вы можете собрать исходную строку вместе.
var sliderValue = document.getElementById('slider').value;
var colorValue = document.getElementById('color').value;
var srcString = "http://yourwebsite.com/?color=" + colorValue + "&slider=" + sliderValue;
document.getElementById('vignette').attr('src', srcString);