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 dans un listebox. 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 Javascript "verif_formulaire". Mais quand le visiteur change de catégorie par exemple "voiture", il y’une erreur que je n’arrive pas à trouver: le script ne verifie pas tous les champs obligatoires affichés par cette categorie et cela me bloque depuis quelques jours .
S'il vous plait, votre aide m’est précieuse, car je dois avancer dans mon projet ! ci joint mon code source.
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 dans un listebox. 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 Javascript "verif_formulaire". Mais quand le visiteur change de catégorie par exemple "voiture", il y’une erreur que je n’arrive pas à trouver: le script ne verifie pas tous les champs obligatoires affichés par cette categorie et cela me bloque depuis quelques jours .
S'il vous plait, votre aide m’est précieuse, car je dois avancer dans mon projet ! 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>
<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>
