Software Archive
Read-only legacy content
17061 Discussions

How to get input value - Ionic Framework

Mario_R_
Beginner
6,564 Views

Hello to all,

using Ionic I can not get the values of the inputs. Precisely I always get "undefined".
Excuse the banal question, but I tried some ways unsuccessful. Someone could explain to me how to do?

I created two simple elements, a text input and a button

HTML code

<button class="button widget uib_w_107 d-margins" data-uib="ionic/button" data-ver="0" id="btn_test" >Get input value</button>

<label class="item item-input widget uib_w_168 d-margins" data-uib="ionic/input" data-ver="0" id="input_text">
   <span class="input-label">Text</span>
   <input type="text" placeholder="bla bla">
</label>

JS code

console.log(document.getElementById("input_text").value); //undefined

console.log($("input_text").val()); //undefined

Thereafter I would empty the input text. Thanks for the help.

0 Kudos
1 Solution
Hamilton_Tenório_da_
Valued Contributor I
6,564 Views

Try to give an id to input line, like this:

 <input id="myField" type="text" placeholder="bla bla">

and use this name on 

 console.log($("#myField").val());

 

View solution in original post

3 Replies
Elroy_A_Intel
Employee
6,563 Views

Since the input is actually in the label element you can try the following line of code to set of the value of the input element:

document.querySelectorAll("#input_text>input")[0].value = "car".

In order to get the value of the input, you can use 

document.querySelectorAll("#input_text>input")[0].value

For more information on querySelectorAll, visit http://www.w3schools.com/jsref/met_document_queryselectorall.asp

 

0 Kudos
Hamilton_Tenório_da_
Valued Contributor I
6,565 Views

Try to give an id to input line, like this:

 <input id="myField" type="text" placeholder="bla bla">

and use this name on 

 console.log($("#myField").val());

 

Mario_R_
Beginner
6,563 Views

Thanks for answers.

In fact the problem was with the id.
App Designer with Ionic puts id inside the div label instead of div input.

// Before 
<label class="item item-input widget uib_w_168 d-margins" data-uib="ionic/input" data-ver="0" id="input_text"> 
    <span class="input-label">Text</span>
    <input type="text" placeholder="bla bla"> 
</label> 

// After 
<label class="item item-input widget uib_w_168 d-margins" data-uib="ionic/input" data-ver="0" > 
    <span class="input-label">Text</span> 
    <input type="text" placeholder="bla bla" id="input_text"> 
</label>

Now it works well

console.log(document.getElementById("input_text").value); //Real value input! 

Thank you, solved!

0 Kudos
Reply