Question

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">
$("#todayBox").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>

Answer 1

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/.