Javascript-форум - Заполнение вормы

Здравствуйте!
Необходимо для сайта разработать форму онлайн заявки. Суть её в том, что клиент, пошагово выбирая комплектующие, отправляет заявку на готовое изделие (резиновый шланг, с фитингами, если кому-то интересно).
Форму в HTML я осилил, а вот со скриптами не дружу, как, в принципе, и остальные мои коллеги.
С горем пополам я на просторах Интернета нарыл несколько подходящих скриптов, но некоторые работают не совсем так, как хотелось бы, а некоторые я просто не могу заставить работать вместе.
В общем, вот примерный каркас пошагового выбора:

<select name=""  onchange="if (this.selectedIndex>0) {var chname=document.getElementsByName('artikul')[0];  chname.value+=this.options[selectedIndex].value+''}">
<optgroup label="Резиновый шланг высокого давления">
<option value="-1">Выберите:</option>
<option value="1SNф">1SN</option>
<option value="2SNф">2SN</option>
<option value="NY1">NY100</option>
</select><br><br>
<select name=""  onchange="if (this.selectedIndex>0) {var chname=document.getElementsByName('artikul')[0];  chname.value+=this.options[selectedIndex].text+'х'}">
    <option value="-1">Выберите:</option>
     <option value="1">06</option>
    <option value="2">08</option>
</select><br><br>
<input type="text" id="length" size="50%" placeholder="Введите длину РВД в миллиметрах, нажмите кнопку"/></input><br><br>
<button id="addlength">Указать длину</button><br><br>
<script>
var length = document.getElementById("length") ;
var addlength = document.getElementById("artikul") ;
document.getElementById("addlength").onclick = function() {
    artikul.value+= length.value ;
}
</script>
<script>
    function f() {
        var fitting = document.getElementById('fitting')
        fitting.value = fitting.value.replace(/\s/g, '')
    }
</script>
<input style="text-transform: uppercase;" type='text' id='fitting' onblur='f()' size="50%" placeholder="Введите наименовение, например, PN13AOL16"></input><br><br>
<button id="addfitting">Указать фитинг</button><br><br>
<script>
var fitting = document.getElementById("fitting") ;
var addfitting = document.getElementById("artikul") ;
document.getElementById("addfitting").onclick = function() {
    artikul.value+= fitting.value ;
}
</script>
Обозначение: <input readonly type="text" name="artikul" id="artikul" value="" size="30em" />

но я тут вижу, как минимум, два недостатка: input artikul заполняется по нескольку раз из каждого источника, например если несколько раз менять значение select-а, каждое значение будет копироваться в artikul, хотелось, и есть кнопки, хотелось бы, чтобы заполнялось "на лету" (хотя не критично).
По обоим select-ам нужна смена картинок, для этого есть более-менее понятный мне скрипт:

<form name="form1" method="post" action=""> 
<select name="select" onchange='newpicture();'> 
<option value="1SN">1SN</option> 
<option value="2SN">2SN</option> 
<option value="2SN">TFW</option> 
</select>
<br><br>
<img height="100" name='pic' class="tab">
<script> 
  function newpicture(){ 
  document.pic.src=document.forms[0].select.value+".jpg"; 
  } 
  newpicture(); 
  </script> 
  </form>

но я не могу запихнуть его в форму.
Помогите, пожалуйста, разобраться.

<select id="selecthose" onchange='hosepicture();'> <option value="-1">Выберите:</option> <optgroup label="Резиновый шланг высокого давления"> <option value="1SN">1SN</option> <option value="2SN">2SN</option> </select> <br><br> <img height="100" name='pic' class="tab"> <script> function hosepicture(){ var selecthose = document.getElementById('selecthose'); document.pic.src=selecthose.value+".jpg"; } </script>

<select onchange="if (this.selectedIndex>0) {var chname=document.getElementsByName('artikul')[0]; chname.value+=this.options[selectedIndex].value+''}"> <option value="-1">Выберите:</option> <optgroup label="Резиновый шланг высокого давления"> <option value="1SN">1SN</option> <option value="2SN">2SN</option> </select><br><br> Обозначение: <input readonly type="text" name="artikul" id="artikul" value="" size="30em" />

<select id="selecthose"> <option value="-1">Выберите:</option> <optgroup label="Резиновый шланг высокого давления"> <option value="1SN">1SN</option> <option value="2SN">2SN</option> </select> <br> <img height="100" name='pic' class="tab"> <br> <label> Обозначение: <input readonly type="text" name="artikul" id="artikul" value="" size="30em" /> </label> <script> function hosepicture(){ document.pic.src=this.value+".jpg"; if (this.selectedIndex>0) { document.getElementById('artikul').value+=this.value+''; }; }; document.getElementById('selecthose').addEventListener('change',hosepicture); </script>

<h1>Шаг №1: выберете тип рукава</h1> <div style="float: left; width: 25%; height: auto;">Тип рукава &nbsp <select id="selecthose"> <option value="-1">Выберите:</option> <optgroup label="Резиновый шланг высокого давления"> <option value="1SNф">1SN</option> <option value="2SNф">2SN</option> </optgroup> </select></div> <div style="float: right; width: 75%; height: auto;">Диаметр условного прохода &nbsp <select onchange="if (this.selectedIndex>0) {var chname=document.getElementsByName('artikul')[0]; chname.value+=this.options[selectedIndex].text+'х'}"> <option value="-1">Выберите из списка</option> <option value="1">06</option> <option value="2">08</option></select>&nbsp <div style="float: right;"><a target="blank" id="" href=""><b>Подробное описание рукава</b></a></div></div> </div> <br> <br> <div style="float: left; width: 50%; height: 300px;"><img name='table' height="300"></div> <div style="float: right; width: 50%; height: 300px;"><img height="50" name='pic'><img name='desc' height="250"></div> <script> function hosepicture(){ document.table.src=this.value+"_TABLE.png"; document.pic.src=this.value+".png"; document.desc.src=this.value+"_DESC.png"; if (this.selectedIndex>0) { document.getElementById('artikul').value=this.value+''; }; }; document.getElementById('selecthose').addEventListener('change',hosepicture); </script> <br> <div style="float: left; width: 30%;">Обозначение РВД:</div> <div style="float: right; width: 70%;"><input readonly type="text" name="artikul" id="artikul" value="" size="70%" placeholder=""></div>