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 установлен должным образом, чтобы его можно было передать на страницу 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> 
<? } ?> 

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