Comment afficher/générer des inputs en javascrip
Comment afficher/générer des inputs en javascrip
11 réponses
S A L U T @achrafel, pour peu que j'ai compris, essaies ça
$(function(){
input = $("<input />"); // création d'un élément input Query
input.attr({
"id" : "valeur",
"name" : "valeur",
"value" : "valeur"
"placeholder": "valeur" // etc.
});
//Une fois ton élément crée, te reste plus qu'à l'injecter ou tu souhaites
$("form").html(input); // injection du input crée dans l'unique formulaire de la page.
}Merci beaucoup tu peut donne moi un exemple complet (html, js) pour bien comprendre stp ^_^
Voir ce exemple pour bien comprendre ( Choissez sur categorie 'Voitures' ou bien 'motos' )
https://www2.avito.ma/ai/form/0
Bonsoir.
Pour faire comme dans l'exemple du lien que tu donnes, c'est plus complexe que ce que tu demandes, étant donné que ça dépend de la valeur d'un autre input sélectionné par l'utilisateur.
Regardes ce tutoriel par exemple, ça va t'aider : Lier plusieurs select.
j'ai déja trouver le code ms ça function pas
Personne ne te demande d'utiliser le code qu'ils ont sur leur site, surtout que si c'est pour copier leur site, ce n'est pas la peine.
J'ai déja trouver cette code ms ça function pas il ya un probléme
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ajouter Annonce</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.2-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.2-dist/css/font-awesome.min.css" />
<script type="text/javascript" src="bootstrap-3.3.2-distjs/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script></head>
<body>
<div class="container">
<div class="page-header">
<h1>Ajouter Annonce!</h1>
</div>
<!-- ajouter Form - START -->
<div class="container" id="container1">
<div class="row centered-form">
<div class="col-xs-12 col-sm-8 col-md-4 col-sm-offset-2 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center">Remplir les champs suivants</h3>
</div>
<div class="panel-body">
<form role="form">
<div class="form-group">
Catégorie:
<select name="catégorie" >
<option> choisissez une catégorie </option>
<option style="background:#7FC6BC" disabled> --Immobilier-- </option>
<option> Maison </option>
<option> Appartement </option>
<option> Immobilier de vacances</option>
<option> Bureau&Locaux </option>
<option> Terrain </option>
<option style="background:#7FC6BC" disabled> --Véhicules-- </option>
<option> Voitures </option>
<option> Véhicules professionnels </option>
<option> Bateaux </option>
<option> Motos </option>
<option> Autres véhicules </option>
<option> piàces auto/moto </option>
<option style="background:#7FC6BC" disabled> --Maison-- </option>
<option> Electroménager </option>
<option> Interieur </option>
<option> Jardin </option>
<option style="background:#7FC6BC" disabled> --Multimedia-- </option>
<option> Téléphone </option>
<option> Acessoires informatiques </option>
<option> Jeux vidéo et consoles </option>
<option style="background:#7FC6BC" disabled> --Emploi,Services-- </option>
<option> Offre d'emploi </option>
<option> Demande d'emploi </option>
<option> Service </option>
<option> Cours </option>
<option style="background:#7FC6BC" disabled> --Loisires-- </option>
<option> Hobbies </option>
<option> Sports </option>
<option> Animaux doméstiques </option>
<option> Films,Magazines,Livres </option>
<option> Art&déco </option>
<option> Voyages </option>
<option> Musique et Instruments</option>
<option style="background:#7FC6BC" disabled> --Vétements et Objets-- </option>
<option> Vétements </option>
<option> Chaussures </option>
<option> Montres et Lunettes </option>
<option> Bijoux </option>
<option> Sac et Accessoires </option>
<option style="background:#7FC6BC" > --Autres-- </option>
</select>
</div>
<div class="form-group">
Type Annonce:
<input id="rad1" name="radGroupe" type="radio" value="demande" />
<label for="rad1">demande de vente</label>
<input id="rad2" name="radGroupe" type="radio" value="offre de vente" />
<label for="rad2">offre de vente</label>
</div>
<div class="form-group">
Titre:
<input type="text" name="Titre" id="Titre">
</div>
<div class="form-group">
Description de L'annonce :
<TEXTAREA rows="3" name="descriptoin"></TEXTAREA>
</div>
<div class="form-group">
surface:
<input type="text" name="logement" id="logement">
</div>
<div class="form-group">
nombre de pièce:
<input type="text" name="nbpiece" id="nbpiece">
</div>
<div class="form-group">
kilomètrage:
<input type="text" name="kilometrage" id="kilometrage">
</div>
<div class="form-group">
Marque:
<input type="text" name="marque" id="marque">
</div>
<div class="form-group">
Année:
<input type="text" name="année" id="année">
</div>
<div class="form-group">
Cylindré:
<input type="text" name="cylindré" id="cylindré">
</div>
<div class="form-group">
Energie:
<select name="energie">
<option> </option>
<option> essence </option>
<option> diesel</option>
</select>
</div>
<div class="form-group">
Boite Vitesse:
<select name="boiteVitesse" >
<option> </option>
<option> automatique </option>
<option> mannuelle</option>
</select>
</div>
<div class="form-group">
Immatruculation:
<input type="text" name="immatr" id="immatr">
</div>
<div class="form-group">
couleur:
<input type="text" name="Couleur" id="Couleur">
</div>
<div class="form-group">
Prix:
<input type="text" name="prix" id="Prix" >
</div>
<div class="form-group">
Région:<select name="Region" >
<option> choisissez votre gouvérnorat </option>
<option> Ariana </option>
<option> Béja </option>
<option> Ben Arous </option>
<option> Bizerte </option>
<option> Gabés </option>
<option> Gafsa</option>
<option> Jendouba</option>
<option> Kairouan</option>
<option> Kasserine</option>
<option> Kébili</option>
<option> Le Kef</option>
<option> Mahdia </option>
<option> La Mannouba</option>
<option> Medenine </option>
<option> Monastir </option>
<option> Nabeul</option>
<option> Sfax </option>
<option> Sidi Bouzid</option>
<option> Siliana </option>
<option> Sousse</option>
<option> Tataouine</option>
<option> Tozeur</option>
<option> Tunis</option>
<option> Zaghouan </option>
</select>
</div>
<input type="submit" value="Enregister" class="btn btn-info btn-block">
</form>
</div>
</div>
</div>
</div>
</div>
<script>
$('select name="catégorie"').change(function(){
var value = $(this).val();
switch(value) {
case "Terrain":
$('input[name="surface"],input[name="Prix"],input[name="Titre"],input[name="description"],input[name="radGroup"]').show(); // ou fadeIn(), ou show(). A toi de voir
$('input[name="nbpiece"],input[name="kilometrage"],imput[name="marque"],input[name="année"],input[name="cylindré"], input[name="couleur"],input[name="immatr"], select[name="energie"], select[name="boiteVitesse"]').hide(); // ou fadeOut(), ou hide(). A toi de voir
break;
case "Maison": case "Appartement": case "Immobilier de vacances": case "Bureaux&Locaux":
$('input[name="surface"], input[name="nbpiece"],input[name="Prix"],input[name="Titre"],input[name="description"],input[name="radGroup"]').show(); // ou fadeIn(), ou show(). A toi de voir
$('input[name="kilometrage"],imput[name="marque"],input[name="année"],input[name="cylindré"], input[name="couleur"],input[name="immatr"], select[name="energie"], select[name="boiteVitesse"]').hide(); // ou fadeOut(), ou hide(). A toi de voir
break;
case "voiture": case "Autres vehicules": case "Véhicules professionnels":
$('input[name="surface"], input[name="nbpiece"]').hide(); // ou fadeIn(), ou show(). A toi de voir
$('input[name="Prix"],input[name="Titre"],input[name="description"],input[name="radGroup"], input[name="kilometrage"],imput[name="marque"],input[name="année"],input[name="cylindré"], input[name="couleur"],input[name="immatr"], select[name="energie"], select[name="boiteVitesse"]').show(); // ou fadeOut(), ou hide(). A toi de voir
case "Moto":
$('input[name="surface"], input[name="nbpiece"] ,input[name="couleur"],input[name="immatr"], select[name="energie"], select[name="boiteVitesse"]').hide();
$('input[name="kilometrage"],imput[name="marque"],input[name="année"],input[name="cylindré"],input[name="Prix"],input[name="Titre"],input[name="description"],input[name="radGroup"]').show(); // ou fadeOut(), ou hide(). A toi de voir
default:
$('input[name="Prix"],input[name="Titre"],input[name="description"],input[name="radGroup"]').show();
$('input[name="surface"], input[name="nbpiece"] ,input[name="couleur"],input[name="immatr"], select[name="energie"], select[name="boiteVitesse"] input[name="kilometrage"],imput[name="marque"],input[name="année"],input[name="cylindré"]').hide(); // ou fadeOut(), ou hide(). A toi de voir
}});
</script><style>
container1 {background-color: #e2dada;}
.centered-form {
margin-top: 120px;
margin-bottom: 120px;
}
.centered-form .panel {
background: rgba(255, 255, 255, 0.8);
box-shadow: rgba(0, 0, 0, 0.3) 20px 20px 20px;
}
</style>
<!-- Registration Form - END -->
</div>
</body>
</html>
ce code j'ai trouver sur forum de grafikart il c'est la meme code que j'utilser sur mon site ms le probléme je comprend pas bien le JS
ms le probléme je comprend pas bien le JS
Regardes par exemple les tutoriels qui parlent du javascript sur le site, tu comprendras mieux comme ça, car nous n'allons pas pouvoir t'expliquer comment faire si tu n'en as pas les bases et te montrer tout en expliquant dans le forum, cela va être très long.
ms je veut voir just le code et je veut mettre sur mon site
Nous ne pouvons pas t'aider pour le code et qu'il soit fonctionnel pour ton site avec si peu d'information.
De plus que nous aidons, mais nous ne créons pas le code voulu de A à Z.