My SAAP

by matmat

HTML

<div style="padding:10px;width:535px;">

        <div class="contenuMODSAAP">
            <div class="ModifierObjet">( modifier mon annonce )<span id="closemodifSAAP">X</span></div>
            <form>
                <div class="FormulaireAjouter" id="FormulaireAjouter">
                    <div class="ligneSAGA1AJ">
                        <div class="ligneSAGA1AJ-1">
                            <p>
                                <label>Titre</label>
                                <input type="text" class="formulaire" maxlength="24" />
                            </p>
                        </div>
                        <div class="ligneSAGA1AJ-2">
                            <p>
                                <select id="categorie">
                                    <option>-- Catégorie --</option>
                                </select>
                            </p>
                            <p>
                                <select id="souscategorie" disabled="true">
                                    <option>-- Sous-Catégorie --</option>
                                </select>
                            </p>
                        </div>
                        <div class="ligneSAGAAJ1-main">
                            <div class="ligneSAGAAJ1-main-1">
                                <label>Prix</label>
                                <input maxlength="10" />
                                <select id="Devise" style="width:50px; ">
                                    <option value="1">€</option>
                                    <option value="1">€</option>
                                </select>
                            </div>
                            <div class="ligneSAGAAJ1-main-1">
                                <select id="livraison">
                                    <option value="1">A retirer sur place</option>
                                    <option value="2">Envoi possible</option>
                            ...

CSS

.ModifierObjet {
    width:533px;
    height:30px;
    line-height:30px;
    text-align:center;
    border:1px solid grey;
    vertical-align:middle;
    margin-left:auto;
    border-bottom:1px solid grey;
    box-shadow:1px 1px 5px grey;
    font-family: palatino;
font-size: 14px;
border: 1px solid #DCDCDC;
letter-spacing: 1.5px;
font-weight: bold;
color: #808080;
background-color: #DCDCDC;
}
.ModifierObjet span{
    float:right;
margin-right:15px;
display:inline-block;   
    width:20px;
    height:20px;
        cursor:pointer;
    border:1px solid grey;
    line-height:20px;
    vertical-align:middle;
    margin-top:5px;
}
.ModifierObjet span:hover{
    color:white;
    border:1px dashed white;
}

.contenuMODSAAP {
    vertical-align: middle;
    display: inline-block;
    margin-top:10px;
    margin-bottom:20px;
    width:100%;
    margin-right:auto;
    margin-left:auto;
    overflow:hidden;
    min-height :300px;
    background-color:#F7F7FF;
    border:1px solid #F5E6E6;
    padding-bottom:30px;
    box-shadow: 1px 1px 3px #808080;
    opacity:0.92;
    filter: alpha(opacity=92);
}




.FormulaireAjouter {
    width:99%;
    margin-top:10px;
}

.ligneSAGA1AJ p {
    width:100%;
}
.FormulaireAjouter select {
    font-family:Calibri;
    font-style:italic;
    border:solid 1px #F5F5FF;
    padding-left:4px;
    width:140px;
    font-size:14px;
    color:grey;
    margin:0;
    height:20px;
}
.ligneSAGA1AJ-1 input {
    width:220px;
    font-style: italic;
    font-size:16px;
    margin-left:10px;
    line-height:20px;
    margin-bottom:0px;
    padding-left:10px;
    color:#990000;
    font-weight:bold;
    font-family: Constantia, Palatino, serif;
    border: 1px solid gainsboro;
    padding: 4px 4px 4px 4px;
}
.ligneSAGA1AJ-1 input:hover {
    border:solid 1px #AAAAAA;
    color:#FF7000;
}
.ligneSAGA1AJ-1 input:active {
    color:#FF7000;
}
.ligneSAGA1AJ-1 label {
    margin-left:10px;
}

.ligneSAGA1AJ-1 {
    width:59%;
    display:inline-block;
   ...

JavaScript

$(document).ready(function (m) {
       $(document.body).on('click', '.inner4-cadreonglet1', function (event) {
      $('#fileinput').trigger('click');
  });
     
     
     $(document.body).on('click', '#AjouterObjet', function (event) {

         $('#FormulaireAjouter').toggle('fast');

     });
     $(document.body).on('change', '#categorie', function (event) {

         var idVal = $("select#categorie option:selected").attr('value');
         $.ajax({

             type: 'GET',
             dataType: 'json',
             url: 'ScriptPHP/traitementformulaires/souscat.php',

             data: {
                 'catval': idVal
             },


             success: function (data) {
                 var options = "";
                 if (data != null) {
                     for (var i = 0; i < data.length; i++) {
                         options += '<option value="' + data[i].value + '">' + data[i].label + '</option>';
                     }
                 }
                 if (options != "") {
                     $("#resJson").attr("value", options);
                     $("select#souscategorie").html(options);
                     $("select#souscategorie").attr("disabled", false);
                 }

             }
         });

     });
     $(document.body).on('click', '.ligneSAGA1-8', function (event) {

         var element = $(this).attr('id');
         var arr = element.split('_');
         var id = arr[1];

         var tp = '#tp_' + id;
         $(tp).toggle('slow');

     });
     $(document.body).on('click', '.inner2', function (event) {

         var element = $(this).attr('id');
         var arr = element.split('_');
         var id = arr[1];
         var tp = '#tp_' + id;

         $(tp).toggle('slow');
         event.preventDefault;
         return false;
     });

 });