javascript - JQuery Function Only Printing out Undefined -
i'm writing function meant append contents of text field on webpage list, part of html can render list contents above text field. field , button appear , responsive, thing get's printed out "undefined" rather contents of text field. javascript function:
<sp:script> $('#append').on('click', function () { var text = $('#new-text').val(); var li = '<li>' + text + '</li>'; $('#target-list').append(li); }); </sp:script> and code rendering text, text field, , button:
<!-- adding text --> <div class="tab-content"> <!-- begin div --> <div class="clearfix"> <div class="form-group col-sm-4"> <ul id ="target-list"> <!-- begin rendering existing text --> <g:each var="newtext" in="${instance.newtexts}"> <li class ="list-item"> ${newtext} <input type="hidden" name="newtext" value=${newtext}"/> </li> </g:each> </ul> <!-- end rendering existing text --> <!-- enter text field start --> <input class="form-control required" type="text" id="new-email" placeholder="enter additional email addresses"/> <!-- enter text field end --> </div> <br> <!-- begin code add button --> <button type="button" class="btn btn-sm btn-green" title="add mew text" id = "append"> <i class="fa fa-plus"></i> </button> <!-- end button div --> </div> </div> is there i'm missing?
your input not have id '#new-text'. cause $('#new-text').val() undefined. try adding id.
<input id="new-text" type="hidden" name="newtext" value=${newtext}"/>
Comments
Post a Comment