In my use case, I am trying to get value from dynamically generated hidden field in JQuery. When I click the button for that iteration I should get the value for the hidden field belongs to that iteration. But I am not able to get it. It is giving the value as 'undefined'

HTML:

<div class="ment-list-new" style= "max-height: 660px !important;overflow-y: scroll;">
    <h5>Discussion Board</h5>
    <ol>
        {{  if .ViewData.Questions }}
        {{ range .ViewData.Questions }}
            <li>
                <p id="question_id" class="question_id_val" hidden>{{.QuestionId}}</p>
                <div class="q-ment">
                    <div class="qanda questiondiv" id="questionarea" name="questionarea">
                        <div>
                            <div id="topic" class="upvote pull-left">
                                <a class="upvote"></a>
                                <span class="count">3</span>
                                <a class="downvote"></a>
                            </div>
                            <div >
                                <div class="qanda-info">
                                    <h6><p id="quest_title">{{.QuestionTitle}}</p></h6>
                                </div>
                                <p id="quest_text">{{.QuestionText}}</p>
                            </div>
                        </div >
                        <div class="qanda-info">
                        <div class="user-info">
                            <img src="/resources/img/team-small-2.png" />
                        </div>
                        <h6>{{.UserId}}</h6>
                        <span class="date alt-font sub">{{.DateCreated}}</span>
                        <a id="answertext" name ="answertext" type="submit" class="link-text answerbutton">Answer</a>
                    </div>
                    </div>
                </div>
            </li><!--end of individual question-->
         {{ end }}
        {{ end }}
    </ol>
</div><!--end of ments list-->

JS:

$('.questiondiv').on('click', '.submitanswerbutton', function() {
    console.log("In submit button");
    var question_id = $(this).closest('.question_id_val').val();
    var answer_text = $('.answertext_val').val();
    console.log(question_id);
    console.log(answer_text);
    $.getJSON("/submitanswer?question_id="+question_id+"&answer="+answer_text, function(data) {
            console.log("answer Response"+data);
            newQuestion = "<li><div class='q-ment'><div class='qanda' id='questionarea' name='questionarea'><div><div id='topic' class='upvote pull-left'><a class='upvote'></a><span class='count'>0</span><a class='downvote'></a></div><div ><div class='qanda-info'><h6><p id='quest_title'>"+title+"</p></h6></div><p id='quest_text'>"+desc+"</p></div></div ><div class='qanda-info'><div class='user-info'><img src='/resources/img/team-small-2.png' /></div><h6>Chip Mayer</h6><span class='date alt-font sub'>September 17 2014</span><a id='answertext' name ='answertext' type='submit' class='link-text'>Answer</a></div></div></div></li>";
            $('ol').append(newQuestion);
    });
});

In the above code I am trying to get the value for the hidden field question_id_val. Could anyone help me with this?

In my use case, I am trying to get value from dynamically generated hidden field in JQuery. When I click the button for that iteration I should get the value for the hidden field belongs to that iteration. But I am not able to get it. It is giving the value as 'undefined'

HTML:

<div class="ment-list-new" style= "max-height: 660px !important;overflow-y: scroll;">
    <h5>Discussion Board</h5>
    <ol>
        {{  if .ViewData.Questions }}
        {{ range .ViewData.Questions }}
            <li>
                <p id="question_id" class="question_id_val" hidden>{{.QuestionId}}</p>
                <div class="q-ment">
                    <div class="qanda questiondiv" id="questionarea" name="questionarea">
                        <div>
                            <div id="topic" class="upvote pull-left">
                                <a class="upvote"></a>
                                <span class="count">3</span>
                                <a class="downvote"></a>
                            </div>
                            <div >
                                <div class="qanda-info">
                                    <h6><p id="quest_title">{{.QuestionTitle}}</p></h6>
                                </div>
                                <p id="quest_text">{{.QuestionText}}</p>
                            </div>
                        </div >
                        <div class="qanda-info">
                        <div class="user-info">
                            <img src="/resources/img/team-small-2.png" />
                        </div>
                        <h6>{{.UserId}}</h6>
                        <span class="date alt-font sub">{{.DateCreated}}</span>
                        <a id="answertext" name ="answertext" type="submit" class="link-text answerbutton">Answer</a>
                    </div>
                    </div>
                </div>
            </li><!--end of individual question-->
         {{ end }}
        {{ end }}
    </ol>
</div><!--end of ments list-->

JS:

$('.questiondiv').on('click', '.submitanswerbutton', function() {
    console.log("In submit button");
    var question_id = $(this).closest('.question_id_val').val();
    var answer_text = $('.answertext_val').val();
    console.log(question_id);
    console.log(answer_text);
    $.getJSON("/submitanswer?question_id="+question_id+"&answer="+answer_text, function(data) {
            console.log("answer Response"+data);
            newQuestion = "<li><div class='q-ment'><div class='qanda' id='questionarea' name='questionarea'><div><div id='topic' class='upvote pull-left'><a class='upvote'></a><span class='count'>0</span><a class='downvote'></a></div><div ><div class='qanda-info'><h6><p id='quest_title'>"+title+"</p></h6></div><p id='quest_text'>"+desc+"</p></div></div ><div class='qanda-info'><div class='user-info'><img src='/resources/img/team-small-2.png' /></div><h6>Chip Mayer</h6><span class='date alt-font sub'>September 17 2014</span><a id='answertext' name ='answertext' type='submit' class='link-text'>Answer</a></div></div></div></li>";
            $('ol').append(newQuestion);
    });
});

In the above code I am trying to get the value for the hidden field question_id_val. Could anyone help me with this?

• javascript
• jquery
• html
• hidden

Share Improve this question Follow asked Dec 19, 2015 at 1:12 DanyDany 2,80099 gold badges4848 silver badges6969 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Use closest() to get a reference to the outer container (li) and then use find() method to get the hidden field.

 var question_id = $(this).closest('li').find('.question_id_val').val();

val() method works for usually input form fields(textbox,hidden fields etc..) .So you need to make sure your element is a valid form field in your page.

<input type="hidden" id="question_id" class="question_id_val" />

Or if you want to keep your p tag as it is, Use the html() or text() method to get the content of the p tag.

var question_id = $(this).closest('li').find('.question_id_val').text();

Remember, these method returns the text/html of all child content as well. So make sure to use it wisely.

val() should be used primarily in select, textarea and input elements.

For getting the inner text use html() or text()

var question_id = $(this).closest('.question_id_val').html();

or

var question_id = $(this).closest('.question_id_val').text();

If you know a css selector id or class I don't see problem why you can't do something like this:

var question_id = $('#question_id').text();

Or

var question_id = $('.question_id_val').text();