テキストボックスに入力された値を取得できない

iosのアプリ開発をしています．
その際にhtml5を用いてUIを作成しているのですが，テキストボックスに入力された値を取得できません．
取得した値を遷移先に渡す予定です．
原因としてはa要素の中のonclickが実行されてないと考えています．
分かる方がいれば教えてください．
よろしくお願いします．

<script type="text/javascript">

$('<div class="list-group" > ').appendTo('body');
$('<form name="form1" id="id_form1" >').appendTo('body');
$('<input type="text" name="name_textBox1" id="id_textBox1" size="30" style="font-size:20pt;ime-mode:active;" maxlength="50" >').appendTo('body');
var str1;
$('<a class="list-group-item" href="javascript:void(0);" id="id_a" onclick="getValue();return false;" ><i class="fa fa-fw"></i>OK</a>').appendTo('body');

$('</form>').appendTo('body');
$('</div>').appendTo('body');

function getValue(){
str1 = document.forms.id_form1.id_textBox1.value;
var testTarget=document.getElementById('id_a');
testTarget.href="callNative://regRecipiName?' + str1 + '";
}
</script>

No.2 ベストアンサー 回答者： Ogre7077 回答日時： 2016/10/20 16:46

原因1

$().appendTo() の使い方が変なので HTML 構造が崩れているので、
form#id_form1 の配下に input#id_textBox1 が無い。
よって document.forms.id_form1.id_textBox1 が存在しない。

修正案1)
ID のみで取得
var str1 = $('#id_textBox1').val();

修正案2)
ちゃんとした HTML 構造を生成する
var html = '<div> ...';
html += '<form> ... </form>';
html += '</div>';
$('body').append(html);

参考)
http://api.jquery.com/jQuery/#jQuery-html-ownerD …
When the parameter has a single tag (中略) jQuery creates the element using the native JavaScript .createElement() function.

--

原因2
onclick="getValue();return false;" しているので、click してもなにもおきない。

修正案1)
onclick から return false; を除外

修正案2)
testTarget.href ではなく location.href を更新

No.1 回答者： yambejp 回答日時： 2016/10/20 09:56

iosで動作するかどうかはともかく、決定的にまちがっているところがいくつかあります。

div、form、inputをbodyにappendしていますが、
divはbodyに、formはdivに、inputはformにappendするんじゃないでしょうか？

その上で
str1 = document.forms.id_form1.id_textBox1.value;
としていますが、idで指定したいなら
document.getElementById("id_textBox1").value;
でしょうし、nameで参照したいなら
document.form1.elements["name_textBox1"].value;
ではないのでしょうか？