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="main-body">
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<form class="recette-form" action="" method="post">
|
<div class="recette-add-form-all">
|
||||||
<div class="recette-form-add">
|
<form class="recette-form recette-form-add" action="" method="post">
|
||||||
<div class="recette-form-group form-group">
|
<div class="recette-form-group form-group">
|
||||||
<label for="nom">Titre : </label>
|
<label for="nom">Titre : </label>
|
||||||
<input type="texte" class="form-control" id="recette-form-nom" name="nom" placeholder="Titre de votre recette">
|
<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>
|
<label for="photo">Photo du plat : </label>
|
||||||
<input type="file" class="form-control" id="recette-form-photo" name="photo" placeholder="ajouter votre image">
|
<input type="file" class="form-control" id="recette-form-photo" name="photo" placeholder="ajouter votre image">
|
||||||
</div>
|
</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">
|
<div class="recette-form-group form-group" id="recette-form-div-desc">
|
||||||
<label for="description">Description</label>
|
<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>
|
</div>
|
||||||
|
|
||||||
<button type='submit' class='btn btn-primary'>Confirmer</button>
|
<button type='submit' class='btn btn-primary'>Confirmer</button>
|
||||||
|
|
||||||
</div>
|
|
||||||
</form>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php include "footer.php"?>
|
<?php include "footer.php"?>
|
||||||
</body>
|
</body>
|
||||||
|
<script src="main.js"></script>
|
||||||
</html>
|
</html>
|
||||||
@@ -21,4 +21,5 @@
|
|||||||
|
|
||||||
<?php include "footer.php"?>
|
<?php include "footer.php"?>
|
||||||
</body>
|
</body>
|
||||||
|
<script src="main.js"></script>
|
||||||
</html>
|
</html>
|
||||||
33
main.css
33
main.css
@@ -432,25 +432,52 @@ ul {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.recette-form {
|
.recette-form {
|
||||||
height: 100%;
|
height: 80%;
|
||||||
width: 100%;
|
width: 80%;
|
||||||
margin: 10px;
|
margin: 10px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
border: 1px solid black;
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.recette-form-group {
|
.recette-form-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#recette-form-div-desc {
|
#recette-form-div-desc {
|
||||||
height: 400px;
|
height: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#recette-form-description {
|
#recette-form-description {
|
||||||
height: 95%;
|
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 et son contenue*/
|
||||||
footer{
|
footer{
|
||||||
padding: 25px;
|
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