How to change the input value of <ion-input></ion-input> element via JS

Question

Im trying to assign a value for my ion-input element via JS. here is my code:

HTML:

<ion-input type="text" placeholder=" Enter a location" style="padding-left: 10px;" id="geolocation"></ion-input>

JAVASCRIPT:

function onSuccess(position) {
        var element = document.getElementById('geolocation').value = position.coords.latitude  + ',' + position.coords.longitude;
        //element.value =  position.coords.latitude  + ',' + position.coords.longitude + element.value;

    }

I cannot change the value of my input element, I want to put the position.coords.latitude + ',' + position.coords.longitude as the value of my input element.

Hoping for a quick answer. Thanks!

why not use [(ngModel)] and bind the object directly to the input ? without touching the DOM directly like you are doing ? — Denko Mancheski
– Denko Mancheski, Commented Apr 22, 2016 at 23:22

Nabeel Khan · Accepted Answer · 2016-04-21 05:04:53Z

2

Assuming that you're receiving the latitude and longitude correctly in array form, the code should look like this:

function onSuccess(position) {
        document.getElementById('geolocation').setAttribute("value", latitude + ', ' + longitude);
}

Test here: https://jsfiddle.net/nabtron/qy96n44k/

Explanation:

Here we simply called the element by using its Id and set its attribute value as explained here: https://nabtron.com/javascript-tips/

edited Apr 21, 2016 at 5:04

answered Apr 21, 2016 at 4:56

Nabeel Khan

4,0613 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jean chu Over a year ago

I found a solution I did var element = document.getElementById('geolocation'); element.value = position.coords.latitude + ',' + position.coords.longitude it worked :D

Nabeel Khan Over a year ago

I'm glad that you fixed it! but it's the same as this answer plus what you were trying earlier, you might have changed other things in code too that might be having issue earlier.

Jroger · Accepted Answer · 2016-08-20 11:33:24Z

1

try something like:

[(ngModel)]="position.coords.latitude  + ';' + position.coords.longitude"

Dom manipulation will work, but it's not the right way, see how use the solution below:

HTML

<ion-input type="text" placeholder=" Enter a location" style="padding-left: 10px;" id="geolocation" [(ngModel)]="position.coords.latitude  + ';' + position.coords.longitude"></ion-input>

Javascript:

...

export class Geolocation {

   //{ position : { coords : { latitude : ... , longitude : ... } } }
   position : any;

   ...
}

answered Aug 20, 2016 at 11:33

Jroger

2654 silver badges17 bronze badges

Comments

Husen · Accepted Answer · 2016-04-21 05:06:54Z

0

Try this one.

document.getElementById("geolocation").value=
     (position.coords.latitude  + ',' + position.coords.longitude);

answered Apr 21, 2016 at 5:06

Husen

1,58510 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to change the input value of <ion-input></ion-input> element via JS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related