Blank all fields within a table

Question

I have a so large form estimated 170 input fields, divided into sub-section by html tables. Below is my one of sub-section :-

  <table width="90%"  border=0 align="center" cellpadding="0" cellspacing="1" >
    <tr align="center"> 
      <th height="20" colspan="4"> Upgradings / Repair Work 
        <?php if($ResultRow->shipnam != '') echo(" for ".$ResultRow->shipnam);?>
      </th>
    </tr>

    <tr> 
      <td width="15%" height="20" align="right">Date est. start Upgrade : </td>
      <td height="20" width="30%">
        <input name="est_start_upgrade" type="text" id="est_start_upgrade" size="10" maxlength="11" tabindex="1" onBlur="cal_prs_date1(this)" value="<?php echo(trim($_POST['est_start_upgrade']));?>" />
        <a href="javascript:est_start_upgrade.popup();" tabindex="1" ><img src="../../common/date_component/img/cal.gif" width="16" height="16" border="0" alt="Click here to pick up the date"></a>&nbsp; 
      </td>
            <td width="15%" height="20" align="right"> Date est. end Upgrade : </td>
      <td height="20" width="30%">
        <input name="est_end_upgrade" type="text" id="est_end_upgrade" size="10" maxlength="11" tabindex="1" onBlur="cal_prs_date1(this)" value="<?php echo(trim($_POST['est_end_upgrade']));?>" /> 
        <a href="javascript:est_end_upgrade.popup();" tabindex="1" ><img src="../../common/date_component/img/cal.gif" width="16" height="16" border="0" alt="Click here to pick up the date"></a>&nbsp; 
      </td>
    </tr>

    <tr> 
      <td  height="20" align="right">Date actual start Upgrade : </td>
      <td height="20" >
        <input name="act_start_upgrade" type="text" id="act_start_upgrade" size="10" maxlength="11" tabindex="1" onBlur="cal_prs_date1(this)" value="<?php echo(trim($_POST['act_start_upgrade']));?>" />
        <a href="javascript:act_start_upgrade.popup();" tabindex="1" ><img src="../../common/date_component/img/cal.gif" width="16" height="16" border="0" alt="Click here to pick up the date"></a>&nbsp; 
      </td>
            <td height="20" align="right"> Date actual complete Upgrade : </td>
      <td height="20" >
        <input name="act_end_upgrade" type="text" id="act_end_upgrade" size="10" maxlength="11" tabindex="1" onBlur="cal_prs_date1(this)" value="<?php echo(trim($_POST['act_end_upgrade']));?>" /> 
        <a href="javascript:act_end_upgrade.popup();" tabindex="1" ><img src="../../common/date_component/img/cal.gif" width="16" height="16" border="0" alt="Click here to pick up the date"></a>&nbsp; 
      </td>
    </tr>       


    <tr> 
      <td height="20" align="right">Date est. start Repair : </td>
      <td height="20" >
        <input name="est_start_repair" type="text" id="est_start_repair" size="10" maxlength="11" tabindex="1" onBlur="cal_prs_date1(this)" value="<?php echo(trim($_POST['est_start_repair']));?>" />
        <a href="javascript:est_start_repair.popup();" tabindex="1" ><img src="../../common/date_component/img/cal.gif" width="16" height="16" border="0" alt="Click here to pick up the date"></a>&nbsp; 
      </td>
          <td height="20" align="right"> Date est. end Repair : </td>
      <td height="20" >
        <input name="est_end_repair" type="text" id="est_end_repair" size="10" maxlength="11" tabindex="1" onBlur="cal_prs_date1(this)" value="<?php echo(trim($_POST['est_end_repair']));?>" /> 
        <a href="javascript:est_end_repair.popup();" tabindex="1" ><img src="../../common/date_component/img/cal.gif" width="16" height="16" border="0" alt="Click here to pick up the date"></a>&nbsp; 
      </td>
    </tr>

    <tr> 
      <td height="20" align="right">Date actual start Repair : </td>
      <td height="20" >
        <input name="act_start_repair" type="text" id="act_start_repair" size="10" maxlength="11" tabindex="1" onBlur="cal_prs_date1(this)" value="<?php echo(trim($_POST['act_start_repair']));?>" />
        <a href="javascript:act_start_repair.popup();" tabindex="1" ><img src="../../common/date_component/img/cal.gif" width="16" height="16" border="0" alt="Click here to pick up the date"></a>&nbsp; 
      </td>
          <td height="20" align="right"> Date actual complete Repair : </td>
      <td height="20" >
        <input name="act_end_repair" type="text" id="act_end_repair" size="10" maxlength="11" tabindex="1" onBlur="cal_prs_date1(this)" value="<?php echo(trim($_POST['act_end_repair']));?>" /> 
        <a href="javascript:act_end_repair.popup();" tabindex="1" ><img src="../../common/date_component/img/cal.gif" width="16" height="16" border="0" alt="Click here to pick up the date"></a>&nbsp; 
      </td>
    </tr>    

    <tr> 
      <td height="20" align="right">Upgrading info : </td>
      <td height="20" >
        <input name="upgrading_info" type="text" id="upgrading_info" value="<?php echo(trim($_POST['upgrading_info']));?>" /> &nbsp; 
      </td>
          <td height="20" align="right">Repair info :</td>
      <td height="20" >
        <input name="repair_info" type="text" id="repair_info"   value="<?php echo(trim($_POST['repair_info']));?>" /> &nbsp; 
      </td>
    </tr>  

    <tr> 
      <td height="20" align="right"> Upgrading Builder : </td>
      <td height="20" >
              <div id="upgrading_builderdiv" style="display:inline">
                <select name="upgrading_builder" id="upgrading_builder"  >
              <option value="">Please Select</option>
              </select></div>
         &nbsp;
      </td>
          <td height="20" align="right">Upgrading shipyard :</td>
      <td height="20" >
          <div id="upgrading_yarddiv" style="display:inline">
              <select name="upgrading_yard" id="upgrading_yard" >
                <option value="">Please Select</option>
              </select>
             </div>
             &nbsp;          
      </td>
    </tr>  


    <tr> 
      <td height="20" align="right"> Repair Builder : </td>
      <td height="20" >
              <div id="repair_builderdiv" style="display:inline">
                <select name="repair_builder" id="repair_builder"  >
              <option value="">Please Select</option>
              </select></div>
         &nbsp;
      </td>
          <td height="20" align="right">Repair shipyard :</td>
      <td height="20" >
          <div id="repair_yarddiv" style="display:inline">
              <select name="repair_yard" id="repair_yard" >
                <option value="">Please Select</option>
              </select>
             </div>
             &nbsp;          
      </td>
    </tr>         
      </table>  

Now I want to do blank all fields in this sub-section after checking some validations when submit the form.

One is that I do the fields blank one by one through fields name or id, But it will not a good to do the job, I am looking for the less code that do the job.

Answer 1

If you provide your tables id. to resent your fields you can try

$('#tableID input[type=text]').val("");
$('#tableID input[type=password]').val("");
$('#tableID input[type=checkbox]').attr("checked", false);
$('#tableID input[type=radio]').attr("checked", false);

if you have select list, with first option like select with value 0. then you can do

$('#tableID select').val("0"); 

or

$('#tableID select').val(('#tableID select option:eq(0)').attr("value"));

Answer 2

$('#yourTable input[type="text"]').val("");

That is, select all text inputs within the table and set their value to an empty string. To include select elements, assuming your select elements' default value is an empty string as shown in the code in the question:

$('#yourTable').find('select,input[type="text"]').val("");

Answer 3

If you want to remove text from TD you can use jquery empty()

$('#tableID td').empty(); // will remove the text
$('#tableID td').hide(); // will hide the text

EDIT: And if you are referring to input fields -

$('#tableID input[type="text"]').val(""); //will remove values from all input fields