IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

Ajout intempestif d'un champ de formulaire


Sujet :

AJAX

  1. #1
    Membre éclairé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 577
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 577
    Points : 803
    Points
    803
    Par défaut Ajout intempestif d'un champ de formulaire
    Bonjour,

    J'utilise Ajax avec FormData. Pour une raison que je ne m'explique pas, dans le fichier de traitement (défini par la constante editFile), la variable $_POST comprend un champ supplémentaire qui n'est pas dans le formulaire (dernière paire clef/valeur):
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    array (
      0 => 
      array (
        'id' => '10',
        'text' => 'du texte',
        'id_representative' => '15',
        'action_date' => '10/09/2016',
        'action_type' => '3',
        '-----------------------------7e33b33910594--' => '',
      ),
    )
    D'où provient cette paire clef/valeur? Comment l'éviter? Je peux bien sûr la supprimer mais ce n'est pas très élégant.

    Voici le fichier source avec deux formulaires identiques (la différentiation se fait par le champ caché nommé 'id'):
    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
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
     
    		<meta http-equiv="Expires" content="-1" />
    		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
     
    		<base href="http://sirep.proginet.local/" />
     
    		<link rel='stylesheet' media='all' type='text/css' href='http://sirep.proginet.local/common/css/structure.css' />
    		<link rel='stylesheet' media='screen' type='text/css' href='http://sirep.proginet.local/common/css/style0.css' />
    		<link rel='stylesheet' media='screen' type='text/css' href='http://sirep.proginet.local/common/css/default_blue.css' />	
    	</head>
     
    	<body>
     
    		<section>
    			<div id="left">
    				<!-- menu vertical -->
    			</div>
    			<article id="right">
     
    <div>
     
    <form method="post" action="" class="cardForm">
    	<div>
    		<input type="hidden" name="id" value="10" />
    		<label>Résumé entretien</label><br/><textarea name="text" cols="40" rows="6" data-action='edit'>... du texte ...</textarea>
    	</div>
    	<div>
    		<label>Représentant/auteur</label><select name="id_representative" data-action='edit'>
    			<option></option>
    			<option value="6">Prénom1 Nom1</option>
    			<option value="15" selected="selected">Prénom2 Nom2</option>
    		</select><br/>
    		<label>Date entretien</label><input type="text" name="action_date" id="action_date" value="10/09/2016" />
    		<div id="actionCalendar" class='calendarMain calendarInLine'></div><br/>
    		<fieldset><legend>Nature du contact</legend>
    			<div>
    				<input type="radio" name="action_type" id="action_typ1" value="1" /><label for="action_typ1">Téléphone</label>
    				<input type="radio" name="action_type" id="action_typ2" value="2" /><label for="action_typ2">@</label>
    			</div>
    			<div>
    				<input type="radio" name="action_type" id="action_typ3" value="3" checked /><label for="action_typ3">Visite</label>
    				<input type="radio" name="action_type" id="action_typ4" value="4" /><label for="action_typ4">Courrier postal</label>
    			</div>
    		</fieldset>
    	</div>
    </form>
     
    <form method="post" action="" class="cardForm">
    	<div>
    		<input type="hidden" name="id" value="38" />
    		<label>Résumé entretien</label><br/><textarea name="text" cols="40" rows="6" data-action='edit'>Encore du texte</textarea>
    	</div>
    	<div>
    		<label>Représentant/auteur</label><select name="id_representative" data-action='edit'>
    		<option></option>
    		<option value="6">Prénom1 Nom1</option>
    		<option value="15" selected="selected">Prénom2 Nom2</option></select><br/>
    		<label>Date entretien</label><input type="text" name="action_date" id="action_date" value="12/10/2016" />
    		<div id="actionCalendar" class='calendarMain calendarInLine'></div><br/>
    		<!--
    		<label>Date entretien</label><input type="text" name="action_date" value="12/10/2016" data-action='edit' placeholder='04/11/2019' />
    		-->
    		<fieldset><legend>Nature du contact</legend>
    			<div>
    				<input type="radio" name="action_type" id="action_typ1" value="1" /><label for="action_typ1">Téléphone</label>
    				<input type="radio" name="action_type" id="action_typ2" value="2" /><label for="action_typ2">@</label>
    			</div>
    			<div>
    				<input type="radio" name="action_type" id="action_typ3" value="3" checked /><label for="action_typ3">Visite</label>
    				<input type="radio" name="action_type" id="action_typ4" value="4" /><label for="action_typ4">Courrier postal</label>
    			</div>
    		</fieldset>
    	</div>
    </form>
     
    </div>
     
     
    <form method="post" action="http://sirep.proginet.local/frontend/controllers/footFormHandle.php" class="footForm">
    </form>
     
    <script>var fromPHPtoJS = {"shortDays":["D","L","Ma","Me","J","V","S"],"monthes":["Janvier","F\u00e9vrier","Mars","Avril","Mai","Juin","Juillet","Ao\u00fbt","Septembre","Octobre","Novembre","D\u00e9cembre"]};</script>
    <script>const editFile = "http://sirep.proginet.local/frontend/controllers/mainFormHandle.php";</script>
    <script src="http://sirep.proginet.local/common/js/jsSimpleDatePickr.2.1.js"></script>
    <script src="http://sirep.proginet.local/frontend/js/cardMainForm.js"></script>
     
    			</article>
    		</section>
     
    	</body>
    </html>
    et le JavaScript:
    Code js : 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
    "use strict";
     
    (function(){
     
    const editables	= document.querySelectorAll(".cardForm [data-action='edit']")
    	,dates		= document.querySelectorAll(".cardForm [name*='_date'")
    	,toCheck	= document.querySelectorAll(".cardForm [type='checkbox'], .cardForm [type='radio']")
    	,myCalendar	= new jsSimpleDatePickr()
    	,editMax	= editables.length
    	,datesMax	= dates.length
    	,chkMax		= toCheck.length
    	;
    	// Constant 'editFile' is sent from cardFrameView.php
     
    var	params
    	,calendarId
    	,objField
    	;
     
    function send()
    {
    	const objForm	= objField.form
    		,request	= new XMLHttpRequest()
    	;
    	request.open('POST', editFile, false);
    	request.send(new FormData(objForm));
    }
     
    for (let i=0; i<editMax; i++)
    {
    	(function(field)
    	{
    		field.addEventListener('blur', function()
    		{
    			objField = this;
    			send();
    		});
    		field.addEventListener('keydown', function(e)
    		{
    			if ( e.keyCode == 13 && this.nodeName.toLowerCase != 'textarea' )
    				//send(this);
    				send();
    		});
    	})(editables[i]);
    }
     
    }) ();

  2. #2
    Membre éclairé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 577
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 577
    Points : 803
    Points
    803
    Par défaut
    A défaut de réponse à ma question, je cherche le meilleur moyen de supprimer la dernière paire clef/valeur du tableau $_POST sachant que:
    • Cette clef n'existe pas toujours,
    • Le format (masque de la clef) est toujours le même,
    • La valeur numérique incluse dans la clef varie,
    • Le nombre d'éléments du tableau varie,
    • L'élément à supprimer semble toujours être le dernier.

    J'avais pensé utiliser array_key_exists() mais il faut la valeur exacte de la clef.
    Provisoirement, je teste la dernière clef avec array_key_last mais je ne suis pas vraiment sûr que la paire clef/valeur soit toujours en dernière position.

  3. #3
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 407
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 407
    Points : 4 844
    Points
    4 844
    Par défaut
    Salut,

    Cette clé/valeur ressemble à un Token généré automatiquement par le serveur pour chaque requête client.

    Je ne suis pas sûr mais je pense que tu peux la supprimer/annuler dans le fichier de configuration.

  4. #4
    Membre éclairé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 577
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 577
    Points : 803
    Points
    803
    Par défaut
    Bonjour,

    Oui, j'ai bien supposé que c'était quelque chose de généré automatiquement sans savoir quoi ni comment.

    Je suppose que tu parles du php.ini?
    Si c'est le cas, j'ai plusieurs problème:
    Je ne trouve pas la clef à modifier.
    Ce qui est beaucoup plus gênant, je n'ai pas accès au php.ini de mon hébergeur (1&1/ionos). Seul un petit nombre de paramètres peuvent y être modifiés.

    Ta remarque m'a mis la puce à l'oreille et j'ai trouvé des explications dans la page MDN sur XMLHttpRequest. Il semblerait qu'il faille un encodage en 'text/plain' mais je ne sais pas où et comment le gérer. J'ai essayé d'ajouter enctype="text/plain" dans la balise form mais le problème précédent persiste (aucun changement). Dans la balise <head>, j'ai également remplacé cette ligne
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <meta charset="utf-8" />
    par celle-ci
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    Pas de changement non plus.

  5. #5
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 235
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 235
    Points : 15 532
    Points
    15 532
    Par défaut
    la clé que vous avez en plus ressemble à une chaine de délimitation pour le format multipart/form-data
    https://developer.mozilla.org/fr/doc...ipartform-data

    vous pouvez voir ce qui est envoyé par le navigateur dans la console de développement. regardez déjà si le format a l'air bon.
    ensuite c'est peut-être le traitement PHP qui a un souci pour analyser ce format, quelle version de PHP est utilisée ?

  6. #6
    Membre éclairé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 577
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 577
    Points : 803
    Points
    803
    Par défaut
    Citation Envoyé par mathieu Voir le message
    la clé que vous avez en plus ressemble à une chaine de délimitation pour le format multipart/form-data
    https://developer.mozilla.org/fr/doc...ipartform-data
    C'est ce que j'avais vu dans le lien que j'avais indiqué en#4.

    Citation Envoyé par mathieu Voir le message
    vous pouvez voir ce qui est envoyé par le navigateur dans la console de développement.
    C'est ce que j'ai fait et c'est ainsi que j'ai vu le problème.
    ensuite c'est peut-être le traitement PHP qui a un souci pour analyser ce format, quelle version de PHP est utilisée ?
    Version php 7.1.9
    J'ai résolu le problème en supprimant cette clef avec array_pop, parce qu'après avoir ajouté l'attribut enctype="text/plain", la clef de délimitation persiste.

    Merci s'il vous plaît de me faire un retour sur la dernière ligne de ce post, avant que je marque le sujet comme résolu.

Discussions similaires

  1. Réponses: 19
    Dernier message: 18/02/2009, 15h38
  2. ajouter et supprimer un champ de formulaire
    Par sativa808 dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 17/07/2008, 19h32
  3. Ajout de champs de formulaire dynamique
    Par hash95 dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 14/01/2008, 17h39
  4. ajouter deux champs..de formulaire
    Par Chronax dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 03/03/2006, 12h15
  5. valeur d'un champ de formulaire ajouté depuis une autre page
    Par manaboko dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 01/12/2005, 09h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo