Форум

Harmattan · #1 (**permalink**) 24.11.2016, 19:11

Добрый день. В js полный ноль. Много тем как подставить значение из селекта формы в input той же формы, но у меня немного другое.

Есть форма вида:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<form  action="" method="post" class="form-horizontal">
	<select class="col-xs-12 choise" name="choise" required>
		<option value="">Выберите пункт списка</option>
		<option value="Audi">Вариант 1</option>
		<option value="BMW">Вариант 2</option>
		<option value="Mercedes">Вариант 3</option>
		<option value="ВАЗ">Вариант 4</option>
		<option value="УАЗ">Вариант 5</option>
		<option value="Велосипед">Вариант 6</option>
	</select>

	Срок сдачи: через <input type="text" name="srok" class="days" disabled> дней
</form>

Хитрость заключается в том, что необходимо подставлять в input число в зависимости от выбранного селекта. К примеру, для BMW - это 10. Для велосипеда - 15. В идеале бы вообще чтобы подставлялось значение даты плюс определённое количество дней. К примеру, для BMW = текущая дата + 10 дней. Для ВАЗ = текущая дата + 10 дней, а для велосипеда = текущая дата + 15 дней. Я так понимаю, тут должен быть оператор case, но с синтаксисом не дружу. Помогите пожалуйста. Заранее спасибо.
------
UPD. Получилось сделать if'ами на jquery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
		function displayOtdel(){
			var srok = 0;
			var value = $(".choise").val();
			if(value == "BMW") srok = 15;
			if(value == "Велосипед") srok = 55;
			if(value == "ВАЗ") srok = 10;
			if(value == "Mercedes") srok = 7;
			if(value == "УАЗ") srok = 10;
			if(value == "AUDI") srok = 30;
			$("input.days").val(srok);
		}
		$("select").change(displayOtdel);
		displayOtdel();
	});
</script>
<select name="otdel" class="choisel">
	<option value=""></option>
	<option value="Велосипед">Велосипед</option>
	<option value="BMW">BMW</option>
	<option value="ВАЗ">ВАЗ</option>
	<option value="Mercedes">Mercedes</option>
	<option value="AUDI">AUDI</option>
	<option value="УАЗ">УАЗ</option>
</select>
<strong>Срок: через <input type="text" name="srok_end" class="days" size="11" value="" disabled><strong> дней</strong>

Но проблема в том, что jquery у меня должно вызываться в конце страницы. То есть после данного скрипта. Да и чувствую, что вариант с ифами не комильфо. Собственно, вопрос: можно ли как-нибудь сделать не на jquery и case'ом?

laimas · #2 (**permalink**) 24.11.2016, 19:37

Вообще, по уму, списки и прочие элементы оперируют не Audi, BMW м и.п., а уникальными идентификаторами, под которыми эти машинки хранятся в базе. А названия этих машинок как раз являются текстами опций списка.

Добавьте в опции значения периодов, вот так <option data-interval="10" value="BMW">Вариант 1</option>, и по изменению либо это значение в поле, либо с датой. Но вот что интересно - если сервер определяет эти интервалы дней для каждой опции списка (связаны по идентификатору), то он будет знать по выбранному в списке значению, какой интервал выбран, то есть слать ему еще и поле srok совсем не нужно. Для пользователя же его просто показывать на странице для информации, иначе то он может и свою циферь прислать.

Harmattan · #3 (**permalink**) 24.11.2016, 19:50

Но у меня эти значения в базе не хранятся. А вывести надо только единоразово: после отправки формы всё-равно новая дата покажется. То есть данный input нужен только для информации и нигде больше не используется.

laimas · #4 (**permalink**) 24.11.2016, 20:08

А если не используется, то зачем полю ввода имя srok_end? Убирайте имя и это поле не будет отправляться на сервер. Да и вообще, оно совсем не нужно:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>

</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script> 
$(function() {
    $('select').change(function() {
        if(this.value) $('#day_end').text($(this).find(':selected').data('days')) 
    })
});
</script>     
</head> 

<body>
<select name="otdel" class="choisel">
    <option data-days="10" value="">Выберите...</option>
    <option data-days="15" value="Велосипед">Велосипед</option>
    <option data-days="20" value="BMW">BMW</option>
    <option data-days="25" value="ВАЗ">ВАЗ</option>
    <option data-days="30" value="Mercedes">Mercedes</option>
    <option data-days="35" value="AUDI">AUDI</option>
    <option data-days="40" value="УАЗ">УАЗ</option>
</select>
<span id="day_end"></span>
</body> 
</html>

Форум

Справочник

Discord чат

Курсы javascript