How to auto populate other field based on the selection from dropdown

I have created this page to fetch data from my database based on the selection of drop down which is also derived from the database. Please help me in this regard as I am stuck with no luck. Here is my code:

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>

</head>

<body>
<?php
$coection = mysqli_coect("localhost", "root", "rajat123", "callboard");
$data = "select * from customermaster";
$query = mysqli_query($coection, $data);
?>
<form name="sysadd" id="form1" method="post" action="system_reg2.php">
Customer Name:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <select name="custname" id="custname" onchange="updatetext()">
<?php
    while ($row = $query->fetch_assoc()) {
        echo "<option value="{$row['custname']}">";
        echo $row['custname'];
        echo "</option>";
    }
?>
</select><br /><br />
<input type="text" name="type" id="type" />
<input type="text" name="sl_no" id="sl_no" />
<input type="text" name="config" id="service" />
<input type="text" name="date" id="date" />

</form>
<script type="text/javascript">

        function updateText() {
            var custname2 = document.getElementById("custname").value;
            <?php $data2 = mysqli_query($coection, "SELECT * FROM customermaster WHERE custname = 'custname2'") ; ?> 
            <?php $row = mysqli_fetch_array($data2); ?>
          document.getElementById("type").value = <?php echo $row['type'] ?>;
          document.form1.sl_no.value = <?php echo $row['sl_no'] ?>;
          document.form1.config.value = <?php echo $row['config'] ?>;
          document.form1.date.value = <?php echo $row['date'] ?>;

    }
</script>
</body>
</html>