This piece of code does not execute the code block inside the callback function for result():
var cityURL = '/myURL/path';
$('#city').autocomplete(cityURL, {
cachelength:0
}).result(function(event, data){
if(data){
$('#city_id').val(data[1]);
$('#state_id').val(data[3]);
$('#state').val(data[2]);
}
});
the value of input#city_id and input#state_id does not change, but the value for #state does change. Both are hidden input right next to their field:
<input type="text" id="city" name="city"/>
<input type="hidden" id="city_id" name="city_id" />
<input type="text" id="state" name="state"/>
<input type="hidden" id="state_id" name="state_id" />
however, if I put an alert, the values change:
$('#city').autocomplete(cityURL, {
cachelength:0
}).result(function(event, data){
if(data){
alert(data[1]);
$('input#city_id').attr('value',data[1]);
$('input#state_id').val(data[3]);
$('input#state').val(data[2]);
}
});
why is this?
EDIT: Scratch that, the values do not change even with an alert:
As I suspected in my comment, it's just Firebug that's not updating properly. You shouldn't trust the input value attributes it shows as they're often out of date.
A reliable way to check input values is to just use JS and enter something like $("#foo").val(); in the console.
Related
I have written this code which detects if there is a value populated in productName field using javascript and then it parses and auto-populate the input field quantity. My code only works if productName field is populated through javascript code and fails to register keyboard inputs if I use onChange
I want to detect in both scenarios i.e javascript and keyboard, how do I detect using the keyboard in this code?
const input = document.getElementById('productName');
const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');
Object.defineProperty(input, 'value', {
set: function(t) {
console.log('Input value was changed programmatically');
descriptor.set.apply(this, arguments);
document.getElementById("quantity").value=t
},
get: function() {
return descriptor.get.apply(this);
}
});
var i=0;
function changeInput(){
/* console.log(document.getElementById('productName').value) */
document.getElementById("productName").value=i++;
}
<input type="text" id="productName" name="productName" placeholder="product name">
<input type="text" id="quantity" name="quantity" placeholder="quantity">
<button onclick="changeInput()">Change</button>
Since I am a beginner in Javascript, a comment by #epascarello helped me, and this was quite easy with binding the input element:
document.getElementById("productName").addEventListener("input",(event)=>{
document.getElementById("quantity").value= document.getElementById("productName").value;
})
I need to print inside a span tag ("estimation2") the result of a calculation (for now, just a simple sum of the two input boxes "SHm2" and "STm2"). I'm using an AJAX call to perform that task. It seems to work perfectly until the alert, which shows the correct result, but for some reasons I can't write that result in my html form. I've been looking around and tried several things, yet none of them worked. For instance I've tried using the write method but it didn't work or stuff like $("#estimation2").html(estimation); or
document.getElementById("estimation2").innerHTML = estimation;
The only way I managed to get it written was by using window.onload, but this generates the calculation when the page loads, and I don't want that. I only want the AJAX code to be triggered when I click on my button.
Also, just for info, the calculation is made in my django view, even though I don't think it's relevant here as it looks to work properly. I'm really lost here, could you please help?
Here is my html code and the AJAX script:
<input type="text" id="SHm2" name="SHm2" maxlength="10" type="number" value="50">
<input type="text" id="STm2" name="STm2" maxlength="10" type="number" value="50">
<button id="estimation" name= "estimation" onclick="calculate()">Estimation</button>
<label>Result:</label>
<span id="estimation2"></span>
<script type="text/javascript">
function calculate () {
var SHm2 = $('#SHm2').val();
var STm2 = $('#STm2').val();
$.ajax({
url: '/myApp/templates/homepage/',
type: 'POST',
data: {
'SHm2':SHm2,
'STm2':STm2,
estimation: 'estimation',
},
success: function(estimation) {
alert(estimation);
document.getElementById("estimation2").innerHTML = estimation;
}
});
}
</script>
so what you wanna do is run the JS after the HTML document has loaded, and as mentioned in the comment section you need to add type="button" to estimation button
HTML
<input type="text" id="SHm2" name="SHm2" maxlength="10" type="number" value="50">
<input type="text" id="STm2" name="STm2" maxlength="10" type="number" value="50">
<button id="estimation" name= "estimation" type="button" onclick="calculate()" >Estimation</button>
<label>Result:</label>
<span id="estimation2"></span>
JS
$(document).ready(function() {
function calculate() {
var SHm2 = $("#SHm2").val();
var STm2 = $("#STm2").val();
$.ajax({
url: "/myApp/templates/homepage/",
type: "POST",
data: {
SHm2: SHm2,
STm2: STm2,
estimation: "estimation"
},
success: function(estimation) {
console.log(estimation);
document.getElementById("estimation2").innerHTML = estimation;
}
});
}
});
I had 2 input value, I need to do validation on first input value which is credit card number input, get input value on ts file and check validation on API while user still typing on second input, example of my first input value: 4444 4444 4444 4444, so i need to use subString() to get first 6 number before do validation,
this is what I had tried;
html file
<div>
<input
(keypress)="numberOnly($event)"
class="input"
type="text"
(keyup)="onKey($event)"
[(ngModel)]="creditCardNo"
/>
</div>
<div>
<input
class="input"
type="text"
[(ngModel)]="cardHolderName"
/>
</div>
ts file
onKey(event) {
this.creditCardNo = event.target.value;
const test = this.creditCardNo
.replace(/\s/g, '')
.toString()
.substr(0, 6);
this.paymentService.getCreditCardDetail('JPJSMN', test).subscribe(res => {
if (!res) {
return;
}
console.log(res);
});
}
using (keyup)="onKey($event)" to get value change, and do a validation on ts file based on response I get, however I notice if Im using (keyup)="onKey($event)", it doesnt detect copy and paste, and it keep requesting API,if there are better practice to solve this ?
You can opt to create a custom 'digitOnly' Angular directive.
A great guide on how to do this can be found here:
https://codeburst.io/digit-only-directive-in-angular-3db8a94d80c3
The directive shown in the tutorial address issues such as copy and paste.
If you just want to get the model updated when the user pasts something the same way as editing the value, you can just use
(ngModelChange)="pasteEvent($event)"
<div>
<input
(keypress)="numberOnly($event)"
class="input"
type="text"
(ngModelChange)="pasteEventcreditCardNo(creditCardNo)"
[(ngModel)]="creditCardNo"
/>
</div>
<div>
<input
class="input"
type="text"
(ngModelChange)="pasteEventcardHolderName(cardHolderName)"
[(ngModel)]="cardHolderName"
/>
</div>
I wanted to pass the value of input field to another input field with its value via javascript. I wrote code as shown below.
First input:
<input type="text" class="form-control" id="recipient" name="recipientName" value="RecipientName" onkeyup="recipient()"/>
Second input:
<input type="hidden" id="recipientHidden" name="recipientName"/>
Js Code
function recipient(){
var recipientNameValue = document.getElementById('recipient').value;
document.getElementById('recipientHidden').value = recipientNameValue;
console.log(document.getElementById('recipientHidden').value);
}
When I open console, there is no value in the console. When I click on the first input field, value is printed.
How can I get it instantly ?
Your code works fine, but it will only log the value on key up. You can log the value immediately by calling the recipient() function right away:
function recipient() {
var recipientNameValue = document.getElementById('recipient').value;
document.getElementById('recipientHidden').value = recipientNameValue;
console.log(document.getElementById('recipientHidden').value);
}
// Call function straight away
recipient()
<input type="text" class="form-control" id="recipient" name="recipientName" value="RecipientName" onkeyup="recipient()" />
<input type="hidden" id="recipientHidden" name="recipientName" />
i have a form where i get a collection of records, and after being present is shown like this:
<input name="position" id="nameText" step-id="3" type="number" value="1" class="form-control stepinput">
<input name="position" id="nameText" step-id="4" type="number" value="2" class="form-control stepinput">
<input name="position" id="nameText" step-id="5" type="number" value="3" class="form-control stepinput">
The value is to later sort the records, and the "step_id" attribute is to send via ajax to update the specific record, but my data is not quite looking good. Wich is the best way to send my data to the controller to later being updated the records
My current code:
$('button.update-positions').on('click', function(event){
event.preventDefault();
var form = $(this).closest(".steps-form");
var map = {};
$(".stepinput").each(function() {
map[$(this).attr("step-id")] = $(this).val()
});
})
Hard to read but if I understood correctly you:
Have an 3 inputs of numbers
Want the value entered being updated in the Database
use "step-id" to identify which one to update
If so then replace step-id="" by data-stepid="" and the code for that would be:
$("button.update-positions").on("click",function(event) {
event.preventDefault();
var form = $(this).closest(".steps-form");
var map = {};
$(".stepinput").each(function(index,value) {
map[$(this).data("stepid")] = value.value;
});
console.log(map); // Your map object
});
You can't have 2 elements with the same ID and you should use a data-attribute if you want to pass on information like so.