Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.12.2017, 09:01
jkr jkr вне форума
Интересующийся
Отправить личное сообщение для jkr Посмотреть профиль Найти все сообщения от jkr
 
Регистрация: 11.12.2017
Сообщений: 13

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

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

Последний раз редактировалось jkr, 11.12.2017 в 14:54. Причина: Ошибка
Ответить с цитированием
  #2 (permalink)  
Старый 12.12.2017, 11:33
jkr jkr вне форума
Интересующийся
Отправить личное сообщение для jkr Посмотреть профиль Найти все сообщения от jkr
 
Регистрация: 11.12.2017
Сообщений: 13

В итоге, есть два промежуточных решения, которые хотелось бы совместить.
1. Скрипт, который меняет изображения по Select-у:
<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>

2. Действие внутри самого Select-а, которое отправляет Value в Input:
<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" />

Вопрос в том, как это совместить. Можно ли действие из пункта 2 впихнуть в скрипт №1?
Ответить с цитированием
  #3 (permalink)  
Старый 12.12.2017, 11:58
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от jkr
Можно ли действие из пункта 2 впихнуть в скрипт №1?
Как вариант...

<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>
Ответить с цитированием
  #4 (permalink)  
Старый 12.12.2017, 12:14
jkr jkr вне форума
Интересующийся
Отправить личное сообщение для jkr Посмотреть профиль Найти все сообщения от jkr
 
Регистрация: 11.12.2017
Сообщений: 13

Отлично, спасибо Вам, Добрый Человек!
Ответить с цитированием
  #5 (permalink)  
Старый 18.12.2017, 14:59
jkr jkr вне форума
Интересующийся
Отправить личное сообщение для jkr Посмотреть профиль Найти все сообщения от jkr
 
Регистрация: 11.12.2017
Сообщений: 13

Ещё пара вопросов, ответов на которые я так и не нарыл в Интернетах:
<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>

1. Как бы добавить в скрипт динамическое изменение адреса ссылки?
2. В таком виде в Input Artikul добавляется (вернее дополняется) значение второго (и последующих) селекта при каждом его изменении, можно ли сделать, чтобы оно не добавлялось, а заменялось, но не полностью, а только та часть, которая добавляется конкретным селектом?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JS, <SELECT> заполнение bma2004 Общие вопросы Javascript 6 13.11.2016 13:48
Валидация форм на заполнение Junior Events/DOM/Window 1 07.03.2015 18:12
Заполнение таблицы Hisot Элементы интерфейса 33 15.07.2013 21:16
Проверка формы на заполнение ybiza Элементы интерфейса 3 03.11.2010 22:28
Заполнение справочника Андрей Параничев Статьи, справочник 3 29.02.2008 18:11