Page 1 sur 1
verifier le contenu des champs masqué/affichés selon le choix de la catégorie en javascript et php
Posté : 05 oct. 2016, 11:35
par charlydar
Bonjour à tous !
Je suis à la recherche de l’aide au niveau de mon code JavaScript qui vérifier les champs obligatoires affichés selon le choix du visiteur. En effet, quand le visiteur choisis la catégorie « offre d’emploi » tous les champs masqué de cette catégorie s’affichent et la vérification de saisie au niveau des champs obligatoire se passe bien à partir de la fonction verif_formulaire. Mais quand le visiteur change de catégorie, il y’une erreur que je n’arrive pas à trouver et cela me bloque depuis quelques jours.
S.V.P votre aide m’est précieuse ! ci joint mon code source.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Deposez une annonce</title>
<script>
// script champ hidden
function afficherAutre() {
var so = document.getElementById("sujet_for_offre_demploi");
var s = document.getElementById("sujet_for");
var m = document.getElementById("message");
var mo = document.getElementById("message_offre_demploi");
var gp2 = document.getElementById("groupe2");
var gp3 = document.getElementById("groupe3");
var gp4 = document.getElementById("groupe4");
var gp33 = document.getElementById("groupe33");
// cat1
if (document.form4.categorie.value == 1)
{
if (so.style.display == "none")
{so.style.display = "block";}
if (s.style.display == "block")
{s.style.display = "none";}
if (m.style.display == "block")
{m.style.display = "none";}
if (mo.style.display == "none")
{mo.style.display = "block";}
if (gp33.style.display == "none")
{gp33.style.display = "block";}
}
else
{
so.style.display = "none";
s.style.display = "block";
m.style.display = "block";
mo.style.display = "none";
gp33.style.display = "none";
}
// gp2
if (document.form4.categorie.value == 2)
{
if (gp2.style.display == "none")
{gp2.style.display = "block";}
}
else
{
gp2.style.display = "none";
}
// gp3
if (document.form4.categorie.value == 3)
{
if (gp3.style.display == "none")
{gp3.style.display = "block";}
}
else
{
gp3.style.display = "none";
}
// gp4
if (document.form4.categorie.value == 4)
{
if (gp4.style.display == "none")
{gp4.style.display = "block";}
}
else
{
gp4.style.display = "none";
}
}
function verif_formulaire()
{
var gp2 = document.getElementById("groupe2");
var gp33 = document.getElementById("groupe33")
if(document.form4.categorie.value == "0") {
alert("votre categorie ?");
document.form4.categorie.focus();
return false;
}
if(document.form4.company.value == "") {
alert("veuillez cocher la qualification");
document.getElementById("company").focus();
return false;
}
if(document.form4.type_annonce.value == "") {
alert("Votre type d'nnonce ?");
document.form4.type_annonce.focus();
return false;
}
if(document.form4.sujet.value == "") {
alert("Sujet de votre annonce ?");
document.form4.sujet.focus();
return false;
}
if(document.form4.message.value == "") {
alert("Votre message ?");
document.form4.message.focus();
return false;
}
if(document.form4.prenom.value == "") {
alert("Votre prenom ?");
document.form4.prenom.focus();
return false;
}
if(document.form4.phone.value == "") {
alert("Votre telephone ?");
document.form4.phone.focus();
return false;
}
if(document.form4.email.value == "") {
alert("Votre email ?");
document.form4.email.focus();
return false;
}
// Champs Masqués/Affichés
//gp33
if(document.form4.Type_de_contrat.value == "0") {
if (gp33.style.display == "block"){
alert("Veuillez indiquer le type de contrat.");
document.form4.Type_de_contrat.focus();
return false;
}
}
if(document.form4.jobexp.value == "0") {
if (gp33.style.display == "block"){
alert("Veuillez choisir un type.");
document.form4.jobexp.focus();
return false;
}
}
if(document.form4.adreply_redirect.value == "") {
if (gp33.style.display == "block"){
alert("Veuillez indiquer l'adresse de redirection.");
document.form4.adreply_redirect.focus();
return false;
}
}
if(document.form4.jobstudy.value == "0") {
if (gp33.style.display == "block"){
alert("Veuillez selectionner le niveau d'étude.");
document.form4.jobstudy.focus();
return false;
}
}
// gp2
if(document.form4.model.value == "") {
if (gp2.style.display == "block"){
alert("Veuillez indiquer le modèle.");
document.form4.model.focus();
return false;
}
}
if(document.form4.boite_vitesse.value == "") {
if (gp2.style.display == "block"){
alert("Veuillez selectionner la boite de vitesse.");
document.form4.boite_vitesse.focus();
return false;
}
}
if(document.form4.km.value == "") {
if (gp2.style.display == "block"){
alert("Veuillez indiquer le kilometrage.");
document.form4.km.focus();
return false;
}
}
if(document.form4.carburant.value == "") {
if (gp2.style.display == "block"){
alert("Veuillez selectionner le carburant.");
document.form4.carburant.focus();
return false;
}
}
}
</script>
</head>
<body>
<form id="form4" name="form4" method="post" action="annonce/new-sujet-poster.php" enctype="multipart/form-data" onSubmit="return verif_formulaire()">
<div class="control-group">
<label class="control-label" for="categorie"><strong >Categorie * :</strong ></label>
<div class="controls">
<select id="categorie" name="categorie" style="width:200px;" onChange="afficherAutre()" class='formchamp'>
<option value="0">--Choississez--</option>
<option style='background-color:#f2f2f2' disabled id='cat71' >-- EMPLOI --</option>
<option value='1' id='cat33'>Offres d'emploi</option>
<option style='background-color:#f2f2f2' disabled id='cat1' >-- VEHICULES --</option>
<option value='2' id='cat2' >Voitures</option>
<option value='3' id='cat3' >Motos</option>
<option value='4' id='cat38' >Autres</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label"><strong >Vous êtez * :</strong ></label>
<label class="radio inline">
<input id="company" name="company" value="Particulier" type="radio" >Particulier
</label>
<label class="radio inline">
<input id="company" name="company" value="Professionnel" type="radio">Professionnel
</label>
</div>
<div class="control-group">
<label class="control-label" for="objet"><strong >Type d'annonce* :</strong></label>
<div class="controls">
<select id="type_annonce" name="type_annonce" class="">
<option value="">--Choississez--</option>
<option value=1>Offres</option>
<option value=2>Demandes</option>
<option value=3>Location</option>
</select>
</div>
</div>
<div class="control-group">
<label id="sujet_for" class="control-label" style="display:block;" for="sujet_for"><strong >Titre de l"annonce * :</strong></label>
<label id="sujet_for_offre_demploi" class="control-label" style="display:none;" for="sujet_for_offre_demploi"><strong >Intitulé du poste * :</strong></label>
<div class="controls">
<input type="text" id="sujet" name="sujet" value="" maxlength="100" autocomplete="off" class="" >
</div>
</div>
<div class="control-group">
<label id="message" class="control-label" style="display:block;" for="message"><strong ><?php //echo $label722 ;?>Texte de l'annonce * :</strong></label>
<label id="message_offre_demploi" style="display:none;" class="control-label" for="message_offre_demploi"><strong ><?php //echo $label722 ;?>Description du poste * :</strong></label>
<div class="controls">
<textarea id="message" name="message" rows="7" cols="60"></textarea>
</div>
</div>
<!-- groupe 2-->
<div id="groupe2" style="display:none;">
<div class="row-fluid" style="background-color:#f9f9f9;">
<div class="span4">
<div id="marque" class="control-group">
<label id="marque_for" class="control-label" for="marque"><strong >Marque </strong></label>
<select name="marque" id="marque" >
<option value="" selected>«Choisissez»</option>
<optgroup label="Marques Courantes">
<option value="Audi" >Audi </option>
<option value="Bmw" >Bmw </option>
<option value="Citroen" >Citroen </option>
<option value="Fiat" >Fiat </option>
<option value="Ford" >Ford </option>
<option value="Mercedes" >Mercedes </option>
<option value="Opel" >Opel </option>
<option value="Peugeot" >Peugeot </option>
<option value="Renault" >Renault </option>
<option value="Volkswagen" >Volkswagen </option>
</optgroup>
<optgroup label="Autres Marques">
<option value="Abarth" > Abarth </option>
<option value="Aleko" > Aleko </option>
<option value="Alfa Romeo" > Alfa Romeo </option>
<option value="Alpina" > Alpina </option>
<option value="Aro" > Aro </option>
<option value="Artega" > Artega </option>
<option value="Aston Martin" > Aston Martin </option>
<option value="Autobianchi" > Autobianchi </option>
<option value="Auverland" > Auverland </option>
<option value="Bentley" > Bentley </option>
<option value="Bertone" > Bertone </option>
<option value="Bluecar Groupe Bollore" > Bluecar Groupe Bollore </option>
<option value="Buick" > Buick </option>
<option value="Cadillac" >Cadillac </option>
<option value="Chevrolet" > Chevrolet </option>
<option value="Chrysler" > Chrysler </option>
<option value="Corvette" > Corvette </option>
<option value="Dacia" > Dacia </option>
<option value="Daewoo" > Daewoo </option>
<option value="Daihatsu" > Daihatsu </option>
<option value="Dangel" > Dangel </option>
<option value="De La Chapelle" > De La Chapelle </option>
<option value="Dodge" > Dodge </option>
<option value="Donkervoort" > Donkervoort </option>
<option value="Ds" > Ds </option>
<option value="Ferrari" > Ferrari </option>
<option value="Fisker" > Fisker </option>
<option value="Gme" > Gme </option>
<option value="Honda" > Honda </option>
<option value="Hummer" > Hummer </option>
<option value="Hyundai" > Hyundai </option>
<option value="Infiniti" > Infiniti </option>
<option value="Isuzu" > Isuzu </option>
<option value="Iveco" > Iveco </option>
<option value="Jaguar" > Jaguar </option>
<option value="Jeep" > Jeep </option>
<option value="Kia" > Kia </option>
<option value="Lada" > Lada </option>
<option value="Lamborghini" > Lamborghini </option>
<option value="Lancia" > Lancia </option>
<option value="Land Rover" > Land Rover </option>
<option value="Lexus" > Lexus </option>
<option value="Lotus" > Lotus </option>
<option value="Mahindra" > Mahindra </option>
<option value="Maruti" > Maruti </option>
<option value="Maserati" > Maserati </option>
<option value="Mastretta" > Mastretta </option>
<option value="Maybach" > Maybach </option>
<option value="Mazda" > Mazda </option>
<option value="Mclaren" > Mclaren </option>
<option value="Autres" > Autres </option>
</optgroup>
</select>
</div>
<div class="control-group">
<label class="control-label" for="model_year" ><strong >?>Année Modèle </strong></label>
<div class="controls">
<select name="model_year" id="model_year" >
<option value="" selected>«Choisissez»</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div></div>
</div>
<div class="span4">
<div class="control-group">
<label class="control-label" for="carburant"><strong >Carburant *</strong></label>
<div class="controls">
<select name="carburant" id="carburant" >
<option value="" selected>«Choisissez»</option>
<option value="Essence" >Essence</option>
<option value="Diesel" >Diesel</option>
<option value="GPL" >GPL</option>
<option value="Electrique" >Electrique</option>
<option value="Autre" >Autre</option>
</select>
</div></div>
<div class="control-group">
<label id="model_for" class="control-label" for="modele"><strong >Modèle *</strong></label>
<div class="controls">
<input name="model" id="model" type="text" value="">
</div></div>
</div>
<div class="span4">
<div class="control-group">
<label class="control-label" for="boite_vitesse"><strong >Boite de vitesse *</strong></label>
<div class="controls">
<select name="boite_vitesse" id="boite_vitesse">
<option value="" selected>«Choisissez»</option>
<option value="manuelle" >Manuelle</option>
<option value="automatique" >Automatique</option>
</select>
</div></div>
<div class="control-group">
<label class="control-label" for="kilometrage"><strong ><Kilometrage: km *</strong></label>
<div class="controls">
<input name="kilometrage" id="kilometrage" type="text" value="">
</div>
</div>
</div>
</div><!--fin div style categ-->
<!--fin roupe--> </div>
<!-- 3 groupe-->
<div id="groupe3" style="display:none;">
<div class="row-fluid" style="background-color:#f9f9f9;">
<div class="span4">
<div class="control-group">
<label class="control-label" for="model_year" ><strong >Année Modèle *</strong></label>
<div class="controls">
<select name="model_year" id="model_year">
<option value="" selected>«Choisissez»</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div></div>
<div class="control-group">
<label class="control-label" for="km"><strong >Kilometrage: km *</strong></label>
<div class="controls">
<input name="km" type="text" value="" >
</div></div>
</div>
<div class="span8">
<div class="control-group">
<label class="control-label" for="cylindre"><strong >Cylindrée: cm³ </strong></label>
<div class="controls">
<input name="cylindre" type="text">
</div></div>
</div>
</div><!--fin div style categ-->
<!--fin groupe3--> </div>
<!--groupe4--> <div id="groupe4" style="display:none;">
<div class="row-fluid" style="background-color:#f9f9f9;">
<div class="span4">
<div class="control-group">
<label class="control-label" for="model_year" ><strong >Année Modèle *</strong></label>
<div class="controls">
<select name="model_year" >
<option value="" selected>«Choisissez»</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
<option value="1976">1976</option>
<option value="1977">1977</option>
<option value="1978">1978</option>
<option value="1979">1979</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div></div>
</div>
<div class="span8">
<div class="control-group">
<label class="control-label" for="km"><strong ><?php //echo $label1015 ;?>Kilometrage: km</strong></label>
<div class="controls">
<input name="km" type="text">
</div></div>
</div>
</div><!--fin div style categ-->
<!--fin groupe4--></div>
<div id="groupe33" style="display:none">
<div class="row-fluid" style="background-color:#f9f9f9;">
<div class="span4">
<div class="control-group">
<label class="control-label" for="Type_de_contrat"><strong ><?php //echo $label1015 ;?>Type de contrat *</strong></label>
<div class="controls">
<select name="Type_de_contrat" id="Type_de_contrat">
<option value="0" selected>«Choisissez»</option>
<option value="1" >CDD</option><option value="2" >CDI</option><option value="3" >Intérim</option><option value="4" >Indépendant/Franchise</option><option value="6" >Apprentissage</option><option value="5" >Stage/Alternance</option>
</select>
</div></div>
<div class="control-group">
<label class="control-label"><strong ><?php //echo $label711 ;?> Travail à :</strong ></label>
<label class="radio inline">
<input type="radio" name="jobtime" value="1" checked="checked"><span class="">Temps plein</span>
</label>
<label class="radio inline">
<input type="radio" name="jobtime" value="2" ><span class="">Temps partiel</span>
</label>
</div>
<div class="control-group">
<label class="control-label"><strong ><?php //echo $label711 ;?> Vous souhaitez recevoir les candidatures via :</strong ></label>
<label class="radio inline">
<input type="radio" name="adreply_type" value="1" checked="checked">
<span class="text mrl">Votre email</span>
</label>
<label class="radio inline">
<input type="radio" name="adreply_type" value="2" >
<span class="text">Votre site web</span>
</label>
</div>
</div>
<div class="span4">
<div class="control-group">
<label class="control-label" for="Secteur_d_activite"><strong ><?php //echo $label1015 ;?>Secteur d'activité </strong></label>
<div class="controls">
<select name="jobfield" id="jobfield" class="">
<option value="0" selected>«Choisissez»</option>
<option value="1" >Agriculture</option><option value="4" >Banque/Assurance/Finance</option><option value="2" >BTP/Construction</option><option value="3" >Commerce/Distribution</option><option value="13" >Hôtellerie/Restauration</option><option value="6" >Immobilier</option><option value="5" >Industrie/Environnement</option><option value="8" >Médecine/Santé</option><option value="9" >Services</option><option value="7" >Services publics/Administrations</option><option value="15" >Sport</option><option value="10" >Télécom/Internet/Médias</option><option value="14" >Textile/Mode/Luxe</option><option value="11" >Tourisme</option><option value="12" >Transport/Logistique</option>
</select>
</div></div>
<div class="control-group">
<label class="control-label" for="Fonction"><strong ><?php //echo $label1015 ;?>Fonction </strong></label>
<div class="controls">
<select name="jobduty" id="jobduty" class="select">
<option value="0" selected>«Choisissez»</option>
<option value="1" >Administration/Services généraux</option><option value="2" >Commercial/Vente</option><option value="3" >Comptabilité/Gestion/Finance</option><option value="4" >Conseil/Audit</option><option value="5" >Direction Générale</option><option value="16" >Etudes/Recherches/Ingénieries</option><option value="15" >Formation/Education</option><option value="7" >Hôtellerie/Restauration</option><option value="8" >Informatique/Internet</option><option value="9" >Juridique</option><option value="10" >Logistique/Achat/Transport</option><option value="11" >Marketing/Communication</option><option value="18" >Médecine/Santé</option><option value="12" >Ménage/Entretien</option><option value="17" >Ouvrier/Artisan</option><option value="19" >Production/Opérations</option><option value="13" >Ressources Humaines/Formation</option><option value="6" >Sécurité/Défense/Gardiennage</option><option value="14" >Services à la personne</option><option value="20" >Service Client/Accueil</option>
</select>
</div></div>
<div class="control-group">
<label class="control-label" for="experience"><strong ><?php //echo $label1015 ;?>Expérience * </strong></label>
<div class="controls">
<select name="jobexp" id="jobexp">
<option value="0" selected>«Choisissez»</option>
<option value="1" >0 à 2 ans</option><option value="3" >2 à 5 ans</option><option value="5" >5 ans et plus</option>
</select>
</div></div>
</div>
<div class="span4">
<div class="control-group">
<label class="control-label" for="jobstudy"><strong ><?php //echo $label1015 ;?>Niveau d'études *</strong></label>
<div class="controls">
<select name="jobstudy" id="jobstudy" class="select">
<option value="0" selected>«Choisissez»</option>
<option value="1" >Sans diplôme</option><option value="2" >BEPC/BET</option><option value="3" >Employé/Ouvrier spécialisé/Bac</option><option value="4" >Technicien/Employé/Bac+2</option><option value="5" >Agent de maîtrise/Bac+3</option><option value="6" >Ingénieur/Cadre/Bac+5 ou plus</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="adreply_redirect"><strong ><?php //echo $label1015 ;?>Lien de redirection vers votre offre d'emploi (site recruteur) *</strong></label>
<div class="controls">
<input type="text" id="adreply_redirect" name="adreply_redirect" value="" class="nude">
</div>
</div>
</div>
</div><!--fin div style categ-->
</div><!--fin groupe 33-->
<div style="background:#f2f2f2;">
<h3 style="padding-left: 1rem;color:#0088cc;font-size: 16px;"><?php //echo $label1033;?>Vos informations</h3>
</div><!--fin div style categ-->
<div class="control-group">
<label class="control-label" for="prenom"><strong >Votre prénom * :</strong></label>
<div class="controls">
<input type="text" id="prenom" name="prenom" value="" autocomplete="off" class="" >
</div>
</div>
<div class="control-group">
<label class="control-label" for="email"><strong >Votre téléphone * :</strong></label>
<div class="controls">
<input type="text" id="phone" name="phone" value="" maxlength="10" autocomplete="off" class="">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email"><strong >Votre email * :</strong></label>
<div class="controls">
<input type="text" id="email" name="email" value="" autocomplete="off" class="" >
</div>
</div>
</div>
</div>
</div>
<div class="container">
<p class="text-right"><strong>Champs obligatoires *</strong></p>
<hr>
<div class="control-group">
<label class="control-label" for="valider">Valider</label>
<input type="submit" name="envoye" value="Valider" class="btn btn-success">
<input type="reset" value="Initialiser" class="btn btn-info">
</div>
</form>
</body>
</html>
Re: verifier le contenu des champs masqué/affichés selon le choix de la catégorie en javascript et php
Posté : 05 oct. 2016, 12:18
par kevin254kl
Salut,
Peux tu mettre ton code dans les balises appropriées s'il te plaît? la console renvoi une erreur?
Re: verifier le contenu des champs masqué/affichés selon le choix de la catégorie en javascript et php
Posté : 05 oct. 2016, 13:12
par charlydar
ok, voici le code dans les balises appropriées.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Deposez une annonce</title>
<script>
// script champ hidden
function afficherAutre() {
var so = document.getElementById("sujet_for_offre_demploi");
var s = document.getElementById("sujet_for");
var m = document.getElementById("message");
var mo = document.getElementById("message_offre_demploi");
var gp2 = document.getElementById("groupe2");
var gp3 = document.getElementById("groupe3");
var gp4 = document.getElementById("groupe4");
var gp33 = document.getElementById("groupe33");
// cat1
if (document.form4.categorie.value == 1)
{
if (so.style.display == "none")
{so.style.display = "block";}
if (s.style.display == "block")
{s.style.display = "none";}
if (m.style.display == "block")
{m.style.display = "none";}
if (mo.style.display == "none")
{mo.style.display = "block";}
if (gp33.style.display == "none")
{gp33.style.display = "block";}
}
else
{
so.style.display = "none";
s.style.display = "block";
m.style.display = "block";
mo.style.display = "none";
gp33.style.display = "none";
}
// gp2
if (document.form4.categorie.value == 2)
{
if (gp2.style.display == "none")
{gp2.style.display = "block";}
}
else
{
gp2.style.display = "none";
}
// gp3
if (document.form4.categorie.value == 3)
{
if (gp3.style.display == "none")
{gp3.style.display = "block";}
}
else
{
gp3.style.display = "none";
}
// gp4
if (document.form4.categorie.value == 4)
{
if (gp4.style.display == "none")
{gp4.style.display = "block";}
}
else
{
gp4.style.display = "none";
}
}
function verif_formulaire()
{
var gp2 = document.getElementById("groupe2");
var gp33 = document.getElementById("groupe33")
if(document.form4.categorie.value == "0") {
alert("votre categorie ?");
document.form4.categorie.focus();
return false;
}
if(document.form4.company.value == "") {
alert("veuillez cocher la qualification");
document.getElementById("company").focus();
return false;
}
if(document.form4.type_annonce.value == "") {
alert("Votre type d'nnonce ?");
document.form4.type_annonce.focus();
return false;
}
if(document.form4.sujet.value == "") {
alert("Sujet de votre annonce ?");
document.form4.sujet.focus();
return false;
}
if(document.form4.message.value == "") {
alert("Votre message ?");
document.form4.message.focus();
return false;
}
if(document.form4.prenom.value == "") {
alert("Votre prenom ?");
document.form4.prenom.focus();
return false;
}
if(document.form4.phone.value == "") {
alert("Votre telephone ?");
document.form4.phone.focus();
return false;
}
if(document.form4.email.value == "") {
alert("Votre email ?");
document.form4.email.focus();
return false;
}
// Champs Masqués/Affichés
//gp33
if(document.form4.Type_de_contrat.value == "0") {
if (gp33.style.display == "block"){
alert("Veuillez indiquer le type de contrat.");
document.form4.Type_de_contrat.focus();
return false;
}
}
if(document.form4.jobexp.value == "0") {
if (gp33.style.display == "block"){
alert("Veuillez choisir un type.");
document.form4.jobexp.focus();
return false;
}
}
if(document.form4.adreply_redirect.value == "") {
if (gp33.style.display == "block"){
alert("Veuillez indiquer l'adresse de redirection.");
document.form4.adreply_redirect.focus();
return false;
}
}
if(document.form4.jobstudy.value == "0") {
if (gp33.style.display == "block"){
alert("Veuillez selectionner le niveau d'étude.");
document.form4.jobstudy.focus();
return false;
}
}
// gp2
if(document.form4.model.value == "") {
if (gp2.style.display == "block"){
alert("Veuillez indiquer le modèle.");
document.form4.model.focus();
return false;
}
}
if(document.form4.boite_vitesse.value == "") {
if (gp2.style.display == "block"){
alert("Veuillez selectionner la boite de vitesse.");
document.form4.boite_vitesse.focus();
return false;
}
}
if(document.form4.km.value == "") {
if (gp2.style.display == "block"){
alert("Veuillez indiquer le kilometrage.");
document.form4.km.focus();
return false;
}
}
if(document.form4.carburant.value == "") {
if (gp2.style.display == "block"){
alert("Veuillez selectionner le carburant.");
document.form4.carburant.focus();
return false;
}
}
}
</script>
</head>
<body>
<form id="form4" name="form4" method="post" action="annonce/new-sujet-poster.php" enctype="multipart/form-data" onSubmit="return verif_formulaire()">
<div>
<label for="categorie"><strong >Categorie * :</strong ></label>
<div>
<select id="categorie" name="categorie" style="width:200px;" onChange="afficherAutre()">
<option value="0">--Choississez--</option>
<option style='background-color:#f2f2f2' disabled id='cat71' >-- EMPLOI --</option>
<option value='1' id='cat33'>Offres d'emploi</option>
<option style='background-color:#f2f2f2' disabled id='cat1' >-- VEHICULES --</option>
<option value='2' id='cat2' >Voitures</option>
<option value='3' id='cat3' >Motos</option>
<option value='4' id='cat38' >Autres</option>
</select>
</div>
</div>
<div>
<label><strong >Vous êtez * :</strong ></label>
<label class="radio inline">
<input id="company" name="company" value="Particulier" type="radio" >Particulier
</label>
<label class="radio inline">
<input id="company" name="company" value="Professionnel" type="radio">Professionnel
</label>
</div>
<div>
<label for="objet"><strong >Type d'annonce* :</strong></label>
<div>
<select id="type_annonce" name="type_annonce">
<option value="">--Choississez--</option>
<option value=1>Offres</option>
<option value=2>Demandes</option>
<option value=3>Location</option>
</select>
</div>
</div>
<div>
<label id="sujet_for" style="display:block;" for="sujet_for"><strong >Titre de l"annonce * :</strong></label>
<label id="sujet_for_offre_demploi" style="display:none;" for="sujet_for_offre_demploi"><strong >Intitulé du poste * :</strong></label>
<div >
<input type="text" id="sujet" name="sujet" value="" maxlength="100" autocomplete="off" class="" >
</div>
</div>
<div>
<label id="message" style="display:block;" for="message"><strong >Texte de l'annonce * :</strong></label>
<label id="message_offre_demploi" style="display:none;" class="control-label" for="message_offre_demploi"><strong >Description du poste * :</strong></label>
<div>
<textarea id="message" name="message" rows="7" cols="60"></textarea>
</div>
</div>
<!-- groupe 2-->
<div id="groupe2" style="display:none;">
<div style="background-color:#f9f9f9;">
<div>
<div id="marque">
<label id="marque_for" for="marque"><strong >Marque </strong></label>
<select name="marque" id="marque" >
<option value="" selected>«Choisissez»</option>
<optgroup label="Marques Courantes">
<option value="Audi" >Audi </option>
<option value="Bmw" >Bmw </option>
<option value="Citroen" >Citroen </option>
<option value="Fiat" >Fiat </option>
<option value="Ford" >Ford </option>
<option value="Mercedes" >Mercedes </option>
<option value="Opel" >Opel </option>
<option value="Peugeot" >Peugeot </option>
<option value="Renault" >Renault </option>
<option value="Volkswagen" >Volkswagen </option>
</optgroup>
<optgroup label="Autres Marques">
<option value="Abarth" > Abarth </option>
<option value="Aleko" > Aleko </option>
<option value="Alfa Romeo" > Alfa Romeo </option>
<option value="Alpina" > Alpina </option>
<option value="Aro" > Aro </option>
<option value="Artega" > Artega </option>
<option value="Aston Martin" > Aston Martin </option>
<option value="Autobianchi" > Autobianchi </option>
<option value="Auverland" > Auverland </option>
<option value="Bentley" > Bentley </option>
<option value="Bertone" > Bertone </option>
<option value="Bluecar Groupe Bollore" > Bluecar Groupe Bollore </option>
<option value="Buick" > Buick </option>
<option value="Cadillac" >Cadillac </option>
<option value="Chevrolet" > Chevrolet </option>
<option value="Chrysler" > Chrysler </option>
<option value="Corvette" > Corvette </option>
<option value="Dacia" > Dacia </option>
<option value="Daewoo" > Daewoo </option>
<option value="Daihatsu" > Daihatsu </option>
<option value="Dangel" > Dangel </option>
<option value="De La Chapelle" > De La Chapelle </option>
<option value="Dodge" > Dodge </option>
<option value="Donkervoort" > Donkervoort </option>
<option value="Ds" > Ds </option>
<option value="Ferrari" > Ferrari </option>
<option value="Fisker" > Fisker </option>
<option value="Gme" > Gme </option>
<option value="Honda" > Honda </option>
<option value="Hummer" > Hummer </option>
<option value="Hyundai" > Hyundai </option>
<option value="Infiniti" > Infiniti </option>
<option value="Isuzu" > Isuzu </option>
<option value="Iveco" > Iveco </option>
<option value="Jaguar" > Jaguar </option>
<option value="Jeep" > Jeep </option>
<option value="Kia" > Kia </option>
<option value="Lada" > Lada </option>
<option value="Lamborghini" > Lamborghini </option>
<option value="Lancia" > Lancia </option>
<option value="Land Rover" > Land Rover </option>
<option value="Lexus" > Lexus </option>
<option value="Lotus" > Lotus </option>
<option value="Mahindra" > Mahindra </option>
<option value="Maruti" > Maruti </option>
<option value="Maserati" > Maserati </option>
<option value="Mastretta" > Mastretta </option>
<option value="Maybach" > Maybach </option>
<option value="Mazda" > Mazda </option>
<option value="Mclaren" > Mclaren </option>
<option value="Autres" > Autres </option>
</optgroup>
</select>
</div>
<div>
<label for="model_year" ><strong >Année Modèle </strong></label>
<div>
<select name="model_year" id="model_year" >
<option value="" selected>«Choisissez»</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div></div>
</div>
<div>
<div>
<label for="carburant"><strong >Carburant *</strong></label>
<div >
<select name="carburant" id="carburant" >
<option value="" selected>«Choisissez»</option>
<option value="Essence" >Essence</option>
<option value="Diesel" >Diesel</option>
<option value="GPL" >GPL</option>
<option value="Electrique" >Electrique</option>
<option value="Autre" >Autre</option>
</select>
</div></div>
<div>
<label id="model_for" for="modele"><strong >Modèle *</strong></label>
<div class="controls">
<input name="model" id="model" type="text" value="">
</div></div>
</div>
<div>
<div>
<label for="boite_vitesse"><strong >Boite de vitesse *</strong></label>
<div >
<select name="boite_vitesse" id="boite_vitesse">
<option value="" selected>«Choisissez»</option>
<option value="manuelle" >Manuelle</option>
<option value="automatique" >Automatique</option>
</select>
</div></div>
<div >
<label for="kilometrage"><strong ><strong>Kilometrage: km *</strong></label>
<div class="controls">
<input name="kilometrage" id="kilometrage" type="text" value="">
</div><!--fin div style categ-->
<!--fin roupe--> </div>
<!-- 3 groupe-->
<div id="groupe3" style="display:none;">
<div style="background-color:#f9f9f9;">
<div>
<div>
<label for="model_year" ><strong >Année Modèle *</strong></label>
<div>
<select name="model_year" id="model_year">
<option value="" selected>«Choisissez»</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div></div>
<div>
<label for="km"><strong >Kilometrage: km *</strong></label>
<div class="controls">
<input name="km" type="text" value="" >
</div></div>
</div>
<div>
<div>
<label class="control-label" for="cylindre"><strong >Cylindrée: cm³ </strong></label>
<div class="controls">
<input name="cylindre" type="text">
</div></div>
</div>
</div><!--fin div style categ-->
<!--fin groupe3--> </div>
<!--groupe4--> <div id="groupe4" style="display:none;">
<div style="background-color:#f9f9f9;">
<div>
<div >
<label for="model_year" ><strong >Année Modèle *</strong></label>
<div class="controls">
<select name="model_year" >
<option value="" selected>«Choisissez»</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div></div>
</div>
<div>
<div >
<label class="control-label" for="km"><strong >Kilometrage: km</strong></label>
<div class="controls">
<input name="km" type="text">
</div></div>
</div>
</div><!--fin div style categ-->
<!--fin groupe4--></div>
<div id="groupe33" style="display:none">
<div style="background-color:#f9f9f9;">
<div>
<div>
<label for="Type_de_contrat"><strong >Type de contrat *</strong></label>
<div >
<select name="Type_de_contrat" id="Type_de_contrat">
<option value="0" selected>«Choisissez»</option>
<option value="1" >CDD</option><option value="2" >CDI</option><option value="3" >Intérim</option><option value="4" >Indépendant/Franchise</option><option value="6" >Apprentissage</option><option value="5" >Stage/Alternance</option>
</select>
</div></div>
<div>
<label><strong >Travail à :</strong ></label>
<label >
<input type="radio" name="jobtime" value="1" checked="checked"><span class="">Temps plein</span>
</label>
<label >
<input type="radio" name="jobtime" value="2" ><span class="">Temps partiel</span>
</label>
</div>
<div >
<label ><strong > Vous souhaitez recevoir les candidatures via :</strong ></label>
<label >
<input type="radio" name="adreply_type" value="1" checked="checked">
<span class="text mrl">Votre email</span>
</label>
<label >
<input type="radio" name="adreply_type" value="2" >
<span class="text">Votre site web</span>
</label>
</div>
</div>
<div>
<div>
<label for="Secteur_d_activite"><strong >Secteur d'activité </strong></label>
<div >
<select name="jobfield" id="jobfield" >
<option value="0" selected>«Choisissez»</option>
<option value="1" >Agriculture</option><option value="4" >Banque/Assurance/Finance</option><option value="2" >BTP/Construction</option><option value="3" >Commerce/Distribution</option><option value="13" >Hôtellerie/Restauration</option><option value="6" >Immobilier</option><option value="5" >Industrie/Environnement</option><option value="8" >Médecine/Santé</option><option value="9" >Services</option><option value="7" >Services publics/Administrations</option><option value="15" >Sport</option><option value="10" >Télécom/Internet/Médias</option><option value="14" >Textile/Mode/Luxe</option><option value="11" >Tourisme</option><option value="12" >Transport/Logistique</option>
</select>
</div></div>
<div >
<label for="Fonction"><strong >Fonction </strong></label>
<div>
<select name="jobduty" id="jobduty" class="select">
<option value="0" selected>«Choisissez»</option>
<option value="1" >Administration/Services généraux</option><option value="2" >Commercial/Vente</option><option value="3" >Comptabilité/Gestion/Finance</option><option value="4" >Conseil/Audit</option><option value="5" >Direction Générale</option><option value="16" >Etudes/Recherches/Ingénieries</option><option value="15" >Formation/Education</option><option value="7" >Hôtellerie/Restauration</option><option value="8" >Informatique/Internet</option><option value="9" >Juridique</option><option value="10" >Logistique/Achat/Transport</option><option value="11" >Marketing/Communication</option><option value="18" >Médecine/Santé</option><option value="12" >Ménage/Entretien</option><option value="17" >Ouvrier/Artisan</option><option value="19" >Production/Opérations</option><option value="13" >Ressources Humaines/Formation</option><option value="6" >Sécurité/Défense/Gardiennage</option><option value="14" >Services à la personne</option><option value="20" >Service Client/Accueil</option>
</select>
</div></div>
<div>
<labelfor="experience"><strong >Expérience * </strong></label>
<div>
<select name="jobexp" id="jobexp">
<option value="0" selected>«Choisissez»</option>
<option value="1" >0 à 2 ans</option><option value="3" >2 à 5 ans</option><option value="5" >5 ans et plus</option>
</select>
</div></div>
</div>
<div>
<div>
<label for="jobstudy"><strong >Niveau d'études *</strong></label>
<div>
<select name="jobstudy" id="jobstudy" class="select">
<option value="0" selected>«Choisissez»</option>
<option value="1" >Sans diplôme</option><option value="2" >BEPC/BET</option><option value="3" >Employé/Ouvrier spécialisé/Bac</option><option value="4" >Technicien/Employé/Bac+2</option><option value="5" >Agent de maîtrise/Bac+3</option><option value="6" >Ingénieur/Cadre/Bac+5 ou plus</option>
</select>
</div>
</div>
<div>
<label class="control-label" for="adreply_redirect"><strong >Lien de redirection vers votre offre d'emploi (site recruteur) *</strong></label>
<div class="controls">
<input type="text" id="adreply_redirect" name="adreply_redirect" value="" class="nude">
</div>
</div>
</div>
</div><!--fin div style categ-->
</div><!--fin groupe 33-->
<div style="background:#f2f2f2;">
<h3 style="padding-left: 1rem;color:#0088cc;font-size: 16px;">Vos informations</h3>
</div><!--fin div style categ-->
<div >
<label for="prenom"><strong >Votre prénom * :</strong></label>
<div>
<input type="text" id="prenom" name="prenom" value="" autocomplete="off" class="" >
</div>
</div>
<div>
<label for="email"><strong >Votre téléphone * :</strong></label>
<div>
<input type="text" id="phone" name="phone" value="" maxlength="10" autocomplete="off" class="">
</div>
</div>
<div>
<label for="email"><strong >Votre email * :</strong></label>
<div>
<input type="text" id="email" name="email" value="" autocomplete="off" class="" >
</div>
</div>
<div>
<p class="text-right"><strong>Champs obligatoires *</strong></p>
<hr>
<div>
<label for="valider">Valider</label>
<input type="submit" name="envoye" value="Valider">
<input type="reset" value="Initialiser">
</div>
</form>
</body>
</html>
Re: verifier le contenu des champs masqué/affichés selon le choix de la catégorie en javascript et php
Posté : 05 oct. 2016, 13:28
par charlydar
Excuses moi, vous devez utiliser ce code que je viens de tester.
merci pour la réponse !
ci joint le code vérifié:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Deposez une annonce</title>
<script>
// script champ hidden
function afficherAutre() {
var so = document.getElementById("sujet_for_offre_demploi");
var s = document.getElementById("sujet_for");
var m = document.getElementById("message");
var mo = document.getElementById("message_offre_demploi");
var gp2 = document.getElementById("groupe2");
var gp3 = document.getElementById("groupe3");
var gp4 = document.getElementById("groupe4");
var gp33 = document.getElementById("groupe33");
// cat1
if (document.form4.categorie.value == 1)
{
if (so.style.display == "none")
{so.style.display = "block";}
if (s.style.display == "block")
{s.style.display = "none";}
if (m.style.display == "block")
{m.style.display = "none";}
if (mo.style.display == "none")
{mo.style.display = "block";}
if (gp33.style.display == "none")
{gp33.style.display = "block";}
}
else
{
so.style.display = "none";
s.style.display = "block";
m.style.display = "block";
mo.style.display = "none";
gp33.style.display = "none";
}
// gp2
if (document.form4.categorie.value == 2)
{
if (gp2.style.display == "none")
{gp2.style.display = "block";}
}
else
{
gp2.style.display = "none";
}
// gp3
if (document.form4.categorie.value == 3)
{
if (gp3.style.display == "none")
{gp3.style.display = "block";}
}
else
{
gp3.style.display = "none";
}
// gp4
if (document.form4.categorie.value == 4)
{
if (gp4.style.display == "none")
{gp4.style.display = "block";}
}
else
{
gp4.style.display = "none";
}
}
function verif_formulaire()
{
var gp2 = document.getElementById("groupe2");
var gp33 = document.getElementById("groupe33")
if(document.form4.categorie.value == "0") {
alert("votre categorie ?");
document.form4.categorie.focus();
return false;
}
if(document.form4.company.value == "") {
alert("veuillez cocher la qualification");
document.getElementById("company").focus();
return false;
}
if(document.form4.type_annonce.value == "") {
alert("Votre type d'nnonce ?");
document.form4.type_annonce.focus();
return false;
}
if(document.form4.sujet.value == "") {
alert("Sujet de votre annonce ?");
document.form4.sujet.focus();
return false;
}
if(document.form4.message.value == "") {
alert("Votre message ?");
document.form4.message.focus();
return false;
}
if(document.form4.prenom.value == "") {
alert("Votre prenom ?");
document.form4.prenom.focus();
return false;
}
if(document.form4.phone.value == "") {
alert("Votre telephone ?");
document.form4.phone.focus();
return false;
}
if(document.form4.email.value == "") {
alert("Votre email ?");
document.form4.email.focus();
return false;
}
// Champs Masqués/Affichés
//gp33
if(document.form4.Type_de_contrat.value == "0") {
if (gp33.style.display == "block"){
alert("Veuillez indiquer le type de contrat.");
document.form4.Type_de_contrat.focus();
return false;
}
}
if(document.form4.jobexp.value == "0") {
if (gp33.style.display == "block"){
alert("Veuillez choisir un type.");
document.form4.jobexp.focus();
return false;
}
}
if(document.form4.adreply_redirect.value == "") {
if (gp33.style.display == "block"){
alert("Veuillez indiquer l'adresse de redirection.");
document.form4.adreply_redirect.focus();
return false;
}
}
if(document.form4.jobstudy.value == "0") {
if (gp33.style.display == "block"){
alert("Veuillez selectionner le niveau d'étude.");
document.form4.jobstudy.focus();
return false;
}
}
// gp2
if(document.form4.model.value == "") {
if (gp2.style.display == "block"){
alert("Veuillez indiquer le modèle.");
document.form4.model.focus();
return false;
}
}
if(document.form4.boite_vitesse.value == "") {
if (gp2.style.display == "block"){
alert("Veuillez selectionner la boite de vitesse.");
document.form4.boite_vitesse.focus();
return false;
}
}
if(document.form4.km.value == "") {
if (gp2.style.display == "block"){
alert("Veuillez indiquer le kilometrage.");
document.form4.km.focus();
return false;
}
}
if(document.form4.carburant.value == "") {
if (gp2.style.display == "block"){
alert("Veuillez selectionner le carburant.");
document.form4.carburant.focus();
return false;
}
}
}
</script>
</head>
<body>
<form id="form4" name="form4" method="post" action="annonce/new-sujet-poster.php" enctype="multipart/form-data" onSubmit="return verif_formulaire()">
<div>
<label for="categorie"><strong >Categorie * :</strong ></label>
<div>
<select id="categorie" name="categorie" style="width:200px;" onChange="afficherAutre()">
<option value='0' >--Choississez--</option>
<option style='background-color:#f2f2f2' disabled id='cat71' >-- EMPLOI --</option>
<option value='1' id='cat33'>Offres d'emploi</option>
<option style='background-color:#f2f2f2' disabled id='cat1' >-- VEHICULES --</option>
<option value='2' id='cat2' >Voitures</option>
<option value='3' id='cat3' >Motos</option>
<option value='4' id='cat38' >Autres</option>
</select>
</div>
</div>
<div>
<label><strong >Vous êtez * :</strong ></label>
<label class="radio inline">
<input id="company" name="company" value="Particulier" type="radio" >Particulier
</label>
<label class="radio inline">
<input id="company" name="company" value="Professionnel" type="radio">Professionnel
</label>
</div>
<div>
<label for="objet"><strong >Type d'annonce* :</strong></label>
<div>
<select id="type_annonce" name="type_annonce">
<option value="">--Choississez--</option>
<option value=1>Offres</option>
<option value=2>Demandes</option>
<option value=3>Location</option>
</select>
</div>
</div>
<div>
<label id="sujet_for" style="display:block;" for="sujet_for"><strong >Titre de l"annonce * :</strong></label>
<label id="sujet_for_offre_demploi" style="display:none;" for="sujet_for_offre_demploi"><strong >Intitulé du poste * :</strong></label>
<div >
<input type="text" id="sujet" name="sujet" value="" maxlength="100" autocomplete="off" class="" >
</div>
</div>
<div>
<label id="message" style="display:block;" for="message"><strong >Texte de l'annonce * :</strong></label>
<label id="message_offre_demploi" style="display:none;" class="control-label" for="message_offre_demploi"><strong >Description du poste * :</strong></label>
<div>
<textarea id="message" name="message" rows="7" cols="60"></textarea>
</div>
</div>
<!-- groupe 2-->
<div id="groupe2" style="display:none;">
<div style="background-color:#f9f9f9;">
<div>
<div id="marque">
<label id="marque_for" for="marque"><strong >Marque </strong></label>
<select name="marque" id="marque" >
<option value="" selected>«Choisissez»</option>
<optgroup label="Marques Courantes">
<option value="Audi" >Audi </option>
<option value="Bmw" >Bmw </option>
<option value="Citroen" >Citroen </option>
<option value="Fiat" >Fiat </option>
<option value="Ford" >Ford </option>
<option value="Mercedes" >Mercedes </option>
<option value="Opel" >Opel </option>
<option value="Peugeot" >Peugeot </option>
<option value="Renault" >Renault </option>
<option value="Volkswagen" >Volkswagen </option>
</optgroup>
<optgroup label="Autres Marques">
<option value="Abarth" > Abarth </option>
<option value="Aleko" > Aleko </option>
<option value="Alfa Romeo" > Alfa Romeo </option>
<option value="Alpina" > Alpina </option>
<option value="Aro" > Aro </option>
<option value="Artega" > Artega </option>
<option value="Aston Martin" > Aston Martin </option>
<option value="Autobianchi" > Autobianchi </option>
<option value="Auverland" > Auverland </option>
<option value="Bentley" > Bentley </option>
<option value="Bertone" > Bertone </option>
<option value="Bluecar Groupe Bollore" > Bluecar Groupe Bollore </option>
<option value="Buick" > Buick </option>
<option value="Cadillac" >Cadillac </option>
<option value="Chevrolet" > Chevrolet </option>
<option value="Chrysler" > Chrysler </option>
<option value="Corvette" > Corvette </option>
<option value="Dacia" > Dacia </option>
<option value="Daewoo" > Daewoo </option>
<option value="Daihatsu" > Daihatsu </option>
<option value="Dangel" > Dangel </option>
<option value="De La Chapelle" > De La Chapelle </option>
<option value="Dodge" > Dodge </option>
<option value="Donkervoort" > Donkervoort </option>
<option value="Ds" > Ds </option>
<option value="Ferrari" > Ferrari </option>
<option value="Fisker" > Fisker </option>
<option value="Gme" > Gme </option>
<option value="Honda" > Honda </option>
<option value="Hummer" > Hummer </option>
<option value="Hyundai" > Hyundai </option>
<option value="Infiniti" > Infiniti </option>
<option value="Isuzu" > Isuzu </option>
<option value="Iveco" > Iveco </option>
<option value="Jaguar" > Jaguar </option>
<option value="Jeep" > Jeep </option>
<option value="Kia" > Kia </option>
<option value="Lada" > Lada </option>
<option value="Lamborghini" > Lamborghini </option>
<option value="Lancia" > Lancia </option>
<option value="Land Rover" > Land Rover </option>
<option value="Lexus" > Lexus </option>
<option value="Lotus" > Lotus </option>
<option value="Mahindra" > Mahindra </option>
<option value="Maruti" > Maruti </option>
<option value="Maserati" > Maserati </option>
<option value="Mastretta" > Mastretta </option>
<option value="Maybach" > Maybach </option>
<option value="Mazda" > Mazda </option>
<option value="Mclaren" > Mclaren </option>
<option value="Autres" > Autres </option>
</optgroup>
</select>
</div>
<div>
<label for="model_year" ><strong >Année Modèle </strong></label>
<div>
<select name="model_year" id="model_year" >
<option value="" selected>«Choisissez»</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div></div>
</div>
<div>
<div>
<label for="carburant"><strong >Carburant *</strong></label>
<div >
<select name="carburant" id="carburant" >
<option value="" selected>«Choisissez»</option>
<option value="Essence" >Essence</option>
<option value="Diesel" >Diesel</option>
<option value="GPL" >GPL</option>
<option value="Electrique" >Electrique</option>
<option value="Autre" >Autre</option>
</select>
</div></div>
<div>
<label id="model_for" for="modele"><strong >Modèle *</strong></label>
<div class="controls">
<input name="model" id="model" type="text" value="">
</div></div>
</div>
<div>
<div>
<label for="boite_vitesse"><strong >Boite de vitesse *</strong></label>
<div >
<select name="boite_vitesse" id="boite_vitesse">
<option value="" selected>«Choisissez»</option>
<option value="manuelle" >Manuelle</option>
<option value="automatique" >Automatique</option>
</select>
</div></div>
<div >
<label for="kilometrage"><strong ><strong>Kilometrage: km *</strong></label>
<div class="controls">
<input name="kilometrage" id="kilometrage" type="text" value="">
</div>
</div>
</div>
</div><!--fin div style categ-->
<!--fin roupe--> </div>
<!-- 3 groupe-->
<div id="groupe3" style="display:none;">
<div class="row-fluid" style="background-color:#f9f9f9;">
<div>
<div>
<label for="model_year" ><strong >Année Modèle *</strong></label>
<div>
<select name="model_year" id="model_year">
<option value="" selected>«Choisissez»</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div></div>
<div>
<label for="km"><strong >Kilometrage: km *</strong></label>
<div class="controls">
<input name="km" type="text" value="" >
</div></div>
</div>
<div>
<div>
<label class="control-label" for="cylindre"><strong >Cylindrée: cm³ </strong></label>
<div class="controls">
<input name="cylindre" type="text">
</div></div>
</div>
</div><!--fin div style categ-->
<!--fin groupe3--> </div>
<!--groupe4--> <div id="groupe4" style="display:none;">
<div style="background-color:#f9f9f9;">
<div>
<div >
<label for="model_year" ><strong >Année Modèle *</strong></label>
<div class="controls">
<select name="model_year" >
<option value="" selected>«Choisissez»</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div></div>
</div>
<div>
<div >
<label class="control-label" for="km"><strong >Kilometrage: km</strong></label>
<div class="controls">
<input name="km" type="text">
</div></div>
</div>
</div><!--fin div style categ-->
<!--fin groupe4--></div>
<div id="groupe33" style="display:none">
<div style="background-color:#f9f9f9;">
<div>
<div>
<label for="Type_de_contrat"><strong >Type de contrat *</strong></label>
<div >
<select name="Type_de_contrat" id="Type_de_contrat">
<option value="0" selected>«Choisissez»</option>
<option value="1" >CDD</option><option value="2" >CDI</option><option value="3" >Intérim</option><option value="4" >Indépendant/Franchise</option><option value="6" >Apprentissage</option><option value="5" >Stage/Alternance</option>
</select>
</div></div>
<div>
<label><strong >Travail à :</strong ></label>
<label >
<input type="radio" name="jobtime" value="1" checked="checked"><span class="">Temps plein</span>
</label>
<label >
<input type="radio" name="jobtime" value="2" ><span class="">Temps partiel</span>
</label>
</div>
<div >
<label ><strong ><?php //echo $label711 ;?> Vous souhaitez recevoir les candidatures via :</strong ></label>
<label >
<input type="radio" name="adreply_type" value="1" checked="checked">
<span class="text mrl">Votre email</span>
</label>
<label >
<input type="radio" name="adreply_type" value="2" >
<span class="text">Votre site web</span>
</label>
</div>
</div>
<div>
<div >
<label for="Secteur_d_activite"><strong ><?php //echo $label1015 ;?>Secteur d'activité </strong></label>
<div >
<select name="jobfield" id="jobfield" >
<option value="0" selected>«Choisissez»</option>
<option value="1" >Agriculture</option><option value="4" >Banque/Assurance/Finance</option><option value="2" >BTP/Construction</option><option value="3" >Commerce/Distribution</option><option value="13" >Hôtellerie/Restauration</option><option value="6" >Immobilier</option><option value="5" >Industrie/Environnement</option><option value="8" >Médecine/Santé</option><option value="9" >Services</option><option value="7" >Services publics/Administrations</option><option value="15" >Sport</option><option value="10" >Télécom/Internet/Médias</option><option value="14" >Textile/Mode/Luxe</option><option value="11" >Tourisme</option><option value="12" >Transport/Logistique</option>
</select>
</div></div>
<div >
<label for="Fonction"><strong ><?php //echo $label1015 ;?>Fonction </strong></label>
<div>
<select name="jobduty" id="jobduty" class="select">
<option value="0" selected>«Choisissez»</option>
<option value="1" >Administration/Services généraux</option><option value="2" >Commercial/Vente</option><option value="3" >Comptabilité/Gestion/Finance</option><option value="4" >Conseil/Audit</option><option value="5" >Direction Générale</option><option value="16" >Etudes/Recherches/Ingénieries</option><option value="15" >Formation/Education</option><option value="7" >Hôtellerie/Restauration</option><option value="8" >Informatique/Internet</option><option value="9" >Juridique</option><option value="10" >Logistique/Achat/Transport</option><option value="11" >Marketing/Communication</option><option value="18" >Médecine/Santé</option><option value="12" >Ménage/Entretien</option><option value="17" >Ouvrier/Artisan</option><option value="19" >Production/Opérations</option><option value="13" >Ressources Humaines/Formation</option><option value="6" >Sécurité/Défense/Gardiennage</option><option value="14" >Services à la personne</option><option value="20" >Service Client/Accueil</option>
</select>
</div></div>
<div>
<labelfor="experience"><strong >Expérience * </strong></label>
<div>
<select name="jobexp" id="jobexp">
<option value="0" selected>«Choisissez»</option>
<option value="1" >0 à 2 ans</option><option value="3" >2 à 5 ans</option><option value="5" >5 ans et plus</option>
</select>
</div></div>
</div>
<div>
<div>
<label for="jobstudy"><strong ><?php //echo $label1015 ;?>Niveau d'études *</strong></label>
<div>
<select name="jobstudy" id="jobstudy" class="select">
<option value="0" selected>«Choisissez»</option>
<option value="1" >Sans diplôme</option><option value="2" >BEPC/BET</option><option value="3" >Employé/Ouvrier spécialisé/Bac</option><option value="4" >Technicien/Employé/Bac+2</option><option value="5" >Agent de maîtrise/Bac+3</option><option value="6" >Ingénieur/Cadre/Bac+5 ou plus</option>
</select>
</div>
</div>
<div>
<label class="control-label" for="adreply_redirect"><strong >Lien de redirection vers votre offre d'emploi (site recruteur) *</strong></label>
<div class="controls">
<input type="text" id="adreply_redirect" name="adreply_redirect" value="" class="nude">
</div>
</div>
</div>
</div><!--fin div style categ-->
</div><!--fin groupe 33-->
<div style="background:#f2f2f2;">
<h3 style="padding-left: 1rem;color:#0088cc;font-size: 16px;">Vos informations</h3>
</div><!--fin div style categ-->
<div >
<label for="prenom"><strong >Votre prénom * :</strong></label>
<div>
<input type="text" id="prenom" name="prenom" value="" autocomplete="off" class="" >
</div>
</div>
<div>
<label for="email"><strong >Votre téléphone * :</strong></label>
<div>
<input type="text" id="phone" name="phone" value="" maxlength="10" autocomplete="off" class="">
</div>
</div>
<div>
<label for="email"><strong >Votre email * :</strong></label>
<div>
<input type="text" id="email" name="email" value="" autocomplete="off" class="" >
</div>
</div>
</div>
</div>
</div>
<div >
<p class="text-right"><strong>Champs obligatoires *</strong></p>
<hr>
<div>
<label for="valider">Valider</label>
<input type="submit" name="envoye" value="Valider">
<input type="reset" value="Initialiser">
</div>
</form>
</body>
</html>
Re: verifier le contenu des champs masqué/affichés selon le choix de la catégorie en javascript et php
Posté : 06 oct. 2016, 12:22
par moogli
désolé on ne va pas tester 632 lignes de code comme ça !
il faut plus d'info, qu'elle est l'erreur, est ce que la console développeur de ton navigateur indique une erreur JS
est ce que c'est un comportement inattendu ?
as tu essayé de déboguer le JS (chrome, par exemple, propose de le faire avec l'outils de dev, tu peux poser des points d'ârret et si tu est en local synchroniser avec les fichiers et faire les modif s avec chrome

)
@+
Re: verifier le contenu des champs masqué/affichés selon le choix de la catégorie en javascript et php
Posté : 06 oct. 2016, 14:40
par charlydar
Merci de votre réponse !
Au faite le problème est au niveau de ma fonction "verif_formulaire", cette fonction a pour rôle de vérifier si le visiteur a rempli les champs obligatoires masqués qui s'affichent ou non masque. Puisque le visiteur choisi la catégorie dans le List box et les champs correspondants à cette catégorie s'affichent y compris des champs obligatoires et non obligatoires. En cliquant sur le bouton envoyer sans remplir ces champs le message d'alerte s'affiche pour informer le visiteur que les champs obligatoire ne sont pas remplis. Ainsi, dans la pratique ça marche bien avec la catégorie "offre d'emploi" qui est le premier, mais avec la catégorie "voiture" qui est le second, la fonction ne vérifie pas la saisie de tous les champs obligatoires et elle déclenche l'envoie du formulaire à la page de traitement. c'est ça mon soucis . pour tester cela, il suffit d'utiliser le code suivant:
Code : Tout sélectionner
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Deposez une annonce</title>
<script>
// script champ hidden
function afficherAutre() {
var so = document.getElementById("sujet_for_offre_demploi");
var s = document.getElementById("sujet_for");
var m = document.getElementById("message");
var mo = document.getElementById("message_offre_demploi");
var gp2 = document.getElementById("groupe2");
var gp3 = document.getElementById("groupe3");
var gp4 = document.getElementById("groupe4");
var gp33 = document.getElementById("groupe33");
// cat1
if (document.form4.categorie.value == 1)
{
if (so.style.display == "none")
{so.style.display = "block";}
if (s.style.display == "block")
{s.style.display = "none";}
if (m.style.display == "block")
{m.style.display = "none";}
if (mo.style.display == "none")
{mo.style.display = "block";}
if (gp33.style.display == "none")
{gp33.style.display = "block";}
}
else
{
so.style.display = "none";
s.style.display = "block";
m.style.display = "block";
mo.style.display = "none";
gp33.style.display = "none";
}
// gp2
if (document.form4.categorie.value == 2)
{
if (gp2.style.display == "none")
{gp2.style.display = "block";}
}
else
{
gp2.style.display = "none";
}
// gp3
if (document.form4.categorie.value == 3)
{
if (gp3.style.display == "none")
{gp3.style.display = "block";}
}
else
{
gp3.style.display = "none";
}
// gp4
if (document.form4.categorie.value == 4)
{
if (gp4.style.display == "none")
{gp4.style.display = "block";}
}
else
{
gp4.style.display = "none";
}
}
function verif_formulaire()
{
var gp2 = document.getElementById("groupe2");
var gp33 = document.getElementById("groupe33")
if(document.form4.categorie.value == "0") {
alert("votre categorie ?");
document.form4.categorie.focus();
return false;
}
if(document.form4.company.value == "") {
alert("veuillez cocher la qualification");
document.getElementById("company").focus();
return false;
}
if(document.form4.type_annonce.value == "") {
alert("Votre type d'nnonce ?");
document.form4.type_annonce.focus();
return false;
}
if(document.form4.sujet.value == "") {
alert("Sujet de votre annonce ?");
document.form4.sujet.focus();
return false;
}
if(document.form4.message.value == "") {
alert("Votre message ?");
document.form4.message.focus();
return false;
}
if(document.form4.prenom.value == "") {
alert("Votre prenom ?");
document.form4.prenom.focus();
return false;
}
if(document.form4.phone.value == "") {
alert("Votre telephone ?");
document.form4.phone.focus();
return false;
}
if(document.form4.email.value == "") {
alert("Votre email ?");
document.form4.email.focus();
return false;
}
// Champs Masqués/Affichés
//gp33
if(document.form4.Type_de_contrat.value == "0") {
if (gp33.style.display == "block"){
alert("Veuillez indiquer le type de contrat.");
document.form4.Type_de_contrat.focus();
return false;
}
}
if(document.form4.jobexp.value == "0") {
if (gp33.style.display == "block"){
alert("Veuillez choisir un type.");
document.form4.jobexp.focus();
return false;
}
}
if(document.form4.adreply_redirect.value == "") {
if (gp33.style.display == "block"){
alert("Veuillez indiquer l'adresse de redirection.");
document.form4.adreply_redirect.focus();
return false;
}
}
if(document.form4.jobstudy.value == "0") {
if (gp33.style.display == "block"){
alert("Veuillez selectionner le niveau d'étude.");
document.form4.jobstudy.focus();
return false;
}
}
// gp2
if(document.form4.model.value == "") {
if (gp2.style.display == "block"){
alert("Veuillez indiquer le modèle.");
document.form4.model.focus();
return false;
}
}
if(document.form4.boite_vitesse.value == "") {
if (gp2.style.display == "block"){
alert("Veuillez selectionner la boite de vitesse.");
document.form4.boite_vitesse.focus();
return false;
}
}
if(document.form4.km.value == "") {
if (gp2.style.display == "block"){
alert("Veuillez indiquer le kilometrage.");
document.form4.km.focus();
return false;
}
}
if(document.form4.carburant.value == "") {
if (gp2.style.display == "block"){
alert("Veuillez selectionner le carburant.");
document.form4.carburant.focus();
return false;
}
}
}
</script>
</head>
<body>
<form id="form4" name="form4" method="post" action="annonce/new-sujet-poster.php" enctype="multipart/form-data" onSubmit="return verif_formulaire()">
<div>
<label for="categorie"><strong >Categorie * :</strong ></label>
<div>
<select id="categorie" name="categorie" style="width:200px;" onChange="afficherAutre()">
<option value='0' >--Choississez--</option>
<option style='background-color:#f2f2f2' disabled id='cat71' >-- EMPLOI --</option>
<option value='1' id='cat33'>Offres d'emploi</option>
<option style='background-color:#f2f2f2' disabled id='cat1' >-- VEHICULES --</option>
<option value='2' id='cat2' >Voitures</option>
<option value='3' id='cat3' >Motos</option>
<option value='4' id='cat38' >Autres</option>
</select>
</div>
</div>
<div>
<label><strong >Vous êtez * :</strong ></label>
<label class="radio inline">
<input id="company" name="company" value="Particulier" type="radio" >Particulier
</label>
<label class="radio inline">
<input id="company" name="company" value="Professionnel" type="radio">Professionnel
</label>
</div>
<div>
<label for="objet"><strong >Type d'annonce* :</strong></label>
<div>
<select id="type_annonce" name="type_annonce">
<option value="">--Choississez--</option>
<option value=1>Offres</option>
<option value=2>Demandes</option>
<option value=3>Location</option>
</select>
</div>
</div>
<div>
<label id="sujet_for" style="display:block;" for="sujet_for"><strong >Titre de l"annonce * :</strong></label>
<label id="sujet_for_offre_demploi" style="display:none;" for="sujet_for_offre_demploi"><strong >Intitulé du poste * :</strong></label>
<div >
<input type="text" id="sujet" name="sujet" value="" maxlength="100" autocomplete="off" class="" >
</div>
</div>
<div>
<label id="message" style="display:block;" for="message"><strong >Texte de l'annonce * :</strong></label>
<label id="message_offre_demploi" style="display:none;" class="control-label" for="message_offre_demploi"><strong >Description du poste * :</strong></label>
<div>
<textarea id="message" name="message" rows="7" cols="60"></textarea>
</div>
</div>
<!-- groupe 2-->
<div id="groupe2" style="display:none;">
<div style="background-color:#f9f9f9;">
<div>
<div>
<label id="marque_for" for="marque"><strong >Marque </strong></label>
<select name="marque" id="marque" >
<option value="" selected>«Choisissez»</option>
<optgroup label="Marques Courantes">
<option value="Audi" >Audi </option>
<option value="Bmw" >Bmw </option>
<option value="Citroen" >Citroen </option>
<option value="Fiat" >Fiat </option>
<option value="Ford" >Ford </option>
<option value="Mercedes" >Mercedes </option>
<option value="Opel" >Opel </option>
<option value="Peugeot" >Peugeot </option>
<option value="Renault" >Renault </option>
<option value="Volkswagen" >Volkswagen </option>
</optgroup>
<optgroup label="Autres Marques">
<option value="Abarth" > Abarth </option>
<option value="Aleko" > Aleko </option>
<option value="Alfa Romeo" > Alfa Romeo </option>
<option value="Alpina" > Alpina </option>
<option value="Aro" > Aro </option>
<option value="Artega" > Artega </option>
<option value="Aston Martin" > Aston Martin </option>
<option value="Autobianchi" > Autobianchi </option>
<option value="Auverland" > Auverland </option>
<option value="Bentley" > Bentley </option>
<option value="Bertone" > Bertone </option>
<option value="Bluecar Groupe Bollore" > Bluecar Groupe Bollore </option>
<option value="Buick" > Buick </option>
<option value="Cadillac" >Cadillac </option>
<option value="Chevrolet" > Chevrolet </option>
<option value="Chrysler" > Chrysler </option>
<option value="Corvette" > Corvette </option>
<option value="Dacia" > Dacia </option>
<option value="Daewoo" > Daewoo </option>
<option value="Daihatsu" > Daihatsu </option>
<option value="Dangel" > Dangel </option>
<option value="De La Chapelle" > De La Chapelle </option>
<option value="Dodge" > Dodge </option>
<option value="Donkervoort" > Donkervoort </option>
<option value="Ds" > Ds </option>
<option value="Ferrari" > Ferrari </option>
<option value="Fisker" > Fisker </option>
<option value="Gme" > Gme </option>
<option value="Honda" > Honda </option>
<option value="Hummer" > Hummer </option>
<option value="Hyundai" > Hyundai </option>
<option value="Infiniti" > Infiniti </option>
<option value="Isuzu" > Isuzu </option>
<option value="Iveco" > Iveco </option>
<option value="Jaguar" > Jaguar </option>
<option value="Jeep" > Jeep </option>
<option value="Kia" > Kia </option>
<option value="Lada" > Lada </option>
<option value="Lamborghini" > Lamborghini </option>
<option value="Lancia" > Lancia </option>
<option value="Land Rover" > Land Rover </option>
<option value="Lexus" > Lexus </option>
<option value="Lotus" > Lotus </option>
<option value="Mahindra" > Mahindra </option>
<option value="Maruti" > Maruti </option>
<option value="Maserati" > Maserati </option>
<option value="Mastretta" > Mastretta </option>
<option value="Maybach" > Maybach </option>
<option value="Mazda" > Mazda </option>
<option value="Mclaren" > Mclaren </option>
<option value="Autres" > Autres </option>
</optgroup>
</select>
</div>
<div>
<label for="model_year" ><strong >Année Modèle </strong></label>
<div>
<select name="model_year" id="model_year" >
<option value="" selected>«Choisissez»</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div></div>
</div>
<div>
<div>
<label for="carburant"><strong >Carburant *</strong></label>
<div >
<select name="carburant" id="carburant" >
<option value="" selected>«Choisissez»</option>
<option value="Essence" >Essence</option>
<option value="Diesel" >Diesel</option>
<option value="GPL" >GPL</option>
<option value="Electrique" >Electrique</option>
<option value="Autre" >Autre</option>
</select>
</div></div>
<div>
<label id="model_for" for="modele"><strong >Modèle *</strong></label>
<div class="controls">
<input name="model" id="model" type="text" value="">
</div></div>
</div>
<div>
<div>
<label for="boite_vitesse"><strong >Boite de vitesse *</strong></label>
<div >
<select name="boite_vitesse" id="boite_vitesse">
<option value="" selected>«Choisissez»</option>
<option value="manuelle" >Manuelle</option>
<option value="automatique" >Automatique</option>
</select>
</div></div>
<div >
<label for="kilometrage"><strong ><strong>Kilometrage: km *</strong></label>
<div class="controls">
<input name="kilometrage" id="kilometrage" type="text" value="">
</div>
</div>
</div>
</div><!--fin div style categ-->
<!--fin roupe--> </div>
<!-- 3 groupe-->
<div id="groupe3" style="display:none;">
<div class="row-fluid" style="background-color:#f9f9f9;">
<div>
<div>
<label for="model_year" ><strong >Année Modèle *</strong></label>
<div>
<select name="model_year" id="model_year">
<option value="" selected>«Choisissez»</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div></div>
<div>
<label for="km"><strong >Kilometrage: km *</strong></label>
<div class="controls">
<input name="km" type="text" value="" >
</div></div>
</div>
<div>
<div>
<label class="control-label" for="cylindre"><strong >Cylindrée: cm³ </strong></label>
<div class="controls">
<input name="cylindre" type="text">
</div></div>
</div>
</div><!--fin div style categ-->
<!--fin groupe3--> </div>
<!--groupe4--> <div id="groupe4" style="display:none;">
<div style="background-color:#f9f9f9;">
<div>
<div >
<label for="model_year" ><strong >Année Modèle *</strong></label>
<div class="controls">
<select name="model_year" >
<option value="" selected>«Choisissez»</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div></div>
</div>
<div>
<div >
<label class="control-label" for="km"><strong >Kilometrage: km</strong></label>
<div class="controls">
<input name="km" type="text">
</div></div>
</div>
</div><!--fin div style categ-->
<!--fin groupe4--></div>
<div id="groupe33" style="display:none">
<div style="background-color:#f9f9f9;">
<div>
<div>
<label for="Type_de_contrat"><strong >Type de contrat *</strong></label>
<div >
<select name="Type_de_contrat" id="Type_de_contrat">
<option value="0" selected>«Choisissez»</option>
<option value="1" >CDD</option><option value="2" >CDI</option><option value="3" >Intérim</option><option value="4" >Indépendant/Franchise</option><option value="6" >Apprentissage</option><option value="5" >Stage/Alternance</option>
</select>
</div></div>
<div>
<label><strong >Travail à :</strong ></label>
<label >
<input type="radio" name="jobtime" value="1" checked="checked"><span class="">Temps plein</span>
</label>
<label >
<input type="radio" name="jobtime" value="2" ><span class="">Temps partiel</span>
</label>
</div>
<div >
<label ><strong ><?php //echo $label711 ;?> Vous souhaitez recevoir les candidatures via :</strong ></label>
<label >
<input type="radio" name="adreply_type" value="1" checked="checked">
<span class="text mrl">Votre email</span>
</label>
<label >
<input type="radio" name="adreply_type" value="2" >
<span class="text">Votre site web</span>
</label>
</div>
</div>
<div>
<div >
<label for="Secteur_d_activite"><strong ><?php //echo $label1015 ;?>Secteur d'activité </strong></label>
<div >
<select name="jobfield" id="jobfield" >
<option value="0" selected>«Choisissez»</option>
<option value="1" >Agriculture</option><option value="4" >Banque/Assurance/Finance</option><option value="2" >BTP/Construction</option><option value="3" >Commerce/Distribution</option><option value="13" >Hôtellerie/Restauration</option><option value="6" >Immobilier</option><option value="5" >Industrie/Environnement</option><option value="8" >Médecine/Santé</option><option value="9" >Services</option><option value="7" >Services publics/Administrations</option><option value="15" >Sport</option><option value="10" >Télécom/Internet/Médias</option><option value="14" >Textile/Mode/Luxe</option><option value="11" >Tourisme</option><option value="12" >Transport/Logistique</option>
</select>
</div></div>
<div >
<label for="Fonction"><strong ><?php //echo $label1015 ;?>Fonction </strong></label>
<div>
<select name="jobduty" id="jobduty" class="select">
<option value="0" selected>«Choisissez»</option>
<option value="1" >Administration/Services généraux</option><option value="2" >Commercial/Vente</option><option value="3" >Comptabilité/Gestion/Finance</option><option value="4" >Conseil/Audit</option><option value="5" >Direction Générale</option><option value="16" >Etudes/Recherches/Ingénieries</option><option value="15" >Formation/Education</option><option value="7" >Hôtellerie/Restauration</option><option value="8" >Informatique/Internet</option><option value="9" >Juridique</option><option value="10" >Logistique/Achat/Transport</option><option value="11" >Marketing/Communication</option><option value="18" >Médecine/Santé</option><option value="12" >Ménage/Entretien</option><option value="17" >Ouvrier/Artisan</option><option value="19" >Production/Opérations</option><option value="13" >Ressources Humaines/Formation</option><option value="6" >Sécurité/Défense/Gardiennage</option><option value="14" >Services à la personne</option><option value="20" >Service Client/Accueil</option>
</select>
</div></div>
<div>
<labelfor="experience"><strong >Expérience * </strong></label>
<div>
<select name="jobexp" id="jobexp">
<option value="0" selected>«Choisissez»</option>
<option value="1" >0 à 2 ans</option><option value="3" >2 à 5 ans</option><option value="5" >5 ans et plus</option>
</select>
</div></div>
</div>
<div>
<div>
<label for="jobstudy"><strong ><?php //echo $label1015 ;?>Niveau d'études *</strong></label>
<div>
<select name="jobstudy" id="jobstudy" class="select">
<option value="0" selected>«Choisissez»</option>
<option value="1" >Sans diplôme</option><option value="2" >BEPC/BET</option><option value="3" >Employé/Ouvrier spécialisé/Bac</option><option value="4" >Technicien/Employé/Bac+2</option><option value="5" >Agent de maîtrise/Bac+3</option><option value="6" >Ingénieur/Cadre/Bac+5 ou plus</option>
</select>
</div>
</div>
<div>
<label class="control-label" for="adreply_redirect"><strong >Lien de redirection vers votre offre d'emploi (site recruteur) *</strong></label>
<div class="controls">
<input type="text" id="adreply_redirect" name="adreply_redirect" value="" class="nude">
</div>
</div>
</div>
</div><!--fin div style categ-->
</div><!--fin groupe 33-->
<div style="background:#f2f2f2;">
<h3 style="padding-left: 1rem;color:#0088cc;font-size: 16px;">Vos informations</h3>
</div><!--fin div style categ-->
<div >
<label for="prenom"><strong >Votre prénom * :</strong></label>
<div>
<input type="text" id="prenom" name="prenom" value="" autocomplete="off" class="" >
</div>
</div>
<div>
<label for="email"><strong >Votre téléphone * :</strong></label>
<div>
<input type="text" id="phone" name="phone" value="" maxlength="10" autocomplete="off" class="">
</div>
</div>
<div>
<label for="email"><strong >Votre email * :</strong></label>
<div>
<input type="text" id="email" name="email" value="" autocomplete="off" class="" >
</div>
</div>
</div>
</div>
</div>
<div >
<p class="text-right"><strong>Champs obligatoires *</strong></p>
<hr>
<div>
<label for="valider">Valider</label>
<input type="submit" name="envoye" value="Valider">
<input type="reset" value="Initialiser">
</div>
</form>
</body>
</html>
Re: verifier le contenu des champs masqué/affichés selon le choix de la catégorie en javascript et php
Posté : 07 oct. 2016, 07:48
par charlydar
Bonjour moogli , j'ai appliqué tout ce que vous m'avez demander de faire. j'ai toujours le même le problème .
Ci joint le code réduit afin de faciliter les tests.
Code : Tout sélectionner
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Deposez une annonce</title>
<script>
// script champ hidden
function afficherAutre() {
var so = document.getElementById("sujet_for_offre_demploi");
var s = document.getElementById("sujet_for");
var m = document.getElementById("message");
var mo = document.getElementById("message_offre_demploi");
var gp2 = document.getElementById("groupe2");
var gp33 = document.getElementById("groupe33");
// cat1
if (document.form4.categorie.value == 1)
{
if (so.style.display == "none")
{so.style.display = "block";}
if (s.style.display == "block")
{s.style.display = "none";}
if (m.style.display == "block")
{m.style.display = "none";}
if (mo.style.display == "none")
{mo.style.display = "block";}
if (gp33.style.display == "none")
{gp33.style.display = "block";}
}
else
{
so.style.display = "none";
s.style.display = "block";
m.style.display = "block";
mo.style.display = "none";
gp33.style.display = "none";
}
// gp2
if (document.form4.categorie.value == 2)
{
if (gp2.style.display == "none")
{gp2.style.display = "block";}
}
else
{
gp2.style.display = "none";
}
}
function verif_formulaire()
{
var gp2 = document.getElementById("groupe2");
var gp33 = document.getElementById("groupe33")
if(document.form4.categorie.value == "0") {
alert("votre categorie ?");
document.form4.categorie.focus();
return false;
}
if(document.form4.company.value == "") {
alert("veuillez cocher la qualification");
document.getElementById("company").focus();
return false;
}
if(document.form4.type_annonce.value == "") {
alert("Votre type d'nnonce ?");
document.form4.type_annonce.focus();
return false;
}
if(document.form4.sujet.value == "") {
alert("Sujet de votre annonce ?");
document.form4.sujet.focus();
return false;
}
if(document.form4.message.value == "") {
alert("Votre message ?");
document.form4.message.focus();
return false;
}
if(document.form4.prenom.value == "") {
alert("Votre prenom ?");
document.form4.prenom.focus();
return false;
}
// Champs Masqués/Affichés
//gp33
if(document.form4.Type_de_contrat.value == "0") {
if (gp33.style.display == "block"){
alert("Veuillez indiquer le type de contrat.");
document.form4.Type_de_contrat.focus();
return false;
}
}
if(document.form4.jobexp.value == "0") {
if (gp33.style.display == "block"){
alert("Veuillez choisir un type.");
document.form4.jobexp.focus();
return false;
}
}
if(document.form4.adreply_redirect.value == "") {
if (gp33.style.display == "block"){
alert("Veuillez indiquer l'adresse de redirection.");
document.form4.adreply_redirect.focus();
return false;
}
}
if(document.form4.jobstudy.value == "0") {
if (gp33.style.display == "block"){
alert("Veuillez selectionner le niveau d'étude.");
document.form4.jobstudy.focus();
return false;
}
}
// Champs masqués/ affichés
// gp2
if(document.form4.model.value == "") {
if (gp2.style.display == "block"){
alert("Veuillez indiquer le modèle.");
document.form4.model.focus();
return false;
}
}
if(document.form4.boite_vitesse.value == "") {
if (gp2.style.display == "block"){
alert("Veuillez selectionner la boite de vitesse.");
document.form4.boite_vitesse.focus();
return false;
}
}
if(document.form4.km.value == "") {
if (gp2.style.display == "block"){
alert("Veuillez indiquer le kilometrage.");
document.form4.km.focus();
return false;
}
}
if(document.form4.carburant.value == "") {
if (gp2.style.display == "block"){
alert("Veuillez selectionner le carburant.");
document.form4.carburant.focus();
return false;
}
}
}
</script>
</head>
<body>
<form id="form4" name="form4" method="post" action="annonce/new-sujet-poster.php" enctype="multipart/form-data" onSubmit="return verif_formulaire()">
<div>
<label for="categorie"><strong >Categorie * :</strong ></label>
<div>
<select id="categorie" name="categorie" style="width:200px;" onChange="afficherAutre()">
<option value='0' selected>--Choississez--</option>
<option style='background-color:#f2f2f2' disabled id='cat71' >-- EMPLOI --</option>
<option value='1' id='cat33'>Offres d'emploi</option>
<option style='background-color:#f2f2f2' disabled id='cat1' >-- VEHICULES --</option>
<option value='2' id='cat2' >Voitures</option>
<option value='3' id='cat3' >Motos</option>
<option value='4' id='cat38' >Autres</option>
</select>
</div>
</div>
<div>
<label><strong >Vous êtez * :</strong ></label>
<label class="radio inline">
<input id="company" name="company" value="Particulier" type="radio" >Particulier
</label>
<label class="radio inline">
<input id="company" name="company" value="Professionnel" type="radio">Professionnel
</label>
</div>
<div>
<label for="objet"><strong >Type d'annonce* :</strong></label>
<div>
<select id="type_annonce" name="type_annonce">
<option value="">--Choississez--</option>
<option value=1>Offres</option>
<option value=2>Demandes</option>
<option value=3>Location</option>
</select>
</div>
</div>
<div>
<label id="sujet_for" style="display:block;" for="sujet_for"><strong >Titre de l"annonce * :</strong></label>
<label id="sujet_for_offre_demploi" style="display:none;" for="sujet_for_offre_demploi"><strong >Intitulé du poste * :</strong></label>
<div >
<input type="text" id="sujet" name="sujet" value="" maxlength="100" autocomplete="off" class="" >
</div>
</div>
<div>
<label id="message" style="display:block;" for="message"><strong >Texte de l'annonce * :</strong></label>
<label id="message_offre_demploi" style="display:none;" class="control-label" for="message_offre_demploi"><strong >Description du poste * :</strong></label>
<div>
<textarea id="message" name="message" rows="7" cols="60"></textarea>
</div>
</div>
<!-- groupe 2-->
<div id="groupe2" style="display:none;">
<div style="background-color:#f9f9f9;">
<div>
<div>
<label id="marque_for" for="marque"><strong >Marque </strong></label>
<select name="marque" id="marque" >
<option value="" selected>«Choisissez»</option>
<optgroup label="Marques Courantes">
<option value="Audi" >Audi </option>
<option value="Bmw" >Bmw </option>
<option value="Volkswagen" >Volkswagen </option>
</optgroup>
<optgroup label="Autres Marques">
<option value="Mastretta" > Mastretta </option>
<option value="Maybach" > Maybach </option>
</optgroup>
</select>
</div>
<div>
<label for="model_year" ><strong >Année Modèle </strong></label>
<div>
<select name="model_year" id="model_year" >
<option value="" selected>«Choisissez»</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div></div>
</div>
<div>
<div>
<label for="carburant"><strong >Carburant *</strong></label>
<div >
<select name="carburant" id="carburant" >
<option value="" selected>«Choisissez»</option>
<option value="Essence" >Essence</option>
<option value="Diesel" >Diesel</option>
<option value="GPL" >GPL</option>
<option value="Electrique" >Electrique</option>
<option value="Autre" >Autre</option>
</select>
</div></div>
<div>
<label id="model_for" for="modele"><strong >Modèle *</strong></label>
<div class="controls">
<input name="model" id="model" type="text" value="">
</div></div>
</div>
<div>
<div>
<label for="boite_vitesse"><strong >Boite de vitesse *</strong></label>
<div >
<select name="boite_vitesse" id="boite_vitesse">
<option value="" selected>«Choisissez»</option>
<option value="manuelle" >Manuelle</option>
<option value="automatique" >Automatique</option>
</select>
</div></div>
<div >
<label for="kilometrage"><strong ><strong>Kilometrage: km *</strong></label>
<div class="controls">
<input name="kilometrage" id="kilometrage" type="text" value="">
</div>
</div>
</div>
</div><!--fin div style categ-->
<!--fin roupe--> </div>
<!-- 3 groupe-->
<div id="groupe3" style="display:none;">
<div class="row-fluid" style="background-color:#f9f9f9;">
<div>
<div>
<label for="model_year" ><strong >Année Modèle *</strong></label>
<div>
<select name="model_year" id="model_year">
<option value="" selected>«Choisissez»</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div></div>
<div>
<label for="km"><strong >Kilometrage: km *</strong></label>
<div class="controls">
<input name="km" type="text" value="" >
</div></div>
</div>
<div>
<div>
<label class="control-label" for="cylindre"><strong >Cylindrée: cm³ </strong></label>
<div class="controls">
<input name="cylindre" type="text">
</div></div>
</div>
</div><!--fin div style categ-->
<!--fin groupe3--> </div>
<!--groupe4--> <div id="groupe4" style="display:none;">
<div style="background-color:#f9f9f9;">
<div>
<div >
<label for="model_year" ><strong >Année Modèle *</strong></label>
<div class="controls">
<select name="model_year" >
<option value="" selected>«Choisissez»</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div></div>
</div>
<div>
<div >
<label class="control-label" for="km"><strong >Kilometrage: km</strong></label>
<div class="controls">
<input name="km" type="text">
</div></div>
</div>
</div><!--fin div style categ-->
<!--fin groupe4--></div>
<div id="groupe33" style="display:none">
<div style="background-color:#f9f9f9;">
<div>
<div>
<label for="Type_de_contrat"><strong >Type de contrat *</strong></label>
<div >
<select name="Type_de_contrat" id="Type_de_contrat">
<option value="0" selected>«Choisissez»</option>
<option value="1" >CDD</option><option value="2" >CDI</option><option value="3" >Intérim</option><option value="4" >Indépendant/Franchise</option><option value="6" >Apprentissage</option><option value="5" >Stage/Alternance</option>
</select>
</div></div>
<div>
<label><strong >Travail à :</strong ></label>
<label >
<input type="radio" name="jobtime" value="1" checked="checked"><span class="">Temps plein</span>
</label>
<label >
<input type="radio" name="jobtime" value="2" ><span class="">Temps partiel</span>
</label>
</div>
<div >
<label ><strong >Vous souhaitez recevoir les candidatures via :</strong ></label>
<label >
<input type="radio" name="adreply_type" value="1" checked="checked">
<span class="text mrl">Votre email</span>
</label>
<label >
<input type="radio" name="adreply_type" value="2" >
<span class="text">Votre site web</span>
</label>
</div>
</div>
<div>
<div >
<label for="Secteur_d_activite"><strong >Secteur d'activité </strong></label>
<div >
<select name="jobfield" id="jobfield" >
<option value="0" selected>«Choisissez»</option>
<option value="1" >Agriculture</option><option value="4" >Banque/Assurance/Finance</option><option value="2" >BTP/Construction</option><option value="3" >Commerce/Distribution</option><option value="13" >Hôtellerie/Restauration</option><option value="6" >Immobilier</option><option value="5" >Industrie/Environnement</option><option value="8" >Médecine/Santé</option><option value="9" >Services</option><option value="7" >Services publics/Administrations</option><option value="15" >Sport</option><option value="10" >Télécom/Internet/Médias</option><option value="14" >Textile/Mode/Luxe</option><option value="11" >Tourisme</option><option value="12" >Transport/Logistique</option>
</select>
</div></div>
<div >
<label for="Fonction"><strong >Fonction </strong></label>
<div>
<select name="jobduty" id="jobduty" class="select">
<option value="0" selected>«Choisissez»</option>
<option value="1" >Administration/Services généraux</option><option value="2" >Commercial/Vente</option><option value="3" >Comptabilité/Gestion/Finance</option><option value="4" >Conseil/Audit</option><option value="5" >Direction Générale</option><option value="16" >Etudes/Recherches/Ingénieries</option><option value="15" >Formation/Education</option><option value="7" >Hôtellerie/Restauration</option><option value="8" >Informatique/Internet</option><option value="9" >Juridique</option><option value="10" >Logistique/Achat/Transport</option><option value="11" >Marketing/Communication</option><option value="18" >Médecine/Santé</option><option value="12" >Ménage/Entretien</option><option value="17" >Ouvrier/Artisan</option><option value="19" >Production/Opérations</option><option value="13" >Ressources Humaines/Formation</option><option value="6" >Sécurité/Défense/Gardiennage</option><option value="14" >Services à la personne</option><option value="20" >Service Client/Accueil</option>
</select>
</div></div>
<div>
<label for="experience"><strong >Expérience * </strong></label>
<div>
<select name="jobexp" id="jobexp">
<option value="0" selected>«Choisissez»</option>
<option value="1" >0 à 2 ans</option><option value="3" >2 à 5 ans</option><option value="5" >5 ans et plus</option>
</select>
</div></div>
</div>
<div>
<div>
<label for="jobstudy"><strong >Niveau d'études *</strong></label>
<div>
<select name="jobstudy" id="jobstudy" class="select">
<option value="0" selected>«Choisissez»</option>
<option value="1" >Sans diplôme</option><option value="2" >BEPC/BET</option><option value="3" >Employé/Ouvrier spécialisé/Bac</option><option value="4" >Technicien/Employé/Bac+2</option><option value="5" >Agent de maîtrise/Bac+3</option><option value="6" >Ingénieur/Cadre/Bac+5 ou plus</option>
</select>
</div>
</div>
<div>
<label class="control-label" for="adreply_redirect"><strong >Lien de redirection vers votre offre d'emploi (site recruteur) *</strong></label>
<div class="controls">
<input type="text" id="adreply_redirect" name="adreply_redirect" value="" class="nude">
</div>
</div>
</div>
</div><!--fin div style categ-->
</div><!--fin groupe 33-->
<div style="background:#f2f2f2;">
<h3 style="padding-left: 1rem;color:#0088cc;font-size: 16px;">Vos informations</h3>
</div><!--fin div style categ-->
<div >
<label for="prenom"><strong >Votre prénom * :</strong></label>
<div>
<input type="text" id="prenom" name="prenom" value="" autocomplete="off" class="" >
</div>
</div>
</div>
</div>
</div>
<div >
<p class="text-right"><strong>Champs obligatoires *</strong></p>
<hr>
<div>
<label for="valider">Valider</label>
<input type="submit" name="envoye" value="Valider">
<input type="reset" value="Initialiser">
</div>
</form>
</body>
</html>