ajout et base du formulaire
This commit is contained in:
52
ajout.php
52
ajout.php
@@ -12,8 +12,8 @@
|
||||
|
||||
<div class="main-body">
|
||||
<div class="content">
|
||||
<form class="recette-form" action="" method="post">
|
||||
<div class="recette-form-add">
|
||||
<div class="recette-add-form-all">
|
||||
<form class="recette-form recette-form-add" action="" method="post">
|
||||
<div class="recette-form-group form-group">
|
||||
<label for="nom">Titre : </label>
|
||||
<input type="texte" class="form-control" id="recette-form-nom" name="nom" placeholder="Titre de votre recette">
|
||||
@@ -26,18 +26,60 @@
|
||||
<label for="photo">Photo du plat : </label>
|
||||
<input type="file" class="form-control" id="recette-form-photo" name="photo" placeholder="ajouter votre image">
|
||||
</div>
|
||||
<div class="recette-form-group form-group" id="recette-form-div-ingr">
|
||||
<label for="ingr">Ingredients</label>
|
||||
<select multiple class="form-control" id="recette-form-ingr" name="ingr" placeholder="Ingredients">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="recette-form-group form-group" id="recette-form-div-tag">
|
||||
<label for="tag">Tag</label>
|
||||
<select multiple class="form-control" id="recette-form-tag" name="tag" placeholder="Tag">
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="recette-form-group form-group" id="recette-form-div-desc">
|
||||
<label for="description">Description</label>
|
||||
<input type="texte" class="form-control" id="recette-form-description" name="description" placeholder="Description...">
|
||||
<textarea type="texte" class="form-control" id="recette-form-description" name="description" placeholder="Description..."></textarea>
|
||||
</div>
|
||||
|
||||
<button type='submit' class='btn btn-primary'>Confirmer</button>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
<div class="recette-form-add-additional">
|
||||
<form id="recette-form-ingr-add" class="recette-form recette-form-add-ingr" action="" method="post">
|
||||
<div class="recette-form-group form-group">
|
||||
<label for="ingr-nom">Nom de l'Ingrédient</label>
|
||||
<input type="texte" class="form-control" id="recette-form-ingr-nom" name="ingr-nom" placeholder="Nom de l'ingrédient" value="">
|
||||
</div>
|
||||
<div class="recette-form-group form-group">
|
||||
<label for="ingr-photo">Photo de l'Ingrédient</label>
|
||||
<input type="file" class="form-control" id="recette-form-ingr-photo" name="ingr-photo">
|
||||
</div>
|
||||
|
||||
<button id="submit-ingr" type='submit' class='btn btn-primary'>Confirmer</button>
|
||||
</form>
|
||||
<form class="recette-form recette-form-add-tag" action="" method="post">
|
||||
<div class="recette-form-group form-group">
|
||||
<label for="tag">Tags</label>
|
||||
<input type="texte" class="form-control" id="recette-form-tag" name="tag" placeholder="Nom de l'ingrédient">
|
||||
</div>
|
||||
|
||||
<button type='submit' class='btn btn-primary'>Confirmer</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include "footer.php"?>
|
||||
</body>
|
||||
<script src="main.js"></script>
|
||||
</html>
|
||||
@@ -21,4 +21,5 @@
|
||||
|
||||
<?php include "footer.php"?>
|
||||
</body>
|
||||
<script src="main.js"></script>
|
||||
</html>
|
||||
33
main.css
33
main.css
@@ -432,25 +432,52 @@ ul {
|
||||
}
|
||||
|
||||
.recette-form {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
width: 80%;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.recette-form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#recette-form-div-desc {
|
||||
height: 400px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
#recette-form-description {
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
.recette-add-form-all {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.recette-form-add {
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
.recette-form-add-ingr {
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
.recette-form-add-tag {
|
||||
height: 30%;
|
||||
}
|
||||
|
||||
.recette-form-add-additional{
|
||||
flex: 1;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
/*Footer et son contenue*/
|
||||
footer{
|
||||
padding: 25px;
|
||||
|
||||
30
main.js
Normal file
30
main.js
Normal file
@@ -0,0 +1,30 @@
|
||||
document.addEventListener("DOMContentLoaded", function(){
|
||||
|
||||
function formulaire_ingredient_update(event) {
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
let form = document.getElementById("recette-form-ingr-add");
|
||||
|
||||
|
||||
let cible = document.getElementById("recette-form-ingr");
|
||||
|
||||
let ingr = form.ingr-nom;
|
||||
|
||||
let new_elem = document.createElement("option");
|
||||
|
||||
new_elem.setAttribute("value",ingr.value);
|
||||
new_elem.innerText = ingr.value;
|
||||
|
||||
cible.appendChild(new_elem);
|
||||
|
||||
}
|
||||
|
||||
let ingr_btn = document.getElementById("submit-ingr");
|
||||
|
||||
ingr_btn.addEventListener('click', formulaire_ingredient_update(event));
|
||||
|
||||
|
||||
|
||||
|
||||
})
|
||||
Reference in New Issue
Block a user