Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Клонируем input checkbox значение name (https://javascript.ru/forum/jquery/64513-kloniruem-input-checkbox-znachenie-name.html)

aleksandr-n 17.08.2016 01:25

Клонируем input checkbox значение name
 
Всем привет нужна помощь сам сильно не владею javascript в процессе изучения.
Нужно checkbox который по клику сделает clon значения name и сможет передать его в другой input в атрибут value без лишних элементов HTMl и при этом нужно чтоб были классы там чекбоксы будут множественные.

Мне удалось найти подходящий javascript для этой задачи но там есть проблема то что он делает клон и передает его в элемент label, а мне надо чтоб был чистое текстовое значение name.

Пробовал сам передать в input но получалась ерунда у меня туда по подали только элементы HTML
http://prntscr.com/c6m778

Прошу Вас специалисты javascripta помогите очень надо.

<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>

<div id="area">
<input type="checkbox" /> <label>1</label>
<input type="checkbox" /> <label>2</label>
<input type="checkbox" /> <label>3</label>
<input type="checkbox" /> <label>4</label>
<input type="checkbox" /> <label>5</label>
<input type="checkbox" /> <label>6</label>
<input type="checkbox" /> <label>7</label>
<input type="checkbox" /> <label>8</label>
<input type="checkbox" /> <label>9</label>
</div>

<div id="clones">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

<script type="text/javascript">
$('#area input:checkbox').each(function (i, g) {
	this.onchange = function () {
		if (this.checked) {
			$('#clones span').eq(i).html($(g).next().clone());
		} else {
			$('#clones span').eq(i).empty();
		}
	}
});
</script>

рони 17.08.2016 01:41

aleksandr-n,
не осилил вашего описания.

aleksandr-n 17.08.2016 07:13

Цитата:

Сообщение от рони
не осилил вашего описания.

Извиняюсь вы не поняли суть моего описания?

aleksandr-n 17.08.2016 08:17

Клонируем input checkbox со значением name
 
Хочу ещё раз описать суть задачи.
По хорошему нужно чтоб работало так.
Кликаем по checkbox(сам) при клике создаётся клон input checkbox со значением name.

Клон (input checkbox со значением name) должен появится в той области где я ему укажу.

После того как были созданы если их много или один клон по клику на кнопку submit нужно передать значение клона name в один input его атрибут value, так чтоб value попали только чистый текст значения name без всяких элементов HTML тегов.

Я нашёл один скрипт который меня удовлетворяет на половину его работы. Он создаёт клоны там где мне нужно, но потом я не могу взять и передать эти клоны в другой input в атрибут value.

Вот скриншот того что у меня получилось.
http://prntscr.com/c6pnhu
Старался расписать как можно подробней надеюсь что кто-то сможет мне помочь решить эту задачу.

Demo можно увидеть здесь
http://javascript.ru/forum/jquery/96...ehlementy.html
<script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script>

<div id="area">
<input type="checkbox" /> <label>1</label>
<input type="checkbox" /> <label>2</label>
<input type="checkbox" /> <label>3</label>
<input type="checkbox" /> <label>4</label>
<input type="checkbox" /> <label>5</label>
<input type="checkbox" /> <label>6</label>
<input type="checkbox" /> <label>7</label>
<input type="checkbox" /> <label>8</label>
<input type="checkbox" /> <label>9</label>
</div>

<div id="clones">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

<script type="text/javascript">
$('#area input:checkbox').each(function (i, g) {
	this.onchange = function () {
		if (this.checked) {
			$('#clones span').eq(i).html($(g).next().clone());
		} else {
			$('#clones span').eq(i).empty();
		}
	}
});
</script>

Strongman 17.08.2016 08:37

Цитата:

Сообщение от aleksandr-n
Кликаем по checkbox(сам) при клике создаётся клон input checkbox со значением name.

- что значит клон <INPUT type="checkbox">, нужно создать еще один инпут? createNode? Или дописать в документ <INPUT type="checkbox">?
Что значит значение name? Цифры 1,2,3,4,5,6,7,8,9? Если цифры, то это innerHTML в теге <label>, а не name.

aleksandr-n 17.08.2016 09:13

Цитата:

Сообщение от Strongman
- что значит клон <INPUT type="checkbox">, нужно создать еще один инпут? createNode? Или дописать в документ <INPUT type="checkbox">?
Что значит значение name? Цифры 1,2,3,4,5,6,7,8,9? Если цифры, то это innerHTML в теге <label>, а не name.

Да нужно создать ещё один
<INPUT type="checkbox" name="Установка ванны">
при клике по чекам в таблице, в той области где мне нужно после чего по нажатию на кнопку отправить передать значение name в пустое поле
<input type="hidden" value="ТУТ ДОЛЖНО ПОЯВИТСЯ ЗНАЧЕНИЕ NAME ТОЛЬКО ТЕКСТ И НИЧЕГО БОЛЬШЕ" name="form_text_38">
которое по умолчанию скрыто hidden

Из того скрипта что мне удалось найти он да создаёт клон <label>, но со значением name, но не может передать это значение дальше по клику на кнопку отправить в пустое поле inputa

рони 17.08.2016 09:17

aleksandr-n,
да я не понял и не понимаю

aleksandr-n 17.08.2016 09:28

Цитата:

Сообщение от рони
aleksandr-n,
да я не понял и не понимаю

я вроде уже расписал все действия сделал скрин
http://prntscr.com/c6pnhu
как ещё мне объяснить.
1 Делаем клик на <INPUT type="checkbox"> получаем его значение name
2 Передаём в ту область которое нужно мне.
3 По нажатию на кнопку отправить эти значения клонов name передать в пустое поле которое по умолчанию скрыто.

laimas 17.08.2016 13:02

Цитата:

Сообщение от aleksandr-n
<INPUT type="checkbox" name="Установка ванны">

Цитата:

Сообщение от aleksandr-n
<input type="hidden" value="ТУТ ДОЛЖНО ПОЯВИТСЯ ЗНАЧЕНИЕ NAME ТОЛЬКО ТЕКСТ И НИЧЕГО БОЛЬШЕ" name="form_text_38">

А что лень сделать сразу <INPUT type="checkbox" name="form_text_38" value="Установка ванны">, зачем дублировать поля формы другими полями?

Strongman 17.08.2016 17:37

Если честно, надоел уже это JavaScript. Записывал 2 раза в обработчик события onchange функцию, но эффект всегда один и тот же: пока идет запись видно что в строке-переменной onchange записывается функция, как только выходит из записи сразу же там ничего нет(null, если быть точным).
2 способа записи:
1)
$('#area input:checkbox').each(function(i, v){
document.body.innerHTML += "<br>Прошли по "+i+"-му элементу";

	this.onchange = function OnChangeFunction(){
	        document.body.innerHTML += "Изменен "+i+"-ый checkbox";
		if(this.checked){
			$('#clones span')[i].html = $('label')[i].html;
			document.body.innerHTML += "Выделен "+i+"-ый checkbox";
		} 
	}
});

2)
for(prop in mi)
{
//foreach
mi[prop].onchange = function mo()
    {
    document.body.innerHTML += "Изменен "+prop+"-ый checkbox";        
    }
}

Может кто-нибудь скажет почему так происходит, т.е. почему после окончания записи в строке-переменной onchange находится null???


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