How to hide div after form reset?

I'm using jquery hide, show function in my signup form. By default my div is hidden as you see from script. Also there are 2 buttons: Submit and Reset. All works well, but there is 1 problem: it doesn't hide the divs #warr_details1 and #warr_details2 after resetting form. How can i hide them after form reset?

UPDATE

<form id="reg" method="post" action="<?php echo $_SERVER["PHP_SELF"]; ?>">
<fieldset>
<legend>Şirkət Haqqında</legend>
<table>
<tr><td width="270px" align="left">Şirkət: <input  placeholder="Şirkət" type="text" name="company"></td>
<td width="340px" align="right">Ünvanı: <input placeholder="Ünvanı" type="text" name="address"></td></tr>
</table>
</fieldset>
<fieldset>
<legend>Məsul şəxs</legend>
<table>
<tr>
<td width="270px" align="left">Məsul şəxs: <input placeholder="Məsul şəxs" type="text" name="contact_name"></td>
<td width="340px" align="right">Əlaqə telefonu: <input placeholder="Əlaqə telefonu" type="tel" name="contact_phone"></td>
</tr>
</table>
</fieldset>
<fieldset>
<legend>Zəmanət</legend>
<table>
<tr><td rowspan="2">
<label for="warr">Zəmanət</label><input type="radio"  name="warr" value="1">Var 
<input type="radio" name="warr" value="0">Yoxdur
</td>
<td id="warr_details1">Verilmə tarixi (<input id="todayBox" type="checkbox"> Bugün) <input type="text" placeholder="Verilmə tarixi" id="warr_start" name="warr_start"/></td>
<script type="text/javascript">
$("#tod开发者_高级运维ayBox").change(function() {
    var dateStr;
    if (this.checked) {
        var now = new Date();
        dateStr = now.getDate() + "." + (now.getMonth() + 1) + "." + now.getFullYear();
    } else {
        dateStr = "";
    }
    $("#warr_start").val(dateStr);
});
</script>
</tr>
<tr id="warr_details2">
<td>Neçə il müddətinə? <input type="number" min="0" name="warr_year"/></td>
</tr>
<script type="text/javascript"/>
$(document).ready(function(){
$("#warr_details1").hide();
$("#warr_details2").hide();

$("input[name='warr']").click(setDisplay);
$("input[type='reset']").click(function() {
    setTimeout(setDisplay, 1);  // setDisplay after the form is reset
});

function setDisplay() {
    var val = $("input[name='warr']").val();
    if (val === '1') {
        $("#warr_details1").show();
        $("#warr_details2").show();
    } else if (val === '0' || val === '') {
        $("#warr_details1").hide();
        $("#warr_details2").hide();
    }
}
});
</script>
</table>
</fieldset>
<table>
<tr>
<td colspan="2" style="text-align:center"><input type="submit" class="button red" name="submit" value="OK" />
<input type="reset" class="button white" value="Təmizlə" /></td>
</tr>
</table>

  </form>

---

Put your hiding logic into a common function that you can call from multiple places. Then, call that function from all the places that you want it to be active, including upon a click of the reset button. Now that I can see your HTML, something like this should work:

$("#warr_details1").hide();
$("#warr_details2").hide();

$("input[name='warr']").click(setDisplay);
$("input[type='reset']").click(function() {
    setTimeout(setDisplay, 1);  // setDisplay after the form is reset
});

function setDisplay() {
    var val = $("input:radio[name=warr]:checked").val();
    if (val === '1') {
        $("#warr_details1").show();
        $("#warr_details2").show();
    } else if (!val || val === '0') {
        $("#warr_details1").hide();
        $("#warr_details2").hide();
    }
}

And a demonstration: http://jsfiddle.net/jfriend00/5cFCb/.

---

try delegate()

$(document).ready(function(){
$("#warr_details1").hide();
$("#warr_details2").hide();
$("body").delegate("input[name='warr']", 'click', function(){

    if ($(this).val() === '1')
    {
        $("#warr_details1").show();
        $("#warr_details2").show();
    }
    if ($(this).val() === '0')
    {
       $("#warr_details1").hide();
        $("#warr_details2").hide();
    }
    if ($(this).val() === '')
    {
       $("#warr_details1").hide();
        $("#warr_details2").hide();
    }
});
});