How to retrieve input text value from another tab view

Question

I have four tabs and this input text is located in the second tab view. I have two buttons (back and next). When I'm in last tab, I want to retrieve value from this input text when pressing next button, but it always gives a null or undefined value, I don't know how to solve it. I have a text box with html code like this :

<div class="container-fluid add-report-field" style="background-color:white">
       <div class="tabbable js-report-tab-container" >
              <div class="tab-content">

                <div class="tab-pane" id="tab1">
                  <div class="form-group">
                  <label>Report Title</label>
                  <input type="text" name="js-report-title-step-2" id="js-report-title-step-2" class="form-control js-report-title-step-2"  placeholder="Report Title" value="Report Title">
                </div>
           </div>
       </div>
</div>

I just try to retrieve it's value. I have tried this in my console.log :

console.log($("input[name=js-report-title-step-2]").val());
console.log($("#js-report-title-step-2").val());
console.log($("#js-report-title-step-2").text());
console.log($(".js-report-title-step-2").attr("value"));
console.log($("input:text").val());

but none of above ways work for me

What's the problem here...???

Note : here is console.log($):

[There doesn't seem to be any trouble](https://jsfiddle.net/15woa4tn/), your code works as it is. See http://stackoverflow.com/q/14028959/1169519 — Teemu, Aug 28 '16 at 16:56
Do any of those selectors without the `.val()` return something? — Jed Fox, Aug 28 '16 at 17:00
Can you provide a larger code sample — It’s hard to see what’s gone wrong otherwise. — Jed Fox, Aug 28 '16 at 17:03
@Teemu.. it did work before, but this time it doesnt..I wonder what's happening ... — Maryadi Poipo, Aug 28 '16 at 17:03
I've no idea, since we obviously can't reproduce your issue with the code you've provided. You could check the length of the retuned jQuery object, to see, if any element was found ... — Teemu, Aug 28 '16 at 17:06
Then the input doesn't exist at the time you want to refer it. Please check the link in my first comment. — Teemu, Aug 28 '16 at 17:14
Ooowh iyaaah... It doesn't exist because I have moved to another tab view...I think that's the reason why it always give me an empty value @Teemu — Maryadi Poipo, Aug 28 '16 at 17:23
Oooowh... I think... I just need to save the value of this input text to global variable, So it's still accessed in the last tab view... :) — Maryadi Poipo, Aug 28 '16 at 17:31
Would you like to post your answer @Teemu...??? I finally found it, but it's actually from your clue... :) Thanks btw... :) — Maryadi Poipo, Aug 28 '16 at 17:40
mmmm.... yaaaps... Almost... But I think it's in different mind... :) Weel... mmm.... I post my own answer later then... :) Thank you so much... — Maryadi Poipo, Aug 28 '16 at 17:44

score 2 · Answer 1 · answered Aug 28 '16 at 16:57

2

undefined means the collection is empty as .value property of an input can only be a DOMString and not undefined. You are probably querying the DOM before the element is added to the DOM. Either use the .ready method or make sure the element exists in the DOM when the code is executed, you can do this by putting the script tag after the target element.

answered Aug 28 '16 at 16:57

undefined

136,817
15
158
186

I'm using webpack bundle... So I don't use .ready. I'm just calling $(".id") directly – Maryadi Poipo Aug 28 '16 at 17:10
@HyosokaPoipo There is an _or_ part: " make sure the element exists in the DOM when the code is executed". Also webpack is a module bundler and it has nothing to do with jQuery `.ready` method. – undefined Aug 28 '16 at 17:13
I think the problem is in the tab @Vohuman, it's null because when I wanto retrive the value, I have moved to another tab view. That why it gave undefined, is there any way to retrieve the value ? Thank you.. – Maryadi Poipo Aug 28 '16 at 17:25
@HyosokaPoipo Tabs usually work by hiding an element. Your code should work even when the element is hidden. So this should not be the problem. – undefined Aug 28 '16 at 19:54
Oooowh... mmmm... I'm not sure about that... But thanks for your info @Vohuman... :) – Maryadi Poipo Aug 29 '16 at 03:02

frogatto · Answer 2 · 2016-08-29T06:44:56.690

1

To get value of input fields, you should use val(). In your case, because of getting undefined, you should make sure your code is in $(document).ready(function(){}) or more simply $(function(){}).

$(function(){
  alert($('input').val());
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" name="js-report-title-step-2" id="js-report-title-step-2" class="form-control js-report-title-step-2"  placeholder="Report Title" value="Report Title">

edited Aug 29 '16 at 06:44

answered Aug 28 '16 at 16:57

frogatto

26,401
10
73
111

Haay... I have updated my question, please review it again.. :) – Maryadi Poipo Aug 28 '16 at 17:24

Ehsan · Answer 3 · 2016-08-28T17:15:58.827

Try it :

$(document).ready(function(){

    $ele = $(".add-report-field").find("input[name=js-report-title-step-2]");

    console.log($ele.val());

})

Final code :

<!DOCTYPE html>
<html>
<head>
    
</head>
<body> 
    <div class="container-fluid add-report-field" style="background-color:white">
       <div class="tabbable js-report-tab-container" >
              <div class="tab-content">
                <div class="tab-pane" id="tab1">
                  <div class="form-group">
                  <label>Report Title</label>
                  <input type="text" name="js-report-title-step-2" id="js-report-title-step-2" class="form-control js-report-title-step-2"  placeholder="Report Title" value="Report Title">
                </div>
           </div>
       </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>        
    $(document).ready(function(){

        $ele = $(".add-report-field").find("input[name=js-report-title-step-2]");

        console.log($ele.val());


    })
    </script>
</body>
</html>

copy all my answer and paste in your editor , and try it.if help you mark my answer! — Ehsan, Aug 28 '16 at 17:01
I have updated my question, please take a look again.. :) This input text is inside a tab... — Maryadi Poipo, Aug 28 '16 at 17:08

How to retrieve input text value from another tab view

3 Answers3