Comment je peux retirer des champs de formulaire ?

**keokaz** · 26/05/2012, 11h30

Bonjour, j'ai un formulaire à remplir, il contient le nom d'un contact et son numéro de téléphone.
On a aussi ajouter un lien qui permet d'ajouter un autre téléphone.

voici le code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
{% extends "KodAnnuaireBundle::lay1.html.twig" %}
 
{% block entete%}
  {% include "KodAnnuaireBundle:Repertoire:headerAnnuaire.html.twig" %}
{% endblock%}
 
{% block body %}
 
<form action="{{ path('ajouter_contact') }}" method="post" {{ form_enctype(form) }}>
 
<!-- Les erreurs générales du formulaire. -->
{{ form_errors(form) }}
<div>
    {{ form_label(form.nom, "nom") }}
    {{ form_errors(form.nom) }}
    {{ form_widget(form.nom) }}
</div>
<div>
    {{ form_label(form.prenom, "prenom") }}
    {{ form_errors(form.prenom) }}
    {{ form_widget(form.prenom) }}
</div>
<div>
    {{ form_label(form.email, "email") }}
    {{ form_errors(form.email) }}
    {{ form_widget(form.email) }}
</div>
 
<h3>numéro de téléphone</h1>
<div>
    {{ form_label(form.phones, "Telephone") }}
    {{ form_errors(form.phones) }}
    {{ form_widget(form.phones) }}
</div>
 
<input id="submit_phone" type="submit" />
        <a href="#" id="add_phone">Ajouter un telelphone</a><br/>
       <a href="#" id="remove_phone" title="" onclick="remove_phone()">Retirer</a>
{{ form_rest(form) }}
 
</form>
 
<script type="text/javascript">
$(document).ready(function() 
{
    var $container = $('#kod_annuaire_contacttype_phones');
 
 
    function add_phone() 
    {
        index = $container.children().length;
        $container.append(
        $($container.attr('data-prototype').replace(/\$\$name\$\$/g, index))
        );
    }
    
    function remove_phone() 
    {
         $("#add_phone > *:last").remove();
    }
        
    if($container.children().length == 0) {
        add_phone();
    }
        
 
    $('#add_phone').click(function() {
        add_phone();
    });
    
 
});
    </script>
 
 
{% endblock%}

voici ce que cela produit en code source

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
 
<form action="/Sfy2/web/app_dev.php/test" method="post" >
 
<!-- Les erreurs générales du formulaire. -->
 
<div>
    <label for="kod_annuaire_contacttype_nom" class=" required">nom</label>
 
    <input type="text" id="kod_annuaire_contacttype_nom" name="kod_annuaire_contacttype[nom]" required="required" maxlength="60" />
</div>
<div>
    <label for="kod_annuaire_contacttype_prenom" class=" required">prenom</label>
 
    <input type="text" id="kod_annuaire_contacttype_prenom" name="kod_annuaire_contacttype[prenom]" required="required" maxlength="60" />
</div>
<div>
    <label for="kod_annuaire_contacttype_email" class=" required">email</label>
 
    <input type="text" id="kod_annuaire_contacttype_email" name="kod_annuaire_contacttype[email]" required="required" maxlength="255" />
</div>
 
<h3>numéro de téléphone</h1>
<div>
    <label class=" required">Telephone</label>
 
    <div id="kod_annuaire_contacttype_phones"
    data-prototype="&lt;div&gt;&lt;label class=&quot; required&quot;&gt;$$name$$&lt;/label&gt;&lt;
div id=&quot;
kod_annuaire_contacttype_phones_$$name$$&quot;&gt;&lt;div&gt;&lt;
label for=&quot;kod_annuaire_contacttype_phones_$$name$$_numero&quot;
 class=&quot; required&quot;&gt;Numero&lt;/label&gt;&lt;
input type=&quot;text&quot; 
id=&quot;kod_annuaire_contacttype_phones_$$name$$_numero&quot; name=&quot;kod_annuaire_contacttype[phones][$$name$$][numero]&quot; required=&quot;required&quot; 
maxlength=&quot;20&quot; /&gt;&lt;/div&gt;&lt;div&gt;&lt;
label for=&quot;kod_annuaire_contacttype_phones_$$name$$_techno&quot; 
class=&quot; required&quot;&gt;Techno&lt;/label&gt;&lt;
input type=&quot;text&quot; id=&quot;kod_annuaire_contacttype_phones_$$name$$_techno&quot; 
name=&quot;
kod_annuaire_contacttype[phones][$$name$$][techno]&quot; 
required=&quot;required&quot; 
maxlength=&quot;30&quot; /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;"></div>
</div>
 
<input id="submit_phone" type="submit" />
        <a href="#" id="add_phone">Ajouter un telelphone</a><br/>
       <a href="#" id="remove_phone" title="" onclick="remove_phone()">Retirer</a>
<input type="hidden" id="kod_annuaire_contacttype__token" name="kod_annuaire_contacttype[_token]" value="21a70efc4ba39f45f482780ce6adc6337925c26d" />
 
</form>
 
<script type="text/javascript">
$(document).ready(function() 
{
    var $container = $('#kod_annuaire_contacttype_phones');
 
 
    function add_phone() 
    {
        index = $container.children().length;
        $container.append(
        $($container.attr('data-prototype').replace(/\$\$name\$\$/g, index))
        );
    }
    
    function remove_phone() 
    {
         $("#add_phone > *:last").remove();
    }
        
    if($container.children().length == 0) {
        add_phone();
    }
        
 
    $('#add_phone').click(function() {
        add_phone();
    });
    
 
});
    </script>

grâce à l'attribut au data-prototype, en cliquant sur ajouter on actionne la fonction add_phone() et on obtient des champs à remplir supplémentaire.

ce que j'essaye de faire c'est de retirer ces champs dans le cas ou la personne s'est trompé.

mais la je n'y suis pas arrivé avec ma pauvre fonction remove.

comment je dois faire pour y arriver

je vous remercie d'avance pour un coup de main

**SpaceFrog** · 26/05/2012, 15h35

vu la tête du code source ... tu as visiblement un problème ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
    <div id="kod_annuaire_contacttype_phones"
    data-prototype="&lt;div&gt;&lt;label class=" required"&gt;$$name$$&lt;/label&gt;&lt;
div id="
kod_annuaire_contacttype_phones_$$name$$"&gt;&lt;div&gt;&lt;

ça l'étonnerais fort que le navigateur comprenne l'id là ...

**keokaz** · 26/05/2012, 15h45

merci de m'avoir répondu

j'ai repris mais cette voir ci avec firebug, c'est plus lisible, c'est peut être à cause de l'encodage

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<div id="kod_annuaire_contacttype_phones" data-prototype="<div>
<label class=" required">$$name$$</label>
<div id="kod_annuaire_contacttype_phones_$$name$$"><div>
<label for="kod_annuaire_contacttype_phones_$$name$$_numero" class=" required">Numero</label>
<input type="text" id="kod_annuaire_contacttype_phones_$$name$$_numero" name="kod_annuaire_contacttype[phones][$$name$$][numero]" required="required" maxlength="20" />
</div><div><label for="kod_annuaire_contacttype_phones_$$name$$_techno" class=" required">Techno</label>
<input type="text" id="kod_annuaire_contacttype_phones_$$name$$_techno" name="kod_annuaire_contacttype[phones][$$name$$][techno]" required="required" maxlength="30" /></div>
</div></div>">

c'est vrai que c'est plus clair

**SpaceFrog** · 26/05/2012, 16h07

Pour retirer un élément il te suffit de le selectionner par son id pour en faire un remove()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#idobj').remove()

**keokaz** · 26/05/2012, 16h33

j'ai essayer cela:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
 
<input id="submit_phone" type="submit" />
        <a href="#" id="add_phone">Ajouter un telelphone</a><br/>
<!--**** on supprime la partie du formulaire ****-->
       <a href="#" id="remove_phone" title="" onclick="remove_phone()">Retirer</a>
 
 
{{ form_rest(form) }}
 
</form>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<script type="text/javascript">
$(document).ready(function() {
  var $container = $('#kod_annuaire_contacttype_phones');
 
 
  function add_phone() {
      index = $container.children().length;
 
      $container.append(
       $($container.attr('data-prototype').replace(/\$\$name\$\$/g, index))
    );
}
 
  function remove_phone(){
<!--**** on supprime la div ****-->
     $('#kod_annuaire_contacttype_phones').remove()
    }
 
  if($container.children().length == 0) {
     add_phone();
}
 
 
  $('#add_phone').click(function() {
      add_phone();
  });
});
 </script>
 
 
{% endblock%}

j'ai une erreur : remove_phone is not defined

**SpaceFrog** · 26/05/2012, 19h25

Pourquoi declares tu les fonctions dans le ready ?

**keokaz** · 27/05/2012, 09h08

j'ai retirer le ready

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
        <a href="#" id="add_phone">ajouter telphone</a>
        <a href="#" id="del_phone">retirer telphone</a>
/*****************/
    $(document).html(function() 
    {
        /*******************TELEPHONE**************/
        var $phone = $('#kod_annuaire_contacttype_phones');        
        function add_phone() 
        {
            index = $phone.children().length;
 
             $phone.append($($phone.attr('data-prototype').replace(/\$\$name\$\$/g, index)));
        }
 
 
        if($phone.children().length == 0){ add_phone(); }
        $('#add_phone').click(function(){add_phone();});
 
        function del_phone() 
        {
             $("#add_phone > *:last").remove();
        }
 
        $('#del_phone').click(function(){del_phone();});
 
        /*******************ADRESSE**************/
        var $adresse = $('#kod_annuaire_contacttype_adresses');        
        function add_adresse() 
        {
            index = $adresse.children().length;
             $adresse.append($($adresse.attr('data-prototype').replace(/\$\$name\$\$/g, index)));
        }
 
        if($adresse.children().length == 0){add_adresse(); }
        $('#add_adresse').click(function(){add_adresse();});
    });

ma fonction del_phone n'a pas fonctionner

Comment je peux retirer des champs de formulaire ?

jQuery

Discussions similaires

Partager

Partager