how to make auto input in textfield html - php

Question

When I select one of the choice in the datalist, I want the textfield to be auto filled. I have this code but it does not work. Sorry my English is not good
<tr>
<td width="15%"><div class="tabtxt">Pilih Pembayaran</div></td>
<td width="2%"><div class="tabtxt">:</div></td>
<td width="83%">
<input list="bayar" name="bayar" style="width: 203px">
<datalist id="bayar">
<option value="Visual Basic Islam">
<option value="Baitul Arqam">
<option value="Shortcourse">
<option value="Sertifikasi">
<option value="Seminar SID">
<option value="TOEFL & Bahasa Inggris">
</datalist>
</td>
</tr>
<tr>
<td width="15%"><div class="tabtxt">Kode Pembayaran</div></td>
<td width="2%"><div class="tabtxt">:</div></td>
<td width="83%">
<input name="id_bayar" style="width: 200px" type="text" class="tfield" id="id_bayar">
<script type="text/javascript">
$("#bayar").change(function(){
var in = $("#bayar").val();
$("id_bayar").val("hallo");
});
</script>
</td>
</tr>
How do I solve this? Thanks for the answers

Answer 1

Firstly add an id ,for example inbayar, to the input element:
<input id="inbayar" list="bayar" name="bayar" style="width: 203px">
They, you have to bind this html5 element's event like that:
$(document).ready(function () {
$("#inbayar").bind('input', function () {
$("#id_bayar").val(this.value);
alert("Working!");
});
});
Working solution here http://jsfiddle.net/csdtesting/gk3r8da9/
Revision solution asked vol.1 http://jsfiddle.net/csdtesting/gk3r8da9/1/

Answer 2

<table>
<tr>
<td width="15%"><div class="tabtxt">Pilih Pembayaran</div></td>
<td width="2%"><div class="tabtxt">:</div></td>
<td width="83%">
<select id="bayar">
<option value="Visual Basic Islam">Visual Basic Islam</option>
<option value="Baitul Arqam">Baitul Arqam</option>
<option value="Shortcourse">Shortcourse</option>
<option value="Sertifikasi">Sertifikasi</option>
<option value="Seminar SID">Seminar SID</option>
<option value="TOEFL & Bahasa Inggris">TOEFL & Bahasa Inggris</option>
</select>
</td>
</tr>
<tr>
<td width="15%"><div class="tabtxt">Kode Pembayaran</div></td>
<td width="2%"><div class="tabtxt">:</div></td>
<td width="83%">
<input name="alert();" style="width: 200px" type="text" class="tfield" id="id_bayar">
</td>
</tr>
</table>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#bayar").on('change',function(){
var a = $("#bayar").val();
$("#id_bayar").val(a);
});
});
</script>