javascript - Why is dynamic textbox returning empty value? -

javascript - Why is dynamic textbox returning empty value? -

created basic input textbox , button dynamically via javascript using bootstrap css. on pressing button need retrieve value of textbox. coming out empty (not undefined).

the dosearch function need pick value.

here jsfiddle: http://jsfiddle.net/9u3kb6rk/3

here code:

(function ($) { function dosearch() { alert($('#name').val());//this empty? } $(document.body).on('click', '#go', function () { alert('doing search'); dosearch(); }); $.fn.searchname = function () { var caller = $(this); var output = ''; output += '<div class="input-group ">'; output += '<span class="input-group-addon area" id="name" name="name">name</span>'; output += '<input type="text" class="form-control" />'; output += '</div>'; output += '<div class="input-group">'; output += '<span class="input-group-btn">'; output += '<button class="btn btn-primary" type="button" id="go">search</button>'; output += '</span>'; output += '</div>'; output += '</div>'; $(caller).html(output); homecoming this; } }(jquery)); $(document).ready(function () { $('#searchname').searchname(); });

the id must in input instead of in span.

output += '<span class="input-group-addon area">name</span>'; output += '<input type="text" id="name" name="name" class="form-control"

your code updated.

javascript jquery html twitter-bootstrap