[jkr]

Здравствуйте!
Необходимо для сайта разработать форму онлайн заявки. Суть её в том, что клиент, пошагово выбирая комплектующие, отправляет заявку на готовое изделие (резиновый шланг, с фитингами, если кому-то интересно).
Форму в 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>

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