clearing html text files with data from mysql

i have the below form which is taking data from mysql server and making calculation but when use the reset button i couldnt clear the text fields that has data from my sql the short of the code is below i might have deducted some necessary parts but the code is working just except the reset button to . could you please help me with that.

<html>
<head>

<script type="text/javascript">
$(document).ready(function() {
    $("#reset").click(function(){
       $("#find").val("");
       $("#Editbox13").val("");
       $("#Editbox14").val("");
       $("#Editbox17").val("");
    }); 
});

</script>

<?php

$find=$_POST["find"];
$find = preg_replace('/ı/', 'i', $find);  
$find = strtoupper($find);

mysql_connect("*****", "*****", "****") or die(mysql_error());
mysql_select_db("kaliteler") or die(mysql_error());

$data = mysql_query("SELECT * FROM egearge3 WHERE BASECODE LIKE '%$find%' ");

$result = mysql_fetch_array( $data );


?>

</head>
<body>
<div id="wb_Form1" style="position:absolute;left:5px;top:4px;width:1346px;height:798px;z-index:69;maxwidth:device-width;">


<form name="PRICE_CALCULATION" method="post" action="" enctype="multipart/form-data" target="_parent" id="Form1" onsubmit="return ValidatePRICE_CALCULATION()">

<input type="text" id="Editbox13" style="position:absolute;left:123px;top:406px;width:90px;height:30px;line-height:30px;z-index:17;" name="Editbox13" value="<?php if(isset($_POST['Button2'])&&$find!="") {echo $result['REALWIDTH'] ;} ?>" tabindex="12" spellcheck="false" placeholder="000">

<input type="text" id="Editbox14" style="position:absolute;left:344px;top:408px;width:90px;height:30px;line-height:30px;z-index:28;" name="Editbox14" value="<?php if(isset($_POST['Button2'])&&$find!="") {echo $result['REALWEIGHT'] ;} ?>" tabindex="13" spellcheck="false" placeholder="000">

<input type="text" id="Editbox17" style="position:absolute;left:2px;top:663px;width:1314px;height:63px;line-height:63px;z-index:41;" name="Editbox17" value="<?php if(isset($_POST['Button2'])&&$find!="") {echo $result['TYPE']."-".$result['COMPOSITION']."-".$result['PROCESS'] ;}else{echo "";}?>" spellcheck="false" placeholder="product details" rows="2" >

<input type="submit" id="Button1" name="submit[]" value="giveprice" style="position:absolute;left:516px;top:608px;width:222px;height:44px;z-index:42;" formaction="insert2.php" >

<input type="text" id="find" style="position:absolute;left:556px;top:222px;width:132px;height:36px;line-height:36px;z-index:64;" name="find" value="<?php echo $find ; ?>" spellcheck="false">

<button type="submit" id="Button2" onclick="window.reload(true);return false;" name="Button2" value="getir" style="position:absolute;left:562px;top:282px;width:71px;height:46px;z-index:65;" formaction="page8.php" >getir</button>

<input type="reset" id="btnReset" name="reset" value="Reset" style="position:absolute;left:642px;top:282px;width:56px;height:44px;z-index:68;" onclick="reset()">
</form>

</div>
</body>
</html>

Solution

You have 3 errors:

first you are attibutting a onclick event in btnReset to a function that doesn't exist (reset())
in $(document).ready you are setting an object that doesn't exist (#reset). Should be #btnReset
even if you have gotten the name right in $(document).ready it wouldn't work because the reset button is of type reset which just puts the initial values in the field and doesn't allow onclick events to be set.

So to correct: remove onclick="reset, change $("#reset").click to $("#btnReset").click and change type="reset" to type="button".

Edit

I'm taking for granted that you included the script line that loads jQuery. If you didn't do this, you also have to include

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

before <script> tag or the $ command won't work. Notice that this is one of many ways to include jQuery. Use whatever you want, but don't forget it must be loaded before the code in the <script> tag runs

Like this:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $("#btnReset").click(function(){
            $("#find").val("");
            $("#Editbox13").val("");
            $("#Editbox14").val("");
            $("#Editbox17").val("");
        }); 
    });
</script>
</head>
<body>
    <div id="wb_Form1" >
        <form name="PRICE_CALCULATION" method="post" action="" enctype="multipart/form-data" target="_parent" id="Form1" onsubmit="return ValidatePRICE_CALCULATION()">
            <input type="text" id="Editbox13" value="whatever">
            <input type="text" id="Editbox14" value="whatever">
            <input type="text" id="Editbox17" value="whatever">
            <input type="submit" id="Button1" name="submit[]" value="giveprice" formaction="insert2.php" >
            <input type="text" id="find" value="whatever">
            <button type="submit" id="Button2" onclick="window.reload(true);return false;" formaction="page8.php" >getir</button>
            <input type="button" id="btnReset" name="reset" value="Reset" >
        </form>
        </div>
</body>
</html>