jQuery: find id of of a form field

Question

I am creating a dynamic form where the user will have the ability to add a set of inputs to the form. The html looks like this:

<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>

When the user clicks the link with the id of "addCredit" the following jQuery script is called:

$(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;
    });
});

The jQuery function queries a php file called "addCredit.php", which looks like this:

<?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="">

My problem is getting the javascript variable $credInt set properly so that it can be sent to the addCredit.php page and update the form fields accordingly. I also need to be sure that every time the form is appended, the next value sent is the incremented value.

Any thoughts on how I might accomplish this? Thank you for your help.

Answer 1

This is the wrong way of doing it; PHP can handle array syntax in a variable name. This makes it much easier to handle. It is also unnecessary to call the server to clone the form. You should name your fields like this:

<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>

And then your Javascript can be like this:

$(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;
    });
});

When the form is finally sent to the server, because the variables are in the format of name[] PHP will recognize they are an array and then you can do this:

<? 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>
<? } ?>

Obviously this is just displaying it as an example, but you can then save/update/whatever with it.