J'ai ce codeComment ajouter un champ de texte supplémentaire lorsque l'utilisateur clique sur un bouton?
<input type="text" name="search" placeholder="Author...">
Je veux un bouton et quand je clique dessus, il devrait montrer textfield et le bouton devrait disparaître.
Vous pouvez utiliser Javascript/jquery pour cela. Il y a tellement de façons de le faire. Voici un exemple avec jquery
$('#button').click(function(){
$(this).hide();
var html ='<input type="text" name="search" placeholder="Author...">'
$('#holder').html(html);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">
</div>
<button id="button">Cick to add textbox</button>Une autre méthode utilisant hide et show
$('#button').click(function(){
$(this).hide();
$('#holder').show();
})#holder{
display:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="holder">
<input type="text" name="search" placeholder="Author...">
<select>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
</select>
</div>
<button id="button">Cick to add textbox</button>Vous pouvez en savoir plus sur javascript here
Merci, où puis-je ajouter le premier code sur ma page HTML? – Yoni
@Yoni vous pouvez ajouter cela au bas de votre page à l'intérieur de la tag – XYZ
Merci. Comment puis-je ajouter un menu déroulant supplémentaire dans l'étiquette
HTML:
<input class="input" type="text" name="search" placeholder="Author...">
<button class="btn" type="button">
click
</button>
CSS:
.input {
display: none;
}
JS:
$('.btn').on('click', function() {
$('.input').show();
$(this).hide();
})
exemple de travail: https://jsfiddle.net/n05reomv/
Essayez cette
<script>
function next(){
document.getElementById("text").hidden=false;
document.getElementById("addBtn").hidden=true;
}
</script>
<input type="text" name="search" placeholder="Author..." id="text" hidden="true">
<input type="button" value="Add" onclick="next()" id="addBtn">
You may do this simply by using AngularJS. Here is a short example.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.a=1;
$scope.b=null;
$scope.check=function(){
$scope.a=null;
$scope.b=1;
}});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-show="a"><button ng-click="check()">Click</button></div>
<div ng-show="b"><input></div>
</div>
</body>
S'il vous plaît lire avant de poser des questions que vous êtes nouveau à stackoverflow. https://stackoverflow.com/help/how-to-ask – locateganesh