Why does the output not change when I change the input?
HTML
<div class="display" id="out">test</div>
<div class="form-group">
<label for="comment">value:</label>
<input class="form-control" type="text" value="0.00" id="in"></input>
</div>
jQuery
$('#in').on("change", function(){
$('#out').html($(this).val());
});
http://jsfiddle.net/ahpu8wwx/2/
The code works, make sure you have included jQuery.
You are missing jQuery library in your fiddle. Use input or keyup event for instant update. change event only fires when you are focus out from input field
$('#in').on("input", function(){
$('#out').html(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="display" id="out">test</div>
<div class="form-group">
<label for="comment">value:</label>
<input class="form-control" type="text" value="0.00" id="in"/>
</div>
Related
I have two input inside same div and need to change the value of one when I write in another one:
Note: I need to use this because I have same div with same class and id.
My Code:
function customInput() {
let customContent = event.target.value;
let customInput = this.parents('.1');
$(customInput .a1 .b1).val(customContent);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="" onkeyup="customInput()">
</div>
</div>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="" onkeyup="customInput()">
</div>
</div>
To refer the current element in the function you can pass this to the function.
You can try with .closest() and .find()
function customInput(el) {
$(el).closest('.1').find('.b1').val(el.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="" onkeyup="customInput(this)">
</div>
</div>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="" onkeyup="customInput(this)">
</div>
</div>
Though I prefer using .on() to attach the event (not using the inline event handler) along with input event:
$('.b2').on('input', function() {
$(this).closest('.1').find('.b1').val(this.value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="">
</div>
</div>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="">
</div>
</div>
You are kinda mixing plain javascript with jQuery. Altough this works fine, I think it's better to stick to one as much as possible for readability so I changed all your code to jQuery.
Instead of inline event binding I used jQuery event binding. I recommend to avoid inline binding because it easier to maintain and you can bind multiple handlers to one event or toggle them with the jQuery off() method.
Also changed the keyup event to an input event because that also works on for example copy pasting, you could stick to the keyup event if you don't want that of course.
With the jQuery closest() function you can find the first matching parent.
With the jQuery find() function you can find the matching children.
You can beautify your code a bit to use jQuery chaining if you like. So my commented one liner.
With the find function you can find elements within the parent.
$('.b2').on('input', function() {
let $this = $(this);
let customContent = $this.val();
let $customInput = $this.closest('.1');
$($customInput).find('.a1 .b1').val(customContent);
//One liner that does the same.
//$(this).closest('.1').find('.b1').val($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="">
</div>
</div>
<div class="1">
<div class="a1">
<input type="text" class="b1" value="">
</div>
<div class="a2">
<input type="text" class="b2" value="">
</div>
</div>
i have this code
<div class="form-group col-md-3">
<label for="exampleInputEmail1" class="col-md-12 texto_value">valor</label>
<div class="form-group col-md-6">
<input type="text" class="form-control" value="valor" disabled>
</div>
<div class="form-group col-md-6">
<input type="hidden" name="name_jacket[]" value="valor">
<input type="number" class="form-control" name="jacket_value[]"
id="valor" step="any" placeholder="valor">
</div>
</div>
This div is ijected by js with the function:
('#select_type').on('change', function(e){
but i need to create a keyup event on input name="jacket_value[]" but the keyup event doesn't work.
How can i make it works.
Change your Javascript code like this.
$(document).on('change', "input[type='number'][name='jacket_value[]']", function(data) {
var btn = this;
console.log(this.value);
});
In this case you don't need to wait for the DOM to be ready $(document.ready() is not required. You can simply use above code and it will work.
('#select_type').on('keyup', function(e){
Would you please try following way, It seems working fine.
$("input[type='number'][name='jacket_value[]']").on('keyup', function(e){
console.log(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group col-md-3">
<label for="exampleInputEmail1" class="col-md-12 texto_value">valor</label>
<div class="form-group col-md-6">
<input type="text" class="form-control" value="valor" disabled>
</div>
<br>
<div class="form-group col-md-6">
<input type="hidden" name="name_jacket[]" value="valor">
<input type="number" class="form-control" name="jacket_value[]"
id="valor" step="any" placeholder="valor">
</div>
</div>
What I mean is.
I've implemented a bootstrap datetimepicker here. https://eonasdan.github.io/bootstrap-datetimepicker/
my question is.
if you have an input box how do you disable it and only let the inputs of the datetimepicker be valid? because the user might input an invalid format of the date.
the code below is taken here https://eonasdan.github.io/bootstrap-datetimepicker/#minimum-setup
code:
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
You should be able to use the readonly attribute on the text input, and jQuery will still be able to edit its contents.
<input type='text' id='foo' readonly>
You need to add the disabled attribute to your field, like so:
<input type='text' class="form-control" disabled="true">
And technically, these other options will also work fine:
value of 'disabled'
<input type='text' class="form-control" disabled="disabled">
or
no value at all, just the name of the attribute
<input type='text' class="form-control" disabled>
I am trying to remove the via textbox, remove button and horizontal line when the Remove button is clicked (as seen in the image below).
I've tried the following so far but it doesn't work:
$(document).ready(function() {
// Remove waypoints
$(".remove-waypoint-button").click(function() {
$(this).parent.closest('input').remove();
$(this).parent.closest('hr').remove();
});
});
Fiddle here
Thanks for your help.
You need to use prev() instead of closest().
Use
// Remove waypoints
$(".remove-waypoint-button").click(function () {
$(this).prev('input').remove();
$(this).prev('hr').remove();
$(this).remove();
});
DEMO
However I would recommend you to wrap input and button in a div, then you can use .parent() to remove all at once. Here's an example.
$(document).ready(function() {
// Remove waypoints
$(".remove-waypoint-button").click(function() {
$(this).parent('div').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="waypoints">
<div>
<input type="text" class="form-control booking waypoint input-lg" placeholder="Via" />
<label class="remove-waypoint-button">Remove</label>
</div>
<div>
<input type="text" class="form-control booking waypoint input-lg" placeholder="Via" />
<label class="remove-waypoint-button">Remove</label>
</div>
</div>
A better approach would be to improve your mark up by grouping similar fields.
This improves the script too.
I hope this is what you expected.
$(function() {
$(".remove-waypoint-button").on("click", function() {
$(this).parent(".container").remove();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="waypoints">
<input type="text" class="form-control booking waypoint input-lg" placeholder="Via">
<hr>
<div class="container">
<input type="text" class="form-control booking waypoint input-lg" placeholder="Via">
<label class="remove-waypoint-button">Remove</label>
<hr>
</div>
<div class="container">
<input type="text" class="form-control booking waypoint input-lg" placeholder="Via">
<label class="remove-waypoint-button">Remove</label>
<hr>
</div>
<div class="container">
<input type="text" class="form-control booking waypoint input-lg" placeholder="Via">
<label class="remove-waypoint-button">Remove</label>
<hr>
</div>
</div>
closest() works on the parent of the element. hr and input are not parent of label.
thanks
HTML:
<div class="control-group">
<label class="control-label" for="some-id-1">Text1</label>
<div class="controls">
<input type="text" id="some-id-1" name="some-id-1"><br>
<input type="text" id="some-id-11" name="some-id-11"><br>
</div>
</div>
<div class="control-group">
<label class="control-label" for="some-id-2">Text2</label>
<div class="controls">
<input type="text" id="some-id-2" name="some-id-2"><br>
<input type="text" id="some-id-22" name="some-id-22"><br>
</div>
</div>
JavaScript:
$(".control-label a").click(function(){
$(this).parent().next().find('input').focus();
});
DEMO
It select the last field in controls group. How should I select the first one?
Use the :first selector in the find() method:
$(this).parent().next().find('input:first').focus();
JS Fiddle demo.
.find('input:first-child') should do the trick for you.
Although it has to be noted that the for="" attribute of the label should do that exact behavior right out of the box.