JQuery: найти идентификатор поля формы

Question

Я создаю динамическую форму, в которой у пользователя будет возможность добавить набор входных данных в форму. HTML выглядит так:

<form>
    <input id="title1" class="title" name="title1"  type="text" value="">
    <input id="productionCompany1" name="productionCompany1" type="text" value="">
    <input id="year1" name="year1" type="text" value="">
    <input id="role1" name="role1" type="text" value="">
<div id="newCredit">&nbsp;</div>
<a href="#" id="addCredit">add another credit</a>
</form>

Когда пользователь щелкает ссылку с идентификатором «addCredit», вызывается следующий скрипт jQuery:

$(document).ready(function() {
    var $ac = $('#addCredit');
    $ac.click(function() { 
/* the following two lines are where the problem lies? */
        var $credInt = $(this).prev(".title"); 
        $.get("addCredit.php", {num: $credInt},
        function(data){
        $('#newCredit').append(data);});
        return false;
    });
});

Функция jQuery запрашивает php-файл с именем «addCredit.php», который выглядит следующим образом:

<?php 
$int = $_GET["num"];
$int = substr($int, -1); 
$int++;
?>
<input id="title<?php echo $int;?>"  class="title" name="title<?php echo $int;?>"  type="text" value="">
<input id="productionCompany<?php echo $int;?>" name="productionCompany<?php echo $int;?>" type="text" value="">
<input id="year<?php echo $int;?>" name="year<?php echo $int;?>" type="text" value="">
<input id="role<?php echo $int;?>" name="role<?php echo $int;?>" type="text" value="">

Моя проблема в том, чтобы правильно установить переменную $ credInt javascript, чтобы ее можно было отправить на страницу addCredit.php и соответствующим образом обновить поля формы. Я также должен быть уверен, что каждый раз, когда форма добавляется, следующее отправленное значение является увеличенным значением.

Есть мысли о том, как мне это сделать? Спасибо за вашу помощь.

Answer 1

Это неправильный способ сделать это; PHP может обрабатывать синтаксис массива в имени переменной. Это делает его намного проще в обращении. Также нет необходимости вызывать сервер для клонирования формы. Вы должны назвать свои поля так:

<form>
    <div id="originalCredit">
    <input name="title[]"  type="text" value="">
    <input name="productionCompany[]" type="text" value="">
    <input name="year[]" type="text" value="">
    <input name="role[]" type="text" value="">
    </div>
    <a href="#" id="addCredit">add another credit</a>
</form>

И тогда ваш Javascript может быть таким:

$(function() {
    $('#addCredit').click(function() {
        var newCredit = $('#originalCredit').clone(); // create new set
        newCredit.find('input').val(''); // empty input fields
        $(this).before(newCredit); // append at the end
        return false;
    });
});

Когда форма наконец отправляется на сервер, поскольку переменные имеют формат name[] PHP распознает, что они являются массивом, и тогда вы можете сделать это:

<? foreach($_POST['title'] as $k => $v) { ?>
    Title: <?=$_POST['title'][$k]?><br>
    Company: <?=$_POST['productionCompany'][$k]?><br>
    Year: <?=$_POST['year'][$k]?><br>
    Role: <?=$_POST['role'][$k]?><br>
<? } ?>

Очевидно, это просто показывает его в качестве примера, но вы можете сохранить / обновить / что угодно с ним.