Navigator and HTML Inputs

[serjunior86]

Hello,

I’m having a problem related to the navigator and HTML inputs. I added the navigator in my index.html and I’m using the navigator.pushPage() to open the pages. When I try to read the input “price” for the first time, the app shows correctly the input value (okay). But when I call navigator.pushPage() again and type another value in the field, the alert still shows the first value. I can type another value, but it always alerts the first one.

(I was using slidingMenu.setMainPage() and this problem did not exist. It only occurs with navigator.pushPage()).

myPage.html:

<ons-page>                
	<input name='price' id='price' style="margin-top: 8px;"
		     class="text-input" type="number" min="1" step="any"
		     placeholder="ex.: 3000.00" ></input> 

        <ons-button modifier="large" 
                    ng-click="getValue()">Confirm</ons-button> 
</ons-page>

//function in app.js:

$scope.getValue = function() {
   alert(document.getElementById('price').value);
}

index.html:

<ons-sliding-menu var="app.slidingMenu" menu-page="menu.html"  side="left"   type="overlay" max-slide-distance="200px">
   <div class="main">
       <ons-navigator title="Navigator" var="navigator" 
        page="home.html"></ons-navigator>
   </div>             
</ons-sliding-menu>  

Versions:
onsenui - v1.3.15
AngularJS - v1.4.3
Chrome - 46.0.2490.86

What should I do?

[Fran Diox]

@dev-brazil Are you pushing the same page more than once without doing a popPage? If that’s the case you have the same page repeated in the DOM. Therefore, document.getElementById('price') will get only the first occurrence (presumably the input of the first page you pushed). Perhaps you can use replacePage instead of pushPage?

Basically, ons-navigator maintains a stack of pages. If you push a page to the stack and don’t pop it, it will remain in the stack and will appear in the results of document.getElementBy…

[serjunior86]

Fran Diox, thank you for your answer.

I put replacePage and it worked. But the problem with this solution is the back button that doesn’t work anymore.

I need to read the input values in my js functions and I would like to maintain the back button feature.

Is there any solution where I can use the back button and use html pages with inputs?

[munsterlander]

@dev-brazil Looks like you will want to use bringPageTop

https://onsen.io/2/reference/ons-navigator.html#method-bringPageTop

[serjunior86]

@munsterlander Hey man, bringPageTop solved my problem, thank you very much. Unfortunately this method is not available on Onsen 1.3.15. So I’ll have to update the version and solve some migration problems, but that’s ok.

[munsterlander]

@dev-brazil I think you will be very happy with the features in 2.0.

[serjunior86]

I’ve realized a thing. Another solution is to read the html inputs with the angular scope rather than reading directly from the DOM. This way I can use “pushPage” method in all pages and maintain the back button feature. Example:

  <input name='price' id='price' style="margin-top: 8px;"
             class="text-input" type="number" min="1" step="any" ng-model="price"
             placeholder="ex.: 3000.00" ></input> 

$scope.getValue = function() {
   alert($scope.price);
}

Thanks again for the answers.