php – jQuery: find id of of a form field – Education Career Blog

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.

,

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.

Leave a Comment