Показать сообщение отдельно
  #1 (permalink)  
Старый 28.09.2015, 20:24
Интересующийся
Отправить личное сообщение для amd3000 Посмотреть профиль Найти все сообщения от amd3000
 
Регистрация: 12.08.2014
Сообщений: 12

Обработка событий в динамической форме
Здравствуйте уважаемые форумчане.

Вобщем пишу для себя небольшой сайтик для бух учёта предпринимателей которых я обслуживаю.
С миру по нитке собрал форму и AJAX обработчик для неё.
На даном этапе пишу банковскую выписку, с одной строкой данных <div id="rows"> всё работает нормально, но мне этого мало, нужна динамическая форма с добавлением строк по мере необходимости. Сделал клонировавие строки с поиском и заменой всех элементов в строке с "name[ i ]" на "name[ i++ ]" функции addline() и rename(). Вроде получилось.

Но теперь стоит следующая задача:
как заставить функции обработки связаных списков select.js это всё хазяйство адекватно обрабатывать?
И тут у меня полный штопор, помогите разобратся с кодом JS, у меня с ним всё плохо, очень плохо.
Ну и собственно код HTML
<fieldset><div id="rows">
				<div class="row"><select id="plus[0]" name="plus[0]" disabled="disabled" required style="width:10%"><option disable selected value="">+ или -</option><option value="1">Приход</option><option value="0">Расход</option></select>
				<select id="expense[0]" name="expense[0]" disabled="disabled" required style="width:20%">
				<option disable selected value="">- Выбрать счёт-</option>
				<?php
				$result1 = mysql_query("SELECT id,exp_name FROM expenses",$db);
				$myrow1 = mysql_fetch_assoc($result1);
				do
				{
				?>
				<option value="<?php echo $myrow1['id'];?>"><?php echo htmlspecialchars($myrow1['id'].' - '.$myrow1['exp_name'],ENT_QUOTES, 'UTF-8');?></option>
				<?php
				}
				while ($myrow1 = mysql_fetch_assoc($result1)); ?>
				</select>
				<select id="sub1[0]" name="sub1[0]" disabled="disabled" required style="width:20%">
				<option>- Субконто 1 -</option></select>
				<select id="sub2[0]" name="sub2[0]" disabled="disabled" required style="width:20%">
				<option>- Субконто 2 -</option></select>
				<input type="text" name="summa[0]" id="suma[0]" placeholder="Сумmа" required style="width:7%">
				</div></div>
</fieldset>
<a href="#" onclick="return start();">Добавить нову строку</a>
<button type="submit">Создать</button>
</form>

JS код добавления новой строки с переименовыванием
]/* Вставлен в файл с формой index.php */
function addline()
	{
	var itm = document.getElementById("rows").lastChild;
	var cln = itm.cloneNode(true);
	document.getElementById("rows").appendChild(cln);
	}
	
     function rename()
	{
	var i;
	var x = document.getElementsByClassName("row");
	for (i = 0; i < x.length; i++) {
	var d = x[i].innerHTML;
	var two = d.replace(/\[\d+\]/gi,'['+i+']');
	document.getElementsByClassName("row")[i].innerHTML = two;
	}
	}
function start()
{
addline();
rename();
}

JS код обработчика связанных списков с передачей данный по AJAX
/* Файл select.js*/
$(document).ready(function () {
/* Эта функция работает с шапкой формы */
	$('#employer_id').change(function () {
		var employer_id = $(this).val();

		if (employer_id == '') {
			$('#bank').html('<option disable>- Выбрать счёт -</option>');
			$('#bank').attr('disabled', true);
			return(false);
			
		}
		$('#bank').attr('disabled', true);
		$('#bank').html('<option>Загрузка...</option>');

		var url = './modules/get.php';
		$.get(
			url,
			"employer_id=" + employer_id + "&select_type=bank", 
			function (result) {
				if (result.type == 'error') {
					alert('error');
					return(false);
				}
				else {
				var options = ''; 

					$(result.banks).each(function() {
					options += '<option value="' + $(this).attr('id') + '">' + $(this).attr('name_bank') + '</option>';
					});

					$('#bank').html('<option value="0" disable>- Выбрать счёт -</option>'+options);
					$('#bank').attr('disabled', false);
				}
			},
			"json"
		);
	});
	
	
/* Эта функция работает с шапкой формы */    
 	$('#bank').change(function () {
	var bank = $(this).val();
        if (bank == '') {
            $('#plus').html('<option disable>- + или - -</option>');
            $('#plus').attr('disabled', true);
            return(false);
        }
	else
	{
	$('#plus').attr('disabled', false);
	}

    }); 
/* Эта функция должна работать с масивом строк */     
    $('#plus').change(function () {
	var plus = $(this).val();
        if (plus == '') {
            $('#expense').html('<option disable>- + или - -</option>');
            $('#expense').attr('disabled', true);
            return(false);
        }
	else
	{
	$('#expense').attr('disabled', false);
	}

    }); 
/* Эта функция должна работать с масивом строк */
	$('#expense').change(function () {
        var expense = $(this).val();
        if (expense == '') {
            $('#sub1').html('<option disable>- Субконто 1 -</option>');
            $('#sub1').attr('disabled', true);
            return(false);
        }
        $('#sub1').attr('disabled', true);
        $('#sub1').html('<option>Загрузка...</option>');
        var url = './modules/get.php';      
        $.get(
            url,
            "expense=" + expense + "&select_type=expense",
 
            function (result) {
                if (result.type == 'error') {
                    alert('error');
                    return(false);
                }
                else {
                    var options = '';
                    $(result.sub1s).each(function() {
                        options += '<option value="' + $(this).attr('one') + '">' + $(this).attr('two') + '</option>';
                    });
 
                    $('#sub1').html('<option disable>- Субконто 1 -</option>'+options);
                    $('#sub1').attr('disabled', false);
                }
            },
            "json"
        );
    }); 
/* Эта функция должна работать с масивом строк */
	$('#sub1').change(function () {
	var sub1 = $(this).val();
        var sub1exp = $('#expense :selected').val();
	var emp = $('#employer_id :selected').val();
        if (sub1 == '') {
            $('#sub2').html('<option disable>- Субконто 2 -</option>');
            $('#sub2').attr('disabled', true);
            return(false);
        }
        $('#sub2').attr('disabled', true);
        $('#sub2').html('<option>Загрузка...</option>');
        var url = './modules/get.php';      
        $.get(
            url,
            "sub1=" + sub1 + "&select_type=sub1&sub1exp=" + sub1exp + "&emp=" + emp,
 
            function (result) {
                if (result.type == 'error') {
                    alert('error');
                    return(false);
                }
                else {
                    var options = '';
                    $(result.sub2s).each(function() {
                        options += '<option value="' + $(this).attr('one') + '">' + $(this).attr('two') + '</option>';
                    });
 
                    $('#sub2').html('<option disable>- Субконто 2 -</option>'+options);
                    $('#sub2').attr('disabled', false);
                }
            },
            "json"
        );
    }); 
});
Ответить с цитированием