jQuery : trouver l'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 que la variable javascript $credInt soit correctement définie afin qu'elle puisse être envoyée à la page addCredit.php et mettre à jour les champs du formulaire en conséquence. Je dois également m'assurer qu'à chaque fois que le formulaire est ajouté, la prochaine valeur envoyée est la valeur incrémentée.

Avez-vous une idée de la façon dont je pourrais y parvenir ? Merci de votre aide.

Answer 1

C'est la mauvaise façon de faire ; PHP peut gérer la syntaxe des tableaux dans un nom de variable. Cela rend la manipulation beaucoup plus facile. Il est également inutile d'appeler le serveur pour cloner le formulaire. Vous devriez 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 alors votre Javascript peut être comme ça :

$(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, parce que les variables sont au format de name[] PHP reconnaîtra qu'il s'agit d'un tableau et vous pourrez alors faire ceci :

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

Bien entendu, il ne s'agit que d'un exemple, mais vous pouvez ensuite l'enregistrer, le mettre à jour ou faire ce que vous voulez.