javascript - dynamic selectbox to inputbox using materializecss framework and php mysql -
i create dynamic select box retrieve database. display in selectbox succeed. however, can not display data text input. please help
<form class="col s12" action="" method="post"> <div class="row"> <div class="input-field col s12"> <?php $npm = $connect->execute("select * tbl_respondent npm order npm asc"); $row_count = $npm->num_rows; ?> <select name="npm" class="npm"> <option value="" disabled="disabled" selected>pilih npm anda</option> <?php if ($row_count > 0) { while ($row = $npm->fetch_assoc()){ echo '<option value="'.$row['npm'].'">'.$row['npm'].'</option>'; } } else { echo '<option value="">npm tidak tersedia</option>'; } ?> </select> <label>pilih npm</label> </div> </div> <div class="row"> <div class="input-field col s12"> <input id="alumni_name" name="name" type="text" class="validate"> <label for="alumni_name">nama mahasiswa</label> </div> </div></form>
javascript code here :
$('select').material_select(); $('.npm').on('change', function(){ var npm = $(this).val(); if (npm) { $.ajax({ type: 'get', datatype: "json", url: 'index/npm_search.php', data: 'npm=' + npm, success: function(html){ var toappend = ''; $.each(html, function(value){ toappend += '<input id="alumni_name" name="name" type="text" value="'+value.text+'">'; }); $('#alumni_name').append(toappend); } }); } }); $('select').on('contentchanged', function() { // re-initialize (update) $(this).material_select(); });
and npm_search.php here:
require_once 'apps/model/class.connection.php'; $connect = new connection(); if (isset($_get['npm']) && !empty($_get['npm'])) { $name = $connect->execute("select * tbl_respondent npm = ".$_get['npm']."order name asc"); $row_count = $name->num_rows; $return = []; $i = 0; if ($row_count > 0) { $return[$i] = [ 'id' => '', 'text' => 'pilih npm anda', ]; while ($row = $name->fetch_assoc()) { $i++; $return[$i] = [ 'text' => $row['name'], ]; } } else { $return[$i] = [ 'id' => '', 'text' => 'npm tidak tersedia', ]; } echo json_encode($return); }
Comments
Post a Comment