Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   копирование значения селект в поле инпут (https://javascript.ru/forum/jquery/62937-kopirovanie-znacheniya-selekt-v-pole-input.html)

d138p 08.05.2016 09:29

копирование значения селект в поле инпут
 
может кто сможет поомчь, ситуация такая : есть форма с динамическими полями, нужно значения выбранного селекта перенести в поле инпут. вот код но он работает только при : selects.change(function () - но данный метод не подходит для динамических полей.....

пробую так, но он не работает((((:
var selects = $('.forname'),
title= $('#adres');
$('body').on('click', "option", function(){
{
var values = [];

selects.each(function ()
{
values.push($(this).find(':selected').text());
});
title.val(values.join(' '));
});




.forname - класс селектов с которым работаю.
#adres - id инпут поля куда должны выводиться значения.

laimas 08.05.2016 10:04

Цитата:

Сообщение от d138p
но данный метод не подходит для динамических полей

С чего вдруг?

d138p 08.05.2016 10:11

laimas,
я особо не силен в этом, может скажете как можно сделать чтоб он работал? а то уже несколько дней мучаюсь

laimas 08.05.2016 10:20

Цитата:

Сообщение от d138p
может скажете как можно сделать чтоб он работал

А как сделать, так нужно видеть чего нужно сделать. К примеру selects.each... значит списки добавляется в форму, а как, где код? Форма уже имеется на странице, она сама не добавляемая динамически?
Да и вообще, что в итоге и как будет передано на сервер - сама форма и непосредственно или асинхронная отправка только выбранных полей? Это к тому, что в первом случае переносить данные из одних полей в другие не имеет смысла.

Показывайте код, разъясняйте, тогда и ответ адекватный будет.

d138p 08.05.2016 10:27

<div class="djform_field">                  	              	
                	<?php
                	$title_char_limit = $par->get('title_char_limit','0'); 
                	if($title_char_limit>0){
                		$input_title_limit =' onkeyup="titleLimit('.$title_char_limit.');" ';
                	}else{
                		$input_title_limit ='';
                	} ?>
                    <input name="adres" type="text" spellcheck="true" class="pole" id="adres" maxlength="250" value="" />
                

				
				
				</div>

---------- инпут куда должно попоадать значение селект----------

<div id="after_cat_0"></div>
				<script type="text/javascript">
					var cats=new Array();
					
				<?php
				$cat_sel = '<select style="width:210px" class="forname" name="cats[]" id="cat_0" onchange="new_cat(0,this.value);getFields(this.value);">';
				$parent_id=0;	
								
				$cat_req = array();
				foreach($this->cats as $l){
					if($l->ads_disabled){
						$cat_req[$l->id]=1;
					}
				}
				
				foreach($this->cats as $l){
					if($parent_id!=$l->parent_id){
						$cat_sel .= '</select>';
						echo "cats[$parent_id]='$cat_sel<div id=\"after_cat_$parent_id\"></div>';";
						$parent_id=$l->parent_id;
						$cl_select = '';
						if($l->ads_disabled || isset($cat_req[$parent_id])){
							$cl_select = ' class="forname" ';						
						}
						$cat_sel = '<div style="clear:both"></div><select '.$cl_select.' style="width:210px" name="cats[]" id="cat_'.$l->parent_id.'" onchange="new_cat('.$parent_id.',this.value);getFields(this.value);">';
						$cat_sel .= '<option value="p'.$parent_id.'">'.JTEXT::_('COM_DJCLASSIFIEDS_CATEGORY_SELECTOR_EMPTY_VALUE').'</option>';		
					}	
					if($l->price>0){
						$l->price = $l->price/100;						
						$l->name .= ' ('.DJClassifiedsTheme::priceFormat($l->price,$unit_price);
							if($l->points>0 && $points_a){
								$l->name .= ' - '.$l->points.JTEXT::_('COM_DJCLASSIFIEDS_POINTS_SHORT');		
							}	
						$l->name .= ')'; 
					}
					$cat_sel .= '<option value="'.$l->id.'">'.str_ireplace("'", "&apos;", $l->name).'</option>';
				}
				$cat_sel .= '</select>';	
				echo "cats[$parent_id]='$cat_sel<div id=\"after_cat_$parent_id\"></div>';";
				
				?>


-----------------это я так понимаю и есть селект который динамический

d138p 08.05.2016 10:29

$('body').on('click', "option", function(){
     
	   var 
	   values = $(this).text();
	 alert('Вы нажали на элемент с текстом - «' + values + '»');

решил проверить вот так, я смог получить значение поля динамического. вот как его правильно передать в инпут, для меня загадка

laimas 08.05.2016 10:34

Вы показываете РНР код формирующий список, то есть то, что увидит пользователь запросив страницу. Все, сервер отработал и ушел спать, а клиент получит статичный контент. Вопрос - с чего вы решили, что списки в форму добавляются динамически?

d138p 08.05.2016 10:43

значит не динамически. я только начинаю это все осваивать, по-этому и попросил помощи. так может подскажете как правильно использовать скрипт чтоб получить желаемый результат?

laimas 08.05.2016 11:03

Если только осваиваем, то жмем F12 и в отладчике смотрим исходный html-код страницы. Если форма ваша и ее списки на ней, то нет никакой динамики их добавления. Следовательно достаточно будет при загрузке документа установить обработчик (и) необходимые.

$(function() {
    $('.forname').on('change', "select", function() {
        var a = $.map($('.forname').find('option:selected'), function(i) {
            return i.text
        })
        //а - массив содержащий значения выбранных опций
    });
});


В данном случае обработка изменений списков делегируется форме, что работало бы и в случае если бы форма была на странице, а списки динамически добавлялись. Но можно было написать и $('select').change(function ..., если списки уже на странице.

Примечание: метод $.map нужен, если списков действительно несколько, что по коду явно так. Но, каждая опция списка имеет значение идентификатора - p'.$parent_id, которые сервер и будет обрабатывать получая форму, то есть передавать при этом тексты выбранных опций это и мусор, и глупо. Текст их сервер и без клиента знает, а для информации клиента что он выбрал служат сами списки. Если охота "приукрасить" это или списков много, то тексты можно помещать не в поле ввода, а любой html элемент.

d138p 08.05.2016 11:14

laimas,
спасибо. сейчас осталось разобраться как передать значения массива в поле инпут

laimas 08.05.2016 11:28

Цитата:

Сообщение от d138p
сейчас осталось разобраться как передать значения массива в поле инпут

Да не проблема, только сначала поясните зачем это нужно?

d138p 08.05.2016 12:55

laimas,
что-то вообще не получается вывести текст в инпут.... не поможете еще разок?

laimas 08.05.2016 13:00

Вы не ответили для чего это нужно, ибо либо это полная хрень, либо если нужны тексты, а не идентификаторы, то почему они не в опциях в качестве значений?

А поместить это можно так, сразу, и коли это адрес, значит через запятую:

$(function() {
   var o = $('.forname').on('change', "select", function() {
        $('#adres').val(o.find('option:selected'), function(i) {
            return i.text
        }).join(', '))
    });
});


И адрес на английском, это address )

d138p 08.05.2016 13:07

смыс в том, что это будет использоваться в поле добавления объявлений. т.е чтоб заголовок так скажем генерировался автоматически по названиям категорий. http://автокоми.рф/index.php/novoe-ob-yavlenie можете посмотреть.

d138p 08.05.2016 13:12

laimas,
поместил. все равно не работает(((

laimas 08.05.2016 13:18

Это не повод впихивать в поле ввода тексты выбранных опций. Для формирования чего угодно, а не только заголовков, списком как раз и передается уникальный идентификатор как владелец этого текста. А сервер принимая данные от клиента, и тем более если его выбор подлежит записи в базу, просто обязан проверить данные пришедшие. А проверить на 100%, что вам не фуфло подсунули или еще чего страшнее, как раз по идентификаторам, а не по тексту который впихули в какое то поле формы.

Зная выбор пользователя, то есть значения тех же списков, серверу в любое время раз плюнуть получить их тексты и сформировать заголовки и все что угодно. Для этого и существуют СУБД, а не для "городить огород".

d138p 08.05.2016 13:24

эх знать бы еще как это сделать

laimas 08.05.2016 13:27

Ошибку при правке допустил, заменить строки 3 - 5 на

$('#adres').val($.map(o.find('option:selected'), function(i) {
            return i.text
        }).join(', '))

laimas 08.05.2016 13:28

Цитата:

Сообщение от d138p
эх знать бы еще как это сделать

Запросами к базе.

d138p 08.05.2016 13:39

я замучал уже наверное.... но все равно не работает


<script type="text/javascript">

$(function() {
   var o = $('.forname').on('change', "select", function() {
$('#adres').val($.map(o.find('option:selected'), function(i) {
            return i.text
        }).join(', '))
    });
});



		
		</script>

laimas 08.05.2016 13:42

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script> 
$(function() {
   var o = $('.forname').on('change', "select", function() {
        $('#adres').val($.map(o.find('option:selected'), function(i) {
            return i.text
        }).join(', '))
    });
});
</script>     
</head> 
<body>
<form class="forname">
 <select name="as[]">
 <option>Text 1</option>
 <option>Text 2</option>
 </select>
 <select name="as[]">
 <option>Sub 1</option>
 <option>Sub 2</option>
 </select>
 <input id="adres" />
</form>
</body> 
</html>


Работает?

d138p 08.05.2016 14:01

тут работает. у меня нет. возможно потому что у меня селекты лежат в диве, а у вас форм.

laimas 08.05.2016 14:19

DIV тут не причем. А вот с селекторами, у вас в примере обращение к форме по имени класса forname, а по ссылке такого нет, есть id, если ссылка это ваша страница. Кроме того, по ссылке выбор в списке, это асинхронные запросы к серверу, которые завершаются ошибкой.

В общем надо с кодом реальным разбираться.

d138p 08.05.2016 14:30

ну это был готовый компонент для джумлы dj classfieds сам я там ничего не правил....

d138p 08.05.2016 14:31

спасибо огромное за помощь. буду думать разбираться. изучать.


Часовой пояс GMT +3, время: 17:08.