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

i working on site customers can click on various buttons , input text forms , image of product change. able see multiple views of product slider.

i need able grab input form field , replace part of url product image being called input. have included jsfiddle of code using.

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> 

in 'src' able use input different forms change numbers 'vignette', 'color'. love more slider able change value 'pos' in url too, current value of slider used in url position instead of form.

can assist me please?

update

the fiddle seems have disappeared. :(

---

if using jquery simple. need assign onchange event form input in document ready.

then change .prop('src', value) of img element.

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