Bonjour à tous,

Je rencontre un problème pour récupérer les valeurs de mes différents champs de formulaire, avec jQuery.

HTML :

<input id="designation" name="designation" class="needchamp" type="text" value="<?php echo $art['designation']; ?>" />

JQUERY :

$(document).ready(function(){
	$("#submit").click(function(){
		var designation = $("#designation").val();
		alert(designation);
	});
});

La valeur obtenue est vide, alors que le champ est bien complété dans mon formulaire.

- J'ai bien importé jQuery, j'ai d'autres scripts qui fonctionne sur la même page

- Je n'ai aucun message dans la console

- J'ai testé$("#designation").lenght, la valeur obtenue est 1, que le champ soit vide ou rempli.

- L'ID de mon input est unique, de plus j'ai testé le script avec d'autre champs de mon formulaire, le résultat est toujours vide.

Avez vous des idées de solution ? Ou avez-vous besoin d'informations supplémentaires ?

Merci beaucoup,

Bonne soirée,

Salut bxdfr,

Le champ php récupère une chaîne de caractère à partir d'une table de données MySQL.

tu n'as pas compris ce que je demandais.

Je ne te demande pas ce que fais ton php, mais le html qu'il genere vraiment au final.

Je veux le code vu par le navigateur, à savoir ce que donne le  "code  source de la page" si tu es avec firefox afin de voir si ton champ input contient vraiment une valeur.

Lorsque tu fais copier/coller du code genere dans https://validator.w3.org/#validate_by_input

pour voir si le pb vient de ton html, si ton html genere est clean, on va regarder plutot du coté de ton js.

Ah pardon

Voici le code sourcé généré au final :

<input id="designation" name="designation" class="needchamp" type="text" value="Entretien de chaudière">

Lorsque je test ce code dans le validator, il m'indique juste que la balise input n'est pas fermée. Mais j'ai l'impression que c'est géré différemment selon les navigateurs.

Par ailleurs, je précise que mon champ input est placé dans une pop-up générée en AJAX. Je ne sais pas si ça peut avoir un impact.

Merci beaucoup,

EDIT :

J'ai essayé de copier mon champ input et mon script sur une autre page de mon site web. Et sur cette autre page, le script fonctionne, j'ai bien une valeur qui est retournée.

Le fait que mon contenu soit placé dans un fichier généré en AJAX pose peut-être problème ?

De plus, dès que j'ai une erreur Javascript dans ce même fichier, mon AJAX ne m'affiche plus le résultat (c'est peut être normal ? mais dans le doute je préfère donner toutes les infos :)).

-
Edité par Florian My 28 août 2016 à 15:02:23

ton champs est dans une pop up??

on peut voir le code qui genere ta "pop up"?

tu as juste un html/php et un script js?

Oui tu as raison de mettre "pop up" entre guillemets. Visuellement pour moi ça ressemble à une pop-up. Mais en réalité c'est plutôt un bloc positionné en "fixed" et placé au premier plan de la page, par dessus le contenu.

Code AJAX qui génère ce "pop-up" :

 $(document).ready(function(){
	$(".btnarticle").click(function(){
		var id_article = $(this).val();
		var data_art = 'article=' + id_article;
		$.ajax({
			type : "GET",
			url : "http://mondomaine/Include/modifier_article.php",
			data : data_art,
			success : function(server_response){
				$("#blocmodifier").html(server_response).show();
				$('#blocmodifier').css("display","block");
				$('#coverart').css("display","block");
				$('body').css("overflow-y","scroll");
				$('body').css("position","fixed");
			}	
		});	
	});
});

L'élément .btnarticle correspond à un bouton. Il est placé sur chaque ligne d'un tableau qui affiche une liste d'articles. La valeur de ce bouton est un code PHP correspondant à l'ID de l'article (de la ligne).

<button class="btnouvrir btnarticle" type="button" value="<?php echo $article['id_article']; ?>"><span class="btn-text">Modifier</span><span class="btn-picto"><i class="icon-fixed-width icon-angle-right"></i></span></button>

L'élément #blocmodifier correspond à la "pop-up", c'est le bloc affiché au premier plan de la page.

L'élément #covertart est un bloc en plein écran permettant de mettre un fond en opacité devant le contenu de la page (et derrière la pop-up).

Ces deux éléments sont placés sur la même page que le .btnarticle :

<div class="blocgererarticle" id="blocmodifier"></div>
<div class="bloccoverarticle" id="coverart"></div>

Enfin, le fichier modifier_article.php est donc chargé dans cette pop-up.

Il est assez-long, je vais supprimer donc un peu de HTML :

<?php
	session_start();
	include("connexion_sql.php");
	// Je récupère l'identifiant de l'article envoyé via AJAX
	if(isset($_GET['article']))
	{
		$article = $_GET['article'];
		$sqla = 'SELECT * FROM matable WHERE id_article = :id_article';
		$farticle = $bdd->prepare($sqla);
		$farticle->execute(array(
			'id_article' => $article
		));
		$art = $farticle->fetch();
?>
<form method="post" action="articles.php">
	<div class="titrearticle">
		<h3>Modifier l'article <span class="articleselec"><?php echo $art['designation']; ?></span></h3>
	</div>
	<div class="contentgererarticla">
		<div class="blocformarticle" id="designation">
			<label for="designation">Désignation</label>
			<input id="designation" name="designation" class="needchamp" type="text" value="<?php echo $art['designation']; ?>" />
		</div>
		<div name="validationmodifarticle" class="boutonvalider" id="submit">
			<span class="btn-text">Enregistrer</span>
			<span class="btn-picto">
				<i class="icon-fixed-width icon-angle-right"></i>
			</span>
		</div>
	</div>
<?
		$farticle->closeCursor();
	}
?>
</form>

<script>
// Le code pour récupérer la valeur de mon input qui ne fonctionne pas sur cette page
$(document).ready(function(){
	$("#submit").click(function(){
		var designation = $("#designation").val();
		alert(designation);
	});
});
</script>
<script>
// Code correspondant à des éléments HTML effacés pour plus de visibilité.
// Il est utilisé pour un plugin JQuery de bouton radio. De plus, selon l'état du bouton radio, j'affiche ou je masque certains champs.
$(document).ready( function(){ 
	$(".cb-enable").click(function(){
		var parent = $(this).parents('.switch');
		$('.cb-disable',parent).removeClass('selected');
		$(this).addClass('selected');
		$('.checkbox',parent).attr('checked', true);
		$('#prixhoraire').css("display","none");
		$('#tempsprevisionnel').css("display","none");
		$('#prixunitaire').css("display","inline-block");
	});
	$(".cb-disable").click(function(){
		var parent = $(this).parents('.switch');
		$('.cb-enable',parent).removeClass('selected');
		$(this).addClass('selected');
		$('.checkbox',parent).attr('checked', false);
		$('#prixhoraire').css("display","inline-block");
		$('#tempsprevisionnel').css("display","inline-block");
		$('#prixunitaire').css("display","none");
	});
});
</script>
<script>
// Code correspondant à des éléments HTML effacés pour plus de visibilité.
// Ce code absolument pas optimisé est utilisé pour afficher et masquer des champs.
$(document).ready(function(){
	$("#ajoutop1").click(function(){
		$("#option1").css("display","block");
		$('#supop1').css("display","block");
		$('#ajoutop1').css("display","none");
		$('#ajoutop2').css("display","block");
	});
});
$(document).ready(function(){
	$("#ajoutop2").click(function(){
		$("#option2").css("display","block");
		$('#supop1').css("display","none");
		$('#supop2').css("display","block");
		$('#ajoutop2').css("display","none");
		$('#ajoutop3').css("display","block");
	});
});
$(document).ready(function(){
	$("#ajoutop3").click(function(){
		$("#option3").css("display","block");
		$('#supop2').css("display","none");
		$('#supop3').css("display","block");
		$('#ajoutop3').css("display","none");
	});
});
$(document).ready(function(){
	$("#supop1").click(function(){
		$("#option1").css("display","none");
		$('#supop1').css("display","none");
		$('#ajoutop2').css("display","none");
		$('#ajoutop1').css("display","block");
		$('.inputop1').val("");
		$('.inputprix1').val("");
	});
});
$(document).ready(function(){
	$("#supop2").click(function(){
		$("#option2").css("display","none");
		$('#supop2').css("display","none");
		$('#supop1').css("display","block");
		$('#ajoutop3').css("display","none");
		$('#ajoutop2').css("display","block");
		$('.inputop2').val("");
		$('.inputprix2').val("");
	});
});
$(document).ready(function(){
	$("#supop3").click(function(){
		$("#option3").css("display","none");
		$('#supop3').css("display","none");
		$('#supop2').css("display","block");
		$('#ajoutop3').css("display","block");
        $('.inputop3').val("");
		$('.inputprix3').val("");
	});
});
</script>
<script type="text/javascript">
// Code correspondant à des éléments HTML effacés pour plus de visibilité.
// Ce code est utilisé sur une liste déroulante HTML. Il permet à l'utilisateur d'ajouter une option à la liste s'il sélectionne l'option ayant pour valeur "new".
// Ainsi, une pop-up javascript s'ouvre pour que l'utilisateur puisse ajouter son option.
	function AjoutOptionAuSelect(this_select){
		if (this_select.value == "new")
		{
			var saisie;
			var pass = false;
			do
			{
				if (pass) alert("La valeur saisie est incorrecte. Elle ne doit comporter que des lettres, des chiffres et des espaces.");
				saisie = prompt("Créer une catégorie");
				if (saisie == null) return false;
				pass = true;
			}
			while (saisie.match(/[^a-z\s]/i) && saisie != "")
			this_select.options[this_select.length] = new Option(saisie, saisie, true, true);
			for (var i=0; i < this_select.options.length; i++)
			{
				if (this_select.options.value == saisie)
				{
					this_select.options.selected = true;
				}
			}
		}
	}
</script>

Oui, j'utilise juste du HTML, PHP et Javascript (dont JQuery et AJAX).

Merci beaucoup encore pour ton aide,

Je ne vois pas où est le soucis, j'ai essayé de reproduire (en gros) le fonctionnement de tes pages, et chez moi ça ne pose aucun pb.

Essayes à tout hasard ceci:

$(document).ready(function(){
    $(document).on('click', '#submit', function () {
        var designation = $("#designation").val();
        alert(designation);
    });
});

Le problème vient du fait que lorsque le fichier est prêt au chargement de la page, le bloc qui contiendra le submit est vide. Donc quand tu demande à attacher un événement au submit, tu ne crées pas d'écoute de cet événement. 

Du coup la méthode de bxdfr va te permettre de faire la délégation d'événement et va faire marcher tout le bouzin. Il faudra peut-être adapter le code, le $(document) est peut-être un peu trop large comme sélecteur. Tu pourrais essayer avec $('#blocmodifier') à la place pour être un peu plus précis et éviter d'analyser chaque clics sur ta page. 

Salut, merci beaucoup pour vos réponses, c'est bien sympa

bxdfr,

C'est fou ça ! Du coup moi aussi j'ai essayé de reproduire le mécanisme de cette page dans un autre dossier, en simplifiant au maximum, mais ça ne fonctionne toujours pas.

J'ai essayé ton code, mais ça ne fonctionne toujours pas :/

cernkor,

D'accord, je comprend le problème oui. J'ai bien essayé de modifier le code de bxdfr avec ta proposition, mais ça ne fonctionne pas :

$(document).ready(function(){
    $("#blocmodifier").on('click', '#submit', function () {
        var designation = $("#designation").val();
        alert(designation);
    });
});

J'ai aussi essayé de modifier le premier $(document) dans le doute.. et même de modifier les deux. J'ai essayé de cibler d'autres balises plus précises à la place de $('#blocmodifier'), mais ça ne fonctionne pas.

Du coup, je ce sera peut-être plus clair si je vous met le lien et le code de la page simplifiée, vu que j'y rencontre aussi le même problème :

Lien : lien supprimé

index.php

<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	</head>
	<body>
		<button class="btnouvrir btnarticle" type="button"><span>Modifier</span></button>
		<div class="blocgererarticle" id="blocmodifier"></div>
		<div class="bloccoverarticle" id="coverart"></div>
		<script>
			$(document).ready(function(){
				$(".btnarticle").click(function(){
					var data_art = 'article=5';
						$.ajax({
			            type : "GET",
			            url : "http://mondomaine/test/test.php",
			            data : data_art,
			            success : function(server_response){
			                $("#blocmodifier").html(server_response).show();
			                $('#blocmodifier').css("display","block");
			                $('#coverart').css("display","block");
			                $('body').css("overflow-y","scroll");
			                $('body').css("position","fixed");
			            }  
			        });
				});
			});
		</script>
		<style>
			#blocmodifier { display: none; width: 300px; height: 220px; background-color: #ea5901; }
		</style>
	</body>
</html>

test.php

<form method="post" action="articles.php">
    <div class="contentgererarticla">
        <div class="blocformarticle" id="designation">
            <label for="designation">Désignation</label>
            <input id="designation" name="designation" class="needchamp" type="text" value="Mon texte à récupérer" />
        </div>
        <div name="validationmodifarticle" class="boutonvalider" id="submit">
            <span class="btn-text">Enregistrer</span>
            <span class="btn-picto">
                <i class="icon-fixed-width icon-angle-right"></i>
            </span>
        </div>
    </div>
</form>
 
<script>
$(document).ready(function(){
    $("#blocmodifier").on('click', '#submit', function () {
        var designation = $("#designation").val();
        alert(designation);
    });
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Merci beaucoup à vous,

Bonne soirée,

-
Edité par Florian My 30 août 2016 à 20:40:56

J'ai teste, tu as 2 fois l'id designation !!!

une fois pour une div, et une fois pour un input

-
Edité par bxdfr 30 août 2016 à 20:24:23

Flomyd a écrit:

- L'ID de mon input est unique

Oh mince, je suis aveugle !

Merci beaucoup bxdfr ! Et du coup, désolé de t'avoir pris du temps pour une erreur si bête

Ca fonctionne parfaitement maintenant que j'ai renommé mon input. Je l'ai appliqué à mon code original et ça fonctionne aussi.

Merci beaucoup de ton aide,