Bonjour, 

Je suis en train de faire un script php dans le même genre que le mur de Facebook.

Sur ce "mur" il y a plusieurs discutions entamées et donc plusieurs input pour répondre a chacun des sujet si l'utilisateur le désire.

La Qt d'input est variable.

Ce que je recherche c'est la moyen de lors de l'envoi n'envoyer que l'input pour lequel l'utilisateur a clicker sur répondre à coté du champ input.

Je ne sais pas très bien comment m'y prendre ? Avec jquery et THIS ou possible avec php uniquement ?

Merci d'avance .

Bonjour,

Pour répondre à ta question, il nous faudrait la conception de la bdd, car en effet, il faut un id unique par input, et utiliser this en jquery. 

Il faut que tu cherches un élément unique à chaque sujet, peut être même l'id du sujet, et l'insérer dans le code html (<input type="" id="<?php echo $id; ?>")

Ensuite en Js, tu pourras récupérer l'id de l'élément courant.

Bonjour yuan.tls,

Voici pour info le code en question.

<div class="col-md-12">
<section class="c_panel md-box-shadowed">
<div class="col-sm-12"><br></br>
<?
require('../inc/db.php');
$requete = $pdo->query('
SELECT
IdMur,
IdMurMembre,
Cat,
Msg,
Date,
membres.nom			AS NomMem,
membres.prenom		AS PrenomMem,
membres.surnom		AS SurnomMem,
membres.email		AS EmailMem,
membres.avatar		AS AvatarMem
FROM
Mur
LEFT JOIN membres ON IdMurMembre = membres.id
ORDER BY date'
);
    										$MsgsMur = $requete->fetchAll();
$requete->closeCursor();
    										$requete = $pdo->query('
SELECT
IdRep,
IdLienMur,
IdMemRep,
Rep,
Date,
membres.nom			AS NomMem,
membres.prenom		AS PrenomMem,
membres.surnom		AS SurnomMem,
membres.email		AS EmailMem,
membres.avatar		AS AvatarMem
FROM MurRep
LEFT JOIN membres ON IdMemRep = membres.id
ORDER BY date'
);
$RepsMur = $requete->fetchAll();
$requete->closeCursor();
foreach ($MsgsMur as $MsgMur){
echo'<div class="col-md-12 col-lg-12">&nbsp;
<div class="media well">
<div class="media-left">
<img src="../images/membres/avatars/'.$MsgMur['AvatarMem'].'" class="media-object" style="width:45px">
</div>
<div class="media-body">';
echo '<h4 class="media-heading">'.$MsgMur['PrenomMem'].' <small><i>'.DateRelative($MsgMur['Date']).'</i></small></h4>';
echo '<p>'.$MsgMur['Msg'].'</p>';
							   foreach ($RepsMur as $RepMur){
if($RepMur['IdLienMur'] == $MsgMur['IdMur']){
echo '<div class="media well">
<div class="media-left">
<img src="../images/membres/avatars/'.$RepMur['AvatarMem'].'" class="media-object" style="width:45px">
</div>
<div class="media-body">
<h4 class="media-heading">'.$RepMur['PrenomMem'].' <small><i>'.DateRelative($RepMur['Date']).'</i></small></h4>
<p>'.$RepMur['Rep'].'</p>
        										</div>
</div>
</div>';
//echo $RepMur['Rep'];
} else {
	 echo '</div>	';
}

}
?>
<form action="traitement.php" method="post" id="my_form"  enctype="multipart/form-data">
<div class="margin-top-10">
<input type="file" class="form-control selectFichier" id="monInputFile" name="image" accept="image/*" style="visibility:hidden"><input type="text" class="form-control" placeholder="Répondre" name="rep"/>
<p class="help-block"><span class="gauche" id="aHidden">&nbsp;<a href="#" onClick="$('#monInputFile').click();"><i onClick="" onMouseOver="" class="fa fa-camera inputFile1 "></i> Ajouter une Photo</a></span><span class="droite"><button type="submit" class="btn btn-xs btn-success">Envoyer</button></span></p>
</div></br>
<div class="form-group">
<div id="image_preview" class="col-lg-2 col-md-2 col-xs-4">
<div class="thumbnail hidden">
<img src="http://placehold.it/5" alt="" height="auto" width="250">
<div class="caption">
<!--
<h4></h4>
<p></p>
-->
<center><button type="button" class="btn btn-xs btn-danger">Annuler</button></center>
</div>
</div>
</div>
</div>


</form> 
                                                          
                                                        
                                                    
<?
echo '</div><hr>
</div>';
}
							
							
                           
?>
<div class="form-group">
<label for="textarea-expandable">Nouvelle discution</label>
<textarea class="form-control autosize-animated"></textarea>
<p class="help-block">Commencez une nouvelle discution ici.</p>
</div>
								
  								
</div>	

</section>
</div>

et pour mon input files, le id est super important car il y a jquery qui travaille avec.

<script>
            $(function () {
                $('#my_form').on('submit', function (e) {
                    // On empêche le navigateur de soumettre le formulaire
                    //e.preventDefault();

                    var $form = $(this);
                    var formdata = (window.FormData) ? new FormData($form[0]) : null;
                    var data = (formdata !== null) ? formdata : $form.serialize();

                    $.ajax({
                        url: $form.attr('action'),
                        type: $form.attr('method'),
                        contentType: false, // obligatoire pour de l'upload
                        processData: false, // obligatoire pour de l'upload
                        dataType: 'json', // selon le retour attendu
                        data: data,
                        success: function (response) {
                            $('#result > pre').html(JSON.stringify(response, undefined, 4));
                        }
                    });
                });

                // A change sélection de fichier
                $('#my_form').find('input[name="image"]').on('change', function (e) {
                    var files = $(this)[0].files;

                    if (files.length > 0) {
                        // On part du principe qu'il n'y qu'un seul fichier
                        // étant donné que l'on a pas renseigné l'attribut "multiple"
                        var file = files[0],
                            $image_preview = $('#image_preview');

                        // Ici on injecte les informations recoltées sur le fichier pour l'utilisateur
                        $image_preview.find('.thumbnail').removeClass('hidden');
                        $image_preview.find('img').attr('src', window.URL.createObjectURL(file));
                        //$image_preview.find('h4').html(file.name);
                        //$image_preview.find('.caption p:first').html(file.size +' bytes');
						$('#aHidden').addClass('hidden');
                    }
                });

                // Bouton "Annuler"
                $('#image_preview').find('button[type="button"]').on('click', function (e) {
                    e.preventDefault();

                    $('#my_form').find('input[name="image"]').val('');
                    $('#image_preview').find('.thumbnail').addClass('hidden');
					$('#aHidden').removeClass('hidden');
					
                });
            });
        </script>

-
Edité par FrançoisDuchateau 18 janvier 2017 à 17:39:41

En html/css, un id doit être unique, cela insinue que deux input ne peuvent avoir le même id, autrement, on utilise des class.

C'est la que mon jquery blesse. Je ne sais absolument pas comment m'y prendre pour que ma fonction agisse sur le bon input files et non sur le premier qu'il trouve. Une piste peut être ?

Oui justement, en ayant un id unique...

https://api.jquery.com/category/selectors/

Les classes ou les id, pour le jquery cela ne change rien, par contre, pour ton html/css, le id qui ne sont pas unique ne sont pas conseillé.