Forum d'entraide PHPFrance

Bonjour, dans un premier temps je vais me présenter un petit peu. Je m'appelle Jonathan, j'ai 29 ans et je suis un passionné de photographie, je débute depuis un an maintenant.
J'ai créé mon site internet comme je le pouvais en chinant des infirmations un peu partout sur le net... mais là, je dois avouer que je bloque un peu.

Je souhaiterai ajouter dans une de mes pages un formulaire qui permettrait à mes visiteurs de choisir parmis quelques options.

Ce formulaire serait composé comme suivant :

un champs NOM/PRENOM
un champs TEXTE

mais surtout : la possibilité de cocher parmis 3 options possibles

donc :

un champs OPTION 1
un champs OPTION 2
un champs OPTION 3

et pourquoi pas y ajouter une ou deux options en plus par option.

Exemple : le visiteur choisi parmi l'une des trois options possibles et peut (après avoir choisi l'option) choisir parmis une ou deux autres options en plus.

un champs OPTION 1
- OPTIONS A
- OPTIONS B
un champs OPTION 2
- OPTIONS A
- OPTIONS B
un champs OPTION 3
- OPTIONS A
- OPTIONS B


Voilà, je sais pas si je suis arrivé à me faire comprendre.

En tout cas merci pour votre aide

Voici le formulaire que j'ai actuellement, il s'agit d'un formulaire de contact (en bas de la page)
http://www.eventseestudio.com/bienvenue.php

Bonne soirée
Jonathan

Bonjour,

premièrement dans ton javascript tu changes çà:
[javascript]$(document).ready(function() {
$('#success').hide();
$('#load').hide();

$('#form').submit(function(){
...
...[/javascript]
par çà:
[javascript]$(document).ready(function() {
$('#success').hide();
$('#load').hide();

$('#sous_options_1').hide();
$('#sous_options_2').hide();
$('#sous_options_3').hide();

$('#form').submit(function(){
...
...[/javascript]
les trois lignes en plus servent à masquer les "sous options"

deuxièmement, toujours dans ton javascript, tu ajoutes cette fonction qui sert à afficher les sous otpions correspondantes au choix et à décocher et masquer les autres
[javascript]
function my_options(id_button) {

for(i=1; i<=3; i++)
{
str = '#sous_options_'+i ;
if(id_button == i) {
$(str).show() ;
}
else {
$(str).hide() ;
}
str = '#sous_option'+i+'A' ;
$(str).attr('checked', false);
str = '#sous_option'+i+'B' ;
$(str).attr('checked', false);
}
}[/javascript]

enfin dans ton html tu modifies ton formulaire.
Tu remplaces çà:

<form id="form" action="contact.php" method="post">
      
      <label for="nom">Nom:</label>
      <span class="error"></span>
      <input type="text" name="nom" id="nom" />
      
      <label for="email">Email:</label>
      <span class="error"></span>
      <input type="text" name="email" id="email" />
      
      <label for="message">Message:</label>
      <span class="error"></span>
      <textarea name="message" id="message"></textarea>
      
      <input type="submit" id="submit" class="submit" value="Envoyer" />
    </form>

par çà:

<form id="form" action="contact.php" method="post">
      
      <label for="nom">Nom:</label>
      <span class="error"></span>
      <input type="text" name="nom" id="nom" />
      
      <label for="email">Email:</label>
      <span class="error"></span>
      <input type="text" name="email" id="email" />
      
      <label for="message">Message:</label>
      <span class="error"></span>
      <textarea name="message" id="message"></textarea>
	 
	<br />
	<input type="radio" style="display: inline; width: 20px;" name="option" value="option1" id="option1" 
		onClick="my_options('1');" />
	<label for="option1" style="display: inline; width: 120px; float: none;"> Option 1</label>
	
	<input type="radio" style="display: inline; width: 20px;" name="option" value="option2" id="option2" 
		onClick="my_options('2');" />
	<label for="option2" style="display: inline; width: 120px; float: none;"> Option 2</label>
	
	<input type="radio" style="display: inline; width: 20px;" name="option" value="option3" id="option3" 
		onClick="my_options('3');" />
	<label for="option3" style="display: inline; width: 120px; float: none;"> Option 3</label>
	
	<br />
	<div>
		<div id="sous_options_1" style="display: inline;">
			<input type="radio" style="display: inline; width: 20px; margin-left: 20px;" name="sous_option1" value="A" id="sous_option1A" />
			<label for="sous_option1A" style="display: inline; width: 120px; float: none;"> 1 A</label>
			<input type="radio" style="display: inline; width: 20px;" name="sous_option1" value="B" id="sous_option1B" />
			<label for="sous_option1B" style="display: inline; width: 120px; float: none;"> 1 B</label><br />
		</div>
		<div id="sous_options_2" style="display: inline;">
			<input type="radio" style="display: inline; width: 20px; margin-left: 20px;" name="sous_option2" value="A" id="sous_option2A" />
			<label for="sous_option2A" style="display: inline; width: 120px; float: none;"> 2 A</label>
			<input type="radio" style="display: inline; width: 20px;" name="sous_option2" value="B" id="sous_option2B" />
			<label for="sous_option2B" style="display: inline; width: 120px; float: none;"> 2 B</label><br />
		</div>
		<div id="sous_options_3" style="display: inline;">
			<input type="radio" style="display: inline; width: 20px; margin-left: 20px;" name="sous_option3" value="A" id="sous_option3A" />
			<label for="sous_option3A" style="display: inline; width: 120px; float: none;"> 3 A</label>
			<input type="radio" style="display: inline; width: 20px;" name="sous_option3" value="B" id="sous_option3B" />
			<label for="sous_option3B" style="display: inline; width: 120px; float: none;"> 3 B</label><br />
		</div>
	</div>
	
	  
	  
      <input type="submit" id="submit" class="submit" value="Envoyer" />
    </form>

Voilà, tiens nous au courant

Bonjour Nico63800 d'avoir pris le temps de répondre et le plus clairement en plus.

J'ai procédé comme indiqué, j'ai voulu simuler le client en remplissant moi-même le formulaire, en choisissant une option et une sous autre. J'ai validé et lorsque j'ai reçu le mail (du client) il n'y avait d'indiqué que le corps du texte mais pas les options sélectionnées

Je m'attendais à recevoir ce mail

[email protected] vous a envoyé un message

Bonjour...
OPTION 2, A

Ps : modifications effectuées sur cette page
http://www.eventseestudio.com/crea.php

Encore merci vraiment

À moins qu'il y est des modifications à apporter à ma base de données ?


Voilà un grossier rendu que j'aimerai intégrer à mon site :
Les gens choisisse une option (1,2 ou 3) et peuvent (sans être obligé) choisir parmis une autre option liées à celle-ci :
il envoie, et je reçois leur mail, nom et leur sélection : option 1, options B






Merci

J'ai procédé comme indiqué, j'ai voulu simuler le client en remplissant moi-même le formulaire, en choisissant une option et une sous autre. J'ai validé et lorsque j'ai reçu le mail (du client) il n'y avait d'indiqué que le corps du texte mais pas les options sélectionnées

Je m'attendais à recevoir ce mail

[email protected] vous a envoyé un message

Bonjour...
OPTION 2, A

forcément , je t'ai donné le code à implémenter du côté client (le formulaire)
Mais il faut également modifier le code coté serveur, c'est à dire celui de la page contact.php
Il faut récupérer les options (et sous options éventuellement) sélectionnées.

Voilà ce que j'ai du côté du contact.php
Il faut que je rajoute mes Options ? mes ou dois-je mettre mes sous option ?
Merci pour votre réponse et désolé pour mon niveau plus que moyen.

<?php

if(!empty($_POST) && !empty($_POST['nom']) && !empty($_POST['email']) &&
   filter_var($_POST['email'],FILTER_VALIDATE_EMAIL) && !empty($_POST['message']))
{
  extract($_POST);
  $nom = strip_tags($nom);
  $email = strip_tags($email);
  $message = strip_tags($message);
  
  try{
  $bdd = new PDO('mysql:host=localhost;dbname=event153_contact', '@@@@@@@', @@@@@@@') or die(print_r($bdd->errorInfo()));
  $bdd->exec('SET NAMES utf8');
  }
  
  catch(Exeption $e){
  die('Erreur:'.$e->getMessage());
  }
  
  $req = $bdd->prepare('INSERT INTO contact (nom,email,message) VALUES (:nom,:email,:message)');
  $req->execute(array(':nom'=>$nom, ':email'=>$email, ':message'=>$message));
  $req->closeCursor();
  
  $to = '[email protected]';
  $subject = $nom.' vous envoi un message';
  $message = nl2br($message);
  
  $headers = 'From:'.$email."\r\n";
  $headers.='MIME-version: 1.0'."\r\n";
  $headers.='Content-type: text/html; charset=utf-8'."\r\n";
  mail($to,$subject,$message,$headers);
  
  header('Location: index.php');
}
else
{
  extract($_POST);
  if(empty($nom)) {echo 'Indiquez votre nom<br />';}
  if(empty($email) || !filter_var($email,FILTER_VALIDATE_EMAIL)) {echo 'Indiquez un email valide<br />';}
  if(empty($message)) {echo 'Indiquez votre message<br />';}
  
}


?>

en fait on peut simplifier un peu le code que je t'ai fourni

avant toute chose, remplaces

<div id="sous_options_1" style="display: inline;">
<input type="radio" style="display: inline; width: 20px; margin-left: 20px;" name="sous_option1" value="A" id="sous_option1A" />
   <label for="sous_option1A" style="display: inline; width: 120px; float: none;"> 1 A</label>
<input type="radio" style="display: inline; width: 20px;" name="sous_option1" value="B" id="sous_option1B" />
    <label for="sous_option1B" style="display: inline; width: 120px; float: none;"> 1 B</label><br />
</div>
<div id="sous_options_2" style="display: inline;">
<input type="radio" style="display: inline; width: 20px; margin-left: 20px;" name="sous_option2" value="A" id="sous_option2A" />
   <label for="sous_option2A" style="display: inline; width: 120px; float: none;"> 2 A</label>
<input type="radio" style="display: inline; width: 20px;" name="sous_option2" value="B" id="sous_option2B" />
   <label for="sous_option2B" style="display: inline; width: 120px; float: none;"> 2 B</label><br />
</div>
<div id="sous_options_3" style="display: inline;">
<input type="radio" style="display: inline; width: 20px; margin-left: 20px;" name="sous_option3" value="A" id="sous_option3A" />
    <label for="sous_option3A" style="display: inline; width: 120px; float: none;"> 3 A</label>
<input type="radio" style="display: inline; width: 20px;" name="sous_option3" value="B" id="sous_option3B" />
     <label for="sous_option3B" style="display: inline; width: 120px; float: none;"> 3 B</label><br />
</div>

par:

<div id="sous_options_1" style="display: inline;">
<input type="radio" style="display: inline; width: 20px; margin-left: 20px;" name="sous_option" value="1A" id="sous_option1A" />
   <label for="sous_option1A" style="display: inline; width: 120px; float: none;"> 1 A</label>
<input type="radio" style="display: inline; width: 20px;" name="sous_option" value="1B" id="sous_option1B" />
    <label for="sous_option1B" style="display: inline; width: 120px; float: none;"> 1 B</label><br />
</div>
<div id="sous_options_2" style="display: inline;">
<input type="radio" style="display: inline; width: 20px; margin-left: 20px;" name="sous_option" value="2A" id="sous_option2A" />
   <label for="sous_option2A" style="display: inline; width: 120px; float: none;"> 2 A</label>
<input type="radio" style="display: inline; width: 20px;" name="sous_option" value="2B" id="sous_option2B" />
   <label for="sous_option2B" style="display: inline; width: 120px; float: none;"> 2 B</label><br />
</div>
<div id="sous_options_3" style="display: inline;">
<input type="radio" style="display: inline; width: 20px; margin-left: 20px;" name="sous_option" value="3A" id="sous_option3A" />
    <label for="sous_option3A" style="display: inline; width: 120px; float: none;"> 3 A</label>
<input type="radio" style="display: inline; width: 20px;" name="sous_option" value="3B" id="sous_option3B" />
     <label for="sous_option3B" style="display: inline; width: 120px; float: none;"> 3 B</label><br />
</div>

ensuite dans contact.php, remplaces

extract($_POST);
  $nom = strip_tags($nom);
  $email = strip_tags($email);
  $message = strip_tags($message);

par

extract($_POST);
  $nom = strip_tags($nom);
  $email = strip_tags($email);
  $message = strip_tags($message);
  $option = strip_tags($option);
  $sous_option = strip_tags($sous_option);

*******************************************************************************************************
si le choix d'une option et d'une sous option est obligatoire alors remplaces

dans la page d’accueil:

cà:
[javascript]$('#form').submit(function(){
valid =true;[/javascript]

par çà:
[javascript] $('#form').submit(function(){
var sous_option_value = $('input[type=radio][name=sous_option]:checked').length;
if( sous_option_value == 1 )
{
valid =true;
$('#option_choice').slideUp();
}
else
{
valid =false;
$('#option_choice').fadeIn(1000).text('Choisissez une option et une sous option');
}[/javascript]

et ca

<label for="message">Message:</label>
      <span class="error"></span>
      <textarea name="message" id="message"></textarea>

par çà

 <label for="message">Message:</label>
      <span class="error"></span>
      <textarea name="message" id="message"></textarea>
	 
	<br />
	<span class="error" id="option_choice"></span>

dans contact.php

if(!empty($_POST) && !empty($_POST['nom']) && !empty($_POST['email']) &&
   filter_var($_POST['email'],FILTER_VALIDATE_EMAIL) && !empty($_POST['message']))

par

if(!empty($_POST) && !empty($_POST['nom']) && !empty($_POST['email']) &&
   filter_var($_POST['email'],FILTER_VALIDATE_EMAIL) && !empty($_POST['message']) && !empty($_POST['option']) && !empty($_POST['sous_option']) )
 

*******************************************************************************************************
enfin remplaces

$message = nl2br($message);

par

$message = $message.' option numero '.$option.', sous option numero '.$sous_option;
$message = nl2br($message);

Important:
Avec ce code tu devrais recevoir le choix de l'utilisateur dans l'email (si j'ai pas fait d'erreur lol)
Par contre, le choix n'est pas enregistré dans la base de données.
Si tu souhaites le sauvegarder, il faut modifier la structure de ta table et la requete d'insertion

Voilà, tiens moi au courant

Bonjour Nico

J'ai effectué les changements dans "contact.php" et le corps de ma pages (à l'exception "si le choix d'une option et d'une sous option est obligatoire alors remplaces")

Voilà ce que je reçois par mail du client :


Bonjour...option numéro, sous option numéro


Je pense qu'on y est presque, manque juste le numéro/intitulé des options dans le mail


Merci pour ton aide encore une fois

bizarre pourtant ca devrais marcher ...
revoies moi le code complet des 2 pages en mail privé
que je jettes un oeil !

MP envoyé

Up

j'avais oublié de modifier l'appel ajax !

donc, remplaces dans crea.php

[javascript]
$(document).ready(function() {
$('#success').hide();
$('#load').hide();

$('#sous_options_1').hide();
$('#sous_options_2').hide();
$('#sous_options_3').hide();

$('#form').submit(function(){

valid =true;
if($('#nom').val()==''){
$('#nom').prev('.error').fadeIn(1000).text('Indiquez votre nom');
valid = false;
}
else{
$('#nom').prev('.error').slideUp();
}

if(!$('#email').val().match(/^[a-z0-9._-]+@[a-z0-9.-]{2,}[.][a-z]{2,3}$/)){
$('#email').prev('.error').fadeIn(1000).text('Email invalide');
valid = false;
}

else{
$('#email').prev('.error').slideUp()
}

if($('#message').val()==''){
$('#message').prev('.error').fadeIn(1000).text('Indiquez votre message');
valid = false;
}
else{
$('#message').prev('.error').slideUp();
}

if(valid==true)
{
var nom = $('#nom').val();
var email = $('#email').val();
var message = $('#message').val();
var dataString = 'nom='+nom+'&email='+email+'&message='+message;

$.ajax({
type: 'POST',
url: 'contact.php',
data: dataString,

beforeSend: function()
{
$('#load').fadeIn();
},

success: function()
{
$('#load').fadeOut();
$('#form').slideUp();
$('#success').slideDown();
$('#success').text('Message envoyé');
}
});
}

return false;
});

});[/javascript]

par

[javascript]$(document).ready(function() {
$('#success').hide();
$('#load').hide();

$('#sous_options_1').hide();
$('#sous_options_2').hide();
$('#sous_options_3').hide();

$('#form').submit(function(){

valid =true;
if($('#nom').val()==''){
$('#nom').prev('.error').fadeIn(1000).text('Indiquez votre nom');
valid = false;
}
else{
$('#nom').prev('.error').slideUp();
}

if(!$('#email').val().match(/^[a-z0-9._-]+@[a-z0-9.-]{2,}[.][a-z]{2,3}$/)){
$('#email').prev('.error').fadeIn(1000).text('Email invalide');
valid = false;
}

else{
$('#email').prev('.error').slideUp()
}

if($('#message').val()==''){
$('#message').prev('.error').fadeIn(1000).text('Indiquez votre message');
valid = false;
}
else{
$('#message').prev('.error').slideUp();
}

var option_val = $('input[type=radio][name=sous_option]:checked').attr('value');

if(valid==true)
{
var nom = $('#nom').val();
var email = $('#email').val();
var message = $('#message').val();
var dataString = 'nom='+nom+'&email='+email+'&message='+message+'&optionval='+option_val;

$.ajax({
type: 'POST',
url: 'contact.php',
data: dataString,

beforeSend: function()
{
$('#load').fadeIn();
},

success: function()
{
$('#load').fadeOut();
$('#form').slideUp();
$('#success').slideDown();
$('#success').text('Message envoyé');
}
});
}

return false;

});

});[/javascript]

en ce qui concerne contact.php

supprimes
[javascript]$option = strip_tags($option);
$sous_option = strip_tags($sous_option);[/javascript]

et remplaces
[javascript]$subject = $nom.' vous envoi un message';
$message = $message.' option numero '.$option.', sous option numero '.$sous_option;
$message = nl2br($message);

$headers = 'From:'.$email."\r\n";
$headers.='MIME-version: 1.0'."\r\n";
$headers.='Content-type: text/html; charset=utf-8'."\r\n";
mail($to,$subject,$message,$headers);

header('Location: index.php');
}
else
[/javascript]

par

[javascript]$message = nl2br($message);
$subject = $nom.' vous envoi un message';
$message .= "\r\n"." option ".$optionval;
$headers = 'From:'.$email."\r\n";
$headers.='MIME-version: 1.0'."\r\n";
$headers.='Content-type: text/html; charset=utf-8'."\r\n";
mail($to,$subject,$message,$headers);
}
else
[/javascript]

Alors là je dis bravo, bravo Monsieur même! ÇA FONCTIONNE!!! =D> =D> =D> =D>
Si un jour vous passez par Villeneuve sur Yonne (89), je serai ravis de vous offrir une séance photo, pour vous ou l'un de vos proches.

Voici ce que je reçois par mail (du client) :

Bonjour... Option3B



Il me reste à me creuser la tête pour le mettre en forme avec des images d'illustration. J'espère que je ne vais pas détruire les lignes de codes.

Encore merci, je vous tiens au courant pour la mise en forme du formulaire.

TENTATIVE 1 in

De rien, et si vous voulez un coup de main pour la suite n'hésitez pas