Форум

Hadouken · #1 (**permalink**) 05.08.2018, 19:32

Доброго времени суток! в JS не силен, поэтому обращаюсь за помощью к знатокам. Имеется форма в модальном окне, вне этой формы есть чекбоксы в виде <input><label><span>Название</span></label>, таких инпутов много, и при клике на него я забираю значение из span и добавляю его в невидимый input в форме через запятую.
Выглядит следующим образом:
$('.hide-content label').click(function(){
$s = $(this).find('.name-sale').html();
$('.modal-dom #type-home').val($('.modal-dom #type-home').val() + $s + ",");
});
Но не получается стирать из этого инпута то значение, которое добавил, при повторном клике на тот же инпут, пробовал использовать toggle, но почему-то он просто убирает и добавляет либо к спану, либо к тому невидимому инпуту display:none. Помогите, пожалуйста, как можно реализовать такую задачу?

рони · #2 (**permalink**) 05.08.2018, 20:00

Hadouken,
идите циклом по всем input:checked и собирайте данные

Hadouken · #3 (**permalink**) 05.08.2018, 20:04

рони,
Это сначала мне нужно пройтись циклом по всему списку, и делать проверку на :checked или как?

laimas · #4 (**permalink**) 05.08.2018, 20:13

Сообщение от Hadouken

забираю значение из span и добавляю его в невидимый input в форме через запятую.

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

Hadouken · #5 (**permalink**) 05.08.2018, 20:18

laimas,
Проблема, что в значении value, указано другое значение, которое используется для другой функции. И чтобы просто передать эти значения, нужна кнопка submit.

рони · #6 (**permalink**) 05.08.2018, 20:26

Hadouken,
сделайте минимальный html

Hadouken · #7 (**permalink**) 05.08.2018, 20:41

<div class="container hide-content">
<form>
	<div class="group">
		<input class="sc-service-checkbox price_pick" id="check11" type="checkbox" value="2222">
		<label for="check11">
			<span class="name-sale">Значение 1</span>
			<div class="price">
				<span class="sc-service-price">2222</span>
			</div>		
		</label>
	</div>	
	<div class="group">
		<input class="sc-service-checkbox price_pick" id="check12" type="checkbox" value="3333">
		<label for="check12">
			<span class="name-sale">Значение 2</span>
			<div class="price">
				<span class="sc-service-price">3333</span>
			</div>		
		</label>
	</div>
</form>
</div>
<div class="modal">
<form action="dom-iz-brusa-3" method="post">
<div class="modal--view__price">
<span class="modal--view__head">Выберите комплектацию</span> 
<ul>
	<li>
		<input class="price_pick" id="srub-" type="radio" name="komplektaciya[]">
		<label for="srub-">
		<span class="name-sale">Значение 1</span>
		<div class="price">
			<span class="sc-service-price">Цена</span>
		</div>
		</label>
	</li>
</ul>
<div class="row">
    <input name="formid" type="hidden" value="Проект ">
    <input type="hidden" id="type-home" value="">
	<input class="btn" type="submit" name="proj-submit" value="Позвоните мне">
</div>
</form>
</div>
<script>
$('.hide-content label').click(function(){
	$s = $(this).find('.name-sale').html();
	$('.modal-dom #type-home').val($('.modal-dom #type-home').val() + $s + ",");
});
</script>

рони · #8 (**permalink**) 05.08.2018, 21:06

Hadouken,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>

<body>
<div class="container hide-content">
<form>
	<div class="group">
		<input class="sc-service-checkbox price_pick" id="check11" type="checkbox" value="2222">
		<label for="check11">
			<span class="name-sale">Значение 1</span>
			<div class="price">
				<span class="sc-service-price">2222</span>
			</div>
		</label>
	</div>
	<div class="group">
		<input class="sc-service-checkbox price_pick" id="check12" type="checkbox" value="3333">
		<label for="check12">
			<span class="name-sale">Значение 2</span>
			<div class="price">
				<span class="sc-service-price">3333</span>
			</div>
		</label>
	</div>
</form>
</div>
<div class="modal">
<form action="dom-iz-brusa-3" method="post">
<div class="modal--view__price">
<span class="modal--view__head">Выберите комплектацию</span>
<ul>
	<li>
		<input class="price_pick" id="srub-" type="radio" name="komplektaciya[]">
		<label for="srub-">
		<span class="name-sale">Значение 1</span>
		<div class="price">
			<span class="sc-service-price">Цена</span>
		</div>
		</label>
	</li>
</ul>
<div class="row">
    <input name="formid" type="hidden" value="Проект ">
    <input id="type-home" value="тут будет значение checkbox">
	<input class="btn" type="submit" name="proj-submit" value="Позвоните мне">
</div>
</div>
</form>
</div>
<script>
$('.hide-content input').change(function() {
    var s = $.map($('.hide-content input:checked + label .name-sale'), function(el) {
        return el.textContent
    });
    $('#type-home').val(s);
});
</script>

</body>

</html>

Hadouken · #9 (**permalink**) 05.08.2018, 21:11

рони,
Блин, огромное спасибо) оказывается все так просто было

Форум

Справочник

Discord чат

Курсы javascript