I have two inputs that are part of a <form>. I'm trying to get the value of the input once one of them is changed (dpFin). The problem is that that inside the event when I get the value using var endDt = document.getElementById("dpFin").value; I'm getting not the new value, but the old value. How I can get the newly set values instead?
function compararFechas() {
var startDt = document.getElementById("dpInicio").value;
var endDt = document.getElementById("dpFin").value;
console.log(startDt);
console.log(endDt);
}
<div class="form-group col-md-6">
<label>Inicio:</label>
<div>
<input type="text" id="dpInicio" name="dpInicio" class="form-control datepicker-here" data-language='es' data-timepicker="true" data-time-format='hh:ii aa' readonly />
</div>
</div>
<div class="form-group col-md-6">
<label>Fin:</label>
<div>
<input type="text" id="dpFin" name="dpFin" class="form-control datepicker-here" data-language='es' data-timepicker="true" data-time-format='hh:ii aa' readonly onblur="compararFechas()" />
</div>
</div>
You're using a 3rd party datepicker by the looks of it, so your blur event never gets triggered. There will likely be an event on your datepicker you can hook into if you check the documentation.
blur will trigger when you lose focus on the input. When using a datepicker you've already lost focus when the datepicker pops up - hence the old value.
blur event will trigger when you are no longer focused on that control, therefor if you want see the change immediately, you should use or oninput event instead. But as #Sean T mentioned, it must be an event in your 3rd party datepicker to trigger what you want.
I hope it helps :)
Related
I have a div which show details like mobilenumber, name etc. like {{::mobilenumber}}, {{::name}}
In that div, there is a button that renders the same values in the new form
By using the button in the form, the user can change the values but in the div where I am showing details, values don't change after clicking on the button
<form ng-submit="form.$valid && saveDetails()">
<input type="text" class="form-control capitalize" placeholder="Full Name" name="fullname"ng-model="address.fullname" maxlength="50" ng-trim="true" autocomplete="off" required >
<span><!-- Mobile Number required --></span>
<input type="text" class="form-control capitalize" placeholder="Mobile Number" name="mobilenumber" id="mobilenumber" ng-model="address.mobilenumber" ng-minlength="10" maxlength="12" ng-trim="true" autocomplete="off" required>
<span><!-- Mobile Number required --></span>
<button ng-click="form.submitted=true><span>Update User Details</span</button>
</form>
Do I want to use one-way binding only?
I tried using $scope.$broadcast('$$rebind:refresh'); but still values don't change.
Any help or guidance would be very helpful for me.
If you really want to keep some sort of one-way-binding...
What you could do, is just use two way binding but with a dataset in between. It gives some overhead but it is a possible solution to your problem. In order to update the view, you just update the copied data. You can control when the data in the view is updated.
When you use interpolation {{mobilenumber}} in your html, angular creates a watcher that watches the property mobilenumber on a scope:
$scope.$watch('mobilenumber', function() {
// update DOM
});
Whenever the value changes, DOM is updated.
However, if you use one time binding {{:mobilenumber}}, as soon as your callback receives truthy value, angular removes the watcher:
var unwatch = $scope.$watch('mobilenumber', function() {
if (value) {
// update DOM
unwatch();
}
);
And since there is no more watcher for mobilenumber, whenever you update values on the scope inside your saveDetails() method, the callback is not triggered and DOM is not updated.
If you're planning on updating values constantly, you should not use one time binding. Use regular bindings:
<div>{{mobilenumber}}</div>
I have the following code :
<input type="text" id="productCode" name="productCode" style="min-height: 42px;" onChange="ajaxrequest_provideProductListOnHit('protected/snippet/snippet_provideProductListOnHit.php', 'ajaxOnProductHit'); return false;" required="required" autofocus />
The problem is that :
The autofocus is not working, I'm using it in this input box only.
Actually the purpose of this input box is to get the field autofocussed so that a barcode scanner could input the productCode.
Now as you can see, my onChange event handler is not going to work here since the barcode scanner apart from the product code, inputs too.
So I need a solution here which autofocuses and once the barcode scanner inputs value in the field, calls for the mentioned ajax function.
html:
<input type="text" id="productCode" name="productCode" style="min-height: 42px;" required="required" autofocus />
js:
var pc = document.getElementById('productCode');
pc.onblur = function () {
ajaxrequest_provideProductListOnHit(
'protected/snippet/snippet_provideProductListOnHit.php',
'ajaxOnProductHit'
);
}
pc.focus();
i use onblur, because onchange would trigger after EVERY change you make (e.g. typing into the text-field will trigger after every key).
you could also provide some custom-logic, e.g. recognize a certain length
Yes you where right, the problem was that I was using autofocus on a different preceding form field which made this particular field of this particular form non-autofocus. So I learned that in a page with multiple forms loaded in to the DOM, only the first one with auto-focus will work. Fool of me to think otherwise.
EDIT:
Thanks to Puneet who created this fiddle: http://jsfiddle.net/G3vSK/
It seems that it doesn't work on Chrome Version 28
On Firefox (v22) the alert comes once, but you can't enter anything in the boxes
Another problem I can't solve:
This is my Javsacript-Code:
function updateFieldsetStyleAdjustment(){
alert("update");
$('fieldset').not('[data-style=\'none\']').find('input, select, textarea, button') //find input-fields
.focus(function(){
alert("active: "+$(this).attr('id'));
});
}
This function should add an onfocus-Handler to some input-fields on my site.
Whenever I focus an field to insert a value, it should be called.
My problem is that, when I focus an input-field, the function is called several times. The number of calls/alerts varies from 3 to 16 or more per focus-Event.
However, my field never looses focus.
I apply the onfocus-event 2 times (The "update"-alert appears twice), but this is normal.
(I don't add 16 onfocus-event listeners to the input-fields).
Anyone knows what I'm doing wrong?
EDIT:
Here's the HTML-snipped:
<fieldset id="fs_1" data-style="data" d class="">
<legend>General Information</legend>
<div class="lineWrapper inputTooltip" data-tooltippos="left">
<label for="fs_1_form51f37d255fb35_name">Name</label>
<span class="inputWrapper">
<input type="text" id="fs_1_form51f37d255fb35_name" name="name" autofocus="" maxlength="40" tabindex="50">
</span>
</div>
<div class="lineWrapper inputTooltip" data-tooltippos="left">
<label for="fs_1_form51f37d255fb35_ansprechperson">Ansprechperson</label>
<span class="inputWrapper">
<input type="text" id="fs_1_form51f37d255fb35_ansprechperson" name="ansprechperson" maxlength="40" tabindex="51">
</span>
</div>
<!-- ...more Wrappers with input-fields... -->
</fieldset>
<!-- ...more fieldsets... -->
How I call it:
1.) $(document).ready(function() { updateFieldsetStyleAdjustment(); });
2.) After every Ajax-Request I call it again (the input-fields are loaded via Ajax)
unbind:
When I put $(this).unbind('focus'); inside my focus-eventhandler, it is triggered only once. But when I focus the same field again, it doesn't work anymore (as expected).
When I put $('*').unbind('focus'); on the beginning of my updateFieldsetStyleAdjustment()-Function, it doesn't change anything.
The alert() was the bug.
Realised that everything was working fine without the alert(). And the event was also only triggered once.
The alert always unfocused the input-field, and so a new alert was created.
I hate it, when my debugging-code is the only bug in the program.
I think your problem lies here.
After every Ajax-Request I call it again (the input-fields are loaded via Ajax).
Try binding focus with only the new fieldset generated after ajax calls (try using jQuery.on() function). Alternatively try
$('fieldset').not('[data-style=\'none\']').find('input, select, textarea, button').unbind('focus');
//unbind focus from previously binded dom elements.
and then call
updateFieldsetStyleAdjustment
I have a number of checkboxes. Each of them is associated with one input field. When the checkbox is checked, I would like to set the input field is editable, i.e. disabled attribute as false. Otherwise, the input field is readonly. Code for one pair of such checkbox and input field is like below (all these code is included in one section called competencies :
<label class="checkbox span3">
<input id="IT_OS_checkbox" type="checkbox" value="IT_OS" name="competency_checkbox[]">
IT - OS
</label>
<div class="controls">
<input id="IT_OS_input" class="input-xxlarge" type="text" name="competency_input[]" disabled="true" placeholder="mots clés séparés par virgule">
</div>
So I am trying to use Jquery's on method to fire the event for each checkbox. Code is as below :
$("#competencies").on('change', '.checkbox', function (event) {
var orig_val = event.target.parent().next('div').find('input').attr('disabled');
alert(orig_val);
});
For simplicity, I just want to check the selector works fine, however, this code doesn't work. and in firebug, error message is TypeError: event.target.parent is not a function.
Can anyone help me figure this out ?
Try this:
$("#competencies").on('change', '.checkbox', function (event) {
var orig_val = $(event.target).parent().next('div').find('input').attr('disabled');
alert(orig_val);
});
Just need to wrap the event.target to get the jQuery object.
I have a function that calculate price for a product. I'm not JavaScript developer so my knowledge is very limited.
By changing the value in the text field script calculate price for product.
<input type="text" value="" name="options[22]" class="input-text"
onfocus="opConfig.reloadPrice()">
Problem is that the script triggers only if the following is done:
insert value into the textfield
click somewhere outside the textfield
click back into the text field
All I need is a button saying refresh that by clicking it will have functionality of step 2 and step above.
I'm not sure if I explained it properly so if there is any more information required to resolve this issue please let me know.
Here is the link to the site.
http://www.floorstodoors.mldemo.co.uk/spotlight/oak-value-lacquered-3-strip.html
The field im trying to amend/add refresh button is Enter Square Metre
You'd add your event to a button, and retrieve a reference to your input by assigning an ID:
<input type="text" value="" name="options[22]" id="price" class="input-text" />
<input type="button" value="Refresh" onclick="reloadPrice();" />
function reloadPrice() {
var price = "0.00"; // set your price here
// get a ref to your element and assign value
var elem = document.getElementById("price");
elem.value = price;
}
I'm not sure I fully understand you, but is this what you need?
<input type="text" value="" name="options[22]" class="input-text">
<input type="button" onclick="opConfig.reloadPrice()" value="Refresh" />
A button with an click-event listener, so that when you click the refresh-button the opConfig.reloadPrice() method gets executed.
Edit based on comment:
I'm not sure what JavaScript library you are using, but you have these two lines in you code that seems to add event-listeners to the input with id qty.
$('qty').observe('focus',function(){
$('qty').setValue($('qty').getValue().replace(/[^0-9]/g,''));
});
$('qty').observe('focus',this.getFromQties.bind(this))
They are listening for the focus event, thus only triggers when your input field gains focus.
If you modify those to listen for the keyup event instead, I believe it will work better. Without being familiar with the framework, I guess the only thing to change would be this:
$('qty').observe('keyup',function(){
$('qty').setValue($('qty').getValue().replace(/[^0-9]/g,''));
});
$('qty').observe('keyup',this.getFromQties.bind(this))
Use onchange or onblur instead of onfocus!
use onchange. This will activate anytime the value changes:
<input type="text" value="" name="options[22]" class="input-text" onchange="opConfig.reloadPrice()">
First: this is JavaScript and not Java - so you have to be a javascript and not a java developer.
to solve your problem you can make a new button with a onclick attribute and execute your function there which you have in your onfocus attribute in the text-field.
or you can take another event - like onchange or onblur for instance..
<input type="text" onchange="..yourfunctionhere...">
http://www.w3schools.com/js/js_events.asp
All I need is a button saying refresh that by clicking it will have functionality
For that you need a button with onclick listener,
do the below things.
<input type="button" value="Refresh" onclick="opConfig.reloadPrice();" />
<input type="text" value="" name="options[22]" class="input-text"/>