Здравствуйте уважаемые форумчане.
Вобщем пишу для себя небольшой сайтик для бух учёта предпринимателей которых я обслуживаю.
С миру по нитке собрал форму и 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"
);
});
});
