如何使用表单输入更改 URL 的一部分？

Question

我正在开发一个网站，客户可以在该网站上单击各种按钮并在表单中输入文本，并且产品的图像会发生变化。他们还可以使用滑块查看产品的多个视图。

我需要能够从表单字段中获取他们的输入，并用他们的输入替换 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' 中，我希望能够使用不同形式的输入来更改 'vignette'、'color' 的数字。我更希望滑块也能够更改 URL 中的值 'pos'，因此滑块的当前值在 URL 中用作位置而不是表单。

你能帮帮我吗？

Answer 1

更新

这个fiddle似乎已经消失了。 :(

如果您使用的是jQuery，这很简单。您需要做的就是将一个 onChange 事件分配给准备好文档中的表单输入。

然后更改img元素的.prop('src', value)。

$("#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);
});

Answer 2

使用 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);

如何使用表单输入更改 URL 的一部分？

How do I change part of a URL using form input?

html

php

forms

jquery

slider

更新