I need an alert to pop up when the value of the input is changed by jQuery.
Currently it only pops an alert dialog when I type into the textbox but not when I press CLICK.
$("#c1").on('input', function() {
alert("value changed");
});
$("#c1").find("button").click(function() {
$("#c1").find('input').val("hello");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="c1">
<div class="input-group col-lg-2">
<span class="input-group-addon">
<i class="glyphicon glyphicon-map-marker"></i>
</span>
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">CLICK</button>
</span>
</div>
</section>
Add .trigger('input') to your button click handler:
$("#c1").find("button").click(function(){
$("#c1").find('input').val("hello").trigger('input');
});
jsFiddle example
$("#c1").on('input', function() {
alert("value changed");
});
$("#c1").find("button").click(function(){
$("#c1").find('input').val("hello").trigger('input');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="c1">
<div class="input-group col-lg-2">
<span class="input-group-addon">
<i class="glyphicon glyphicon-map-marker"></i>
</span>
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button">CLICK</button>
</span>
</div>
</section>
If I'm understanding right try this:
$("input.form-control").keyup(function(){
$(this).trigger('change');
});
$("input.form-control").change(function() {
alert("value changed");
});
Or you can shorten a little to this:
$("input.form-control").keyup(function(){
$(this).trigger('change');
}).change(function() {
alert("value changed.\r\nNew Value: "+$(this).val());
});
JSFiddle is here
Related
I'm updating some content on a website running Bootstrap 2.0.4 (I know it's dated but don't have the time to update it yet!).
I'm trying to prepend a button on to an input element. When the button is clicked I'm adding another button dynamically below it using jquery, I need this also to have the button prepended.
I've created a fiddle, would appreciate any help.
HTML
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
JQUERY
$(document).ready(function() {
$(".add-more").click(function() {
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
Check updated snippet below....
$(".add-more").click(function() {
var html = $(".copy-fields").html();
$(".after-add-more").before(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
.hide{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="addmore[]" class="form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
I'm using a form code copied from here that allows the user to add input fields.
<form action="" >
<div class="input-group control-group after-add-more">
<input type="text" name="q[]" class="form-control" placeholder="Enter Name Here" id="autocomplete-key">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
<button type="submit" class="btn btn-primary" style="background-color:#55BC8A;border:none">Pesquisa</button>
</form>
<!-- Copy Fields-These are the fields which we get through jquery and then add after the above input,-->
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="q[]" class="form-control" placeholder="Enter Name Here" id="autocomplete-key">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
My problem is that I want to add autocomplete from a fixed set of possibilities. For that I'm using this code:
<script type="text/javascript">
$(document).ready(function(){
var location_input=$('input[id="autocomplete-key"]');
location_input.autocomplete({
source: "/api/get_key_name/",
minLength: 2
});
} );
// keeps same width as box
jQuery.ui.autocomplete.prototype._resizeMenu = function () {
var ul = this.menu.element;
ul.outerWidth(this.element.outerWidth());
}
</script>
It works fine for the first input field, but it doesn't work with the added new input fields.
UPDATE: I made a snippet to better exemplify the problem:
$(document).ready(function() {
//here first get the contents of the div with name class copy-fields and add it to after "after-add-more" div class.
$(".add-more").click(function(){
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
//here it will remove the current value of the remove button which has been pressed
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
var availableTutorials = [
"ActionScript",
"Bootstrap",
"C",
"C++",
];
$(document).ready(function() {
$.each($('.autocomplete'), function(i,e) {
$(e).autocomplete({
source: availableTutorials,
minLength: 2,
});
});
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript"></script>
<form action="" >
<div class="input-group control-group after-add-more">
<input type="text" name="q[]" class="autocomplete form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> Add</button>
</div>
</div>
<button type="submit" class="btn btn-primary" style="background-color:#55BC8A;border:none">Pesquisa</button>
</form>
<!-- Copy Fields-These are the fields which we get through jquery and then add after the above input,-->
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="q[]" class="autocomplete form-control" placeholder="Enter Name Here">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
</div>
</div>
</div>
you're using id which is unique , use class and add the autocomplete to all the inputs :
html :
<input type="text" name="q[]" class="autocomplete form-control" placeholder="Enter Name Here" id="autocomplete-key">
js :
$(document).ready(function() {
$.each($('.autocomplete'), function(i,e) {
$(e).autocomplete({
source: "/api/get_key_name/",
minLength: 2
});
});
});
i'd like to know how i can get the values from a dynamic input in Spring, a method that get the values, can someone explain me how to do that ?
This is my html and javascript input.
JSP
<div class="form-group">
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" id="telefone" class="form-control" placeholder="Numero de telefone...">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button">
<i class="glyphicon glyphicon-plus"></i> Adicionar
</button>
</div>
</div>
<!-- Copy Fields -->
<div class="copy hide">
<div class="control-group input-group" style="margin-top: 10px">
<input type="text" name="addmore[]" id="telefone" class="form-control" placeholder="Numero de telefone...">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button">
<i class="glyphicon glyphicon-remove"></i> Remover
</button>
</div>
</div>
</div>
JAVA SCRIPT
$(document).ready(function() {
$(".add-more").click(function() {
var html = $(".copy").html();
$(".after-add-more").after(html);
});
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
Thanks.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a datepicker placed inside a popover. Datepicker not working. Has any one did like this
<div class="col-sm-4">
<button tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="click"
data-placement="bottom" data-container="body" data-html="true" id="login"><i class="fa fa-calendar"></i> - <i class="fa fa-calendar"></i>
</button>
<div id="popover-content" class="hide">
<form role="form" method="post">
<div class="form-group">
<label>Start time?</label>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" placeholder="Start Date time of event"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<label>End time?</label>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" placeholder="End Date time"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block">Search between dates</button>
</div>
</form>
</div>
</div>
JS
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
$("#datetimepicker1").on("dp.change", function (e) {
$('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker2").on("dp.change", function (e) {
$('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
});
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
http://jsfiddle.net/J7nDz/43/
Can someone spot the error?
You can achieve with following approach but the way you are trying, I've doubts it may not be possible with bootstrap datetimepicker, reason moment.js throws following error
SyntaxError: unreachable code after return statement
Put HTML content inside popover trigger button data-content='' and remove class="hide" from HTML and also you have to use a popover callback function or bootstrap popover event listener, your choice.
<div class="col-sm-4">
<button tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="click" data-placement="bottom" data-container="body" data-html="true" id="PopS"
data-content='
<div id="popover-content">
<form role="form" method="post">
<div class="form-group">
<label>Start time?</label>
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control" placeholder="Start Date time of event" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<label>End time?</label>
<div class="input-group date" id="datetimepicker2">
<input type="text" class="form-control" placeholder="End Date time" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block">Search between dates</button>
</div>
</form>
</div>'>Date</button>
</div>
With Callback Function
$(document).ready(function () {
var showPopover = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
showPopover.call(this);
if (this.options.showCallback) {
this.options.showCallback.call(this);
}
}
$("#PopS").popover({
html: true,
showCallback: function () {
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
}
});
});
Fiddle with callback function
With popover event listener
$(document).ready(function () {
$("#PopS").popover({
html: true
}).on('shown.bs.popover', function () {
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();
});
});
Fiddle with event listener
var qBlock='<form id="resetblock"><div class="newqandaBlock"><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-question"></i></span><input type="text" class="form-control" placeholder="Question Asked "><button type="button" class="btn btn-purple closequest" style="position: absolute;top: 3px;"><span> <i class="fa fa-close"></i></span></button></div> <div class="input-group margin-bottom-20"> <span class="input-group-addon purple"><i class="fa fa-reply"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea> </div><div class="input-group margin-bottom-20"><span class="input-group-addon purple"><i class="fa fa-comments"></i></span><textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div></div></form>';
$("#addQuestion").on("click",function(){
$(qBlock).insertAfter(".qandaBlock");
});
$("#resetblock").on("click",'.closequest', function(){
alert("Do you really want to remove the question?!?");
$(this).closest(".newqandaBlock").remove();
});
$("#resetblock").on("click",'.resetlatest', function(){
alert("Do you really want to reset the question?!?");
$(this).closest('form').find("input[type=text], textarea").val("");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<form id="resetblock" name="resetblock" >
<div class="qandaBlock">
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-question"></i></span>
<input type="text" class="form-control" placeholder="Question Asked ">
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-reply"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Your Answer"></textarea>
</div>
<div class="input-group margin-bottom-20">
<span class="input-group-addon purple"><i class="fa fa-comments"></i></span>
<textarea rows="3" class="form-control" name="info" placeholder="Add Your Comments"></textarea> </div>
</div>
<button type="button" class="btn btn-default resetlatest" id="resetlatest" ">Reset</button>
<button type="button" class="btn btn-purple" id="addQuestion"><i class="fa fa-plus-square-o"></i> Add Another Question</button>
</div>
</form>
</body>
</html>
The above line of code will reset the whole form. But , How to reset only the last newly inserted block of question , answer and comment. I dont want on the click of the reset button, the whole form to be reset. I only want to reset the last newly inserted block to be clear its fields with blanks on the click of reset button.
something like this: http://jsfiddle.net/swm53ran/25/
to achieve getting the last or newly inserted element, i used jquery's :last-child selector as seen below.
its also better (and more maintainable) to use .clone() than it is to build html with javascript if you have a template.
<div class="content">
<div id="template" class="section">
<input class="question" type="text" />
<br/>
<textarea class="answer"></textarea>
<br/>
<textarea class="comments"></textarea>
</div>
</div>
<br/>
<br/>
Reset Last Question
Add Another Question
$('.add').on('click', function() {
var clone = $('#template').clone(true).attr('id', '');
clone.find('.question').val('');
clone.find('.answer').val('');
clone.find('.comments').val('');
clone.appendTo('.content');
});
$('.reset').on('click', function() {
console.log($('.section').length);
var last = $('.content .section:last-child');
last.find('.question').val('');
last.find('.answer').val('');
last.find('.comments').val('');
});
A few things to change, other than the sh**ty markup:
1) Stop the forms from nesting each other and put the new form at the bottom after other forms:
$("#addQuestion").on("click",function(){
$(qBlock).insertAfter(".qandaBlock");
});
to
$("#addQuestion").on("click",function(){
$('body').append(qBlock); // Append the form to the body, so it will sit after the last form
});
2) Remove all id="resetblock", from markup and from the JS
3) Change all $("#resetblock").on("click" to $(document).on("click"
4) Change the alert's to confirm's:
var blnReset = confirm("Do you want to reset the question?");
if (blnReset == true) {
//Reset the question
}