jQuery: find id d'un champ de formulaire

Question

Je crée un formulaire dynamique dans lequel l'utilisateur aura la possibilité d'ajouter un ensemble d'entrées au formulaire. Le code HTML ressemble à ceci:

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

Lorsque l'utilisateur clique sur le lien avec l'id de "addCredit" le script jQuery suivant est appelé:

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

La fonction jQuery interroge un fichier php appelé « addCredit .php », qui ressemble à ceci:

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

Mon problème est d'obtenir la variable javascript credInt de $ réglée correctement afin qu'il puisse être envoyé à la page addCredit.php et mettre à jour les champs de formulaire en conséquence. Je dois également être sûr qu'à chaque fois que le formulaire est ajouté, la prochaine valeur envoyée est la valeur incrémentée.

Des pensées sur comment je pourrais accomplir ceci? Merci de votre aide.

Answer 1

C'est la mauvaise façon de le faire; PHP peut gérer la syntaxe du tableau dans un nom de variable. Cela le rend beaucoup plus facile à gérer. Il est également inutile d'appeler le serveur pour cloner le formulaire. Vous devez nommer vos champs comme ceci:

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

Et puis votre Javascript peut ressembler à ceci:

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

Lorsque le formulaire est finalement envoyé au serveur, car les variables sont dans le format de name[] PHP reconnaîtra qu'ils sont un tableau et vous pouvez le faire:

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

Évidemment, cela est tout simplement l'afficher comme un exemple, mais vous pouvez ensuite enregistrer/mise à jour/whateve r avec ça.