Ionic Project - get Input text

[David_G_4]

I am making my first app using ionic and it is going really well so far.

However, I can't see to figure out how to get text put into an ionic input form...???

I am having the same problem with the select form.  It is not easy and the ionic forum is not very helpful.

All I want to do is put in text in an input and be able to save it as a javascript variable.

Can anyone help?

[Chris_P_Intel]

There are any number of options.

jQuery makes it easy, and if you are using the Design View, then jQuery will have been added to the project.

First - if you haven't already, set the id of the input widget. 

Then use this Javascript to get its value:

var what_the_user_typed = $("#theid input").val();

Or note its uib and use that:

var what_the_user_typed = $(".uib_w_2 input").val();

Or, if you want to be updated when it changes

$("#theid input").on("change", function(evt){   console.log("the user just typed", $("#theid input").val()); })

If you want constant updates, listen to 'keyup' and 'blur'.

[Chris_P_Intel]

If you really need a form, first drop a row onto the page and then drop your inputs into it.  Go back to the row and in its properties you can convert it to a  FORM  rather than a DIV.   But this isn't very useful for mobile apps.

[David_G_4]

I would really like to use jQuery however I can't get it to work.

I have tried all of your suggestions and none have worked.  It will not give me the active text typed into the input form.  It doesn't cause any errors it just returns blank.

Note:  If I add     value="Initial text"     to the <input  > it will place "Initial text" in the text input when it is loaded and it will also return it when I call $("#inputID").val(); but if I change the text or do anything else it will still return "Initial text" and nothing else.

Any ideas?

Here is how the JS libraries are added:

<script src="cordova.js" id="xdkJScordova_"></script>

        <script src="js/app.js"></script>
        <!-- for your event code, see README and file comments for details -->
        <script src="js/init-app.js"></script>
        <!-- for your init code, see README and file comments for details -->
        <script src="xdk/init-dev.js"></script>
        <!-- normalizes device and document ready events, see file for details -->
        <script type="application/javascript" src="ionic/js/ionic.bundle.js"></script>
        <script type="application/javascript" src="js/index_init_services.js"></script>

        <script type="application/javascript" src="sidebar/js/hammer.js"></script>
        <script type="application/javascript" src="lib/jquery.min.js"></script>
        <script type="application/javascript" src="sidebar/js/jquery.hammer.js"></script>
        <script type="application/javascript" src="sidebar/js/swipe-hammer.js"></script>
        <script type="application/javascript" src="sidebar/js/sidebar.js"></script>
        <script type="application/javascript" src="js/index_user_scripts.js"></script>
        <script type="application/javascript" src="xdk/ad/ionic_subpage.js"></script>
        <script type="application/javascript" src="js/uib_w_17_modal.js"></script>
        <script type="application/javascript" src="js/uib_w_26_modal.js"></script>
        <script type="application/javascript" src="marginal/marginal-position.js"></script>
        <script type="application/javascript" src="js/uib_w_34_modal.js"></script>

[Adam_G_]

I may be easier if you share a code snippit so we can see what you are having issues with.  

Make sure you have your .js files in the right directory so that the <script> tag can find them (otherwise none of the JS libraries will work).

If you are using Ionic; it is connected with Angular.JS.  You can use JQuery (Chris P. posted some good snippits for using that for field values). If you use Angular (Ionic was built with Angular in mind and Angular makes data binding of forms and fields really easy and powerful) remember to create your controller and then bind to a property of your controller.  If you aren't able to add .js files with the <script> tag then this will also impact your Ionic project (indeed it would impact any project) and you should look into why that is happening.

I hope that helps.

[David_G_4 · Accepted solution]

Here is to follow up.

I never got jQuery $("#id").val() to work.  It always returned an empty string.

I finally got it working using angular.js

Here is how.

<input  type="text" placeholder="(Optional)" ng-model="text.name">

<button class="button widget uib_w_46 d-margins button-positive" data-uib="ionic/button" data-ver="0" ng-controller="getInput" ng-click="addResource()">Add Site</button>

The important part is that I added ng-model="text.name" to my input and ng-controller="getInput"  and  ng-click="addResource() to my button.

Then I set up the following javascript:

function getInput($scope) {
$scope.addResource = function () {
            console.log($scope.text);
        };

This works fine, it's few extra steps then jquery though.

I was struggling getting Anhular.js to work. all of the examples I found showed it set up differently.  The reason I figured this out was because I found the Intel adds this code in index_init_services.js

angular.module('myApp',['ionic']).config(['$controllerProvider', function($controllerProvider) {
	$controllerProvider.allowGlobals();
}]);

Anyway, when I attempted to add controllers is a different way as what I described above, it would break my modal and actionsheets that were added to the project by Intel XDK/App designer.

Hope this helps somebody.