javascript – Blank all fields within a table

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.

Rating: 2 out of 5 based on 3 ratings

Posts Related to javascript - Blank all fields within a table

• Jul 14th, 2012 jquery - Javascript?:How to dynamically add text inputs/form fields to a HTML form? Saturday AM 06:41:50


• Jul 14th, 2012 Is there a way to add raw html as new table rows with javascript? Saturday AM 06:21:32


• Jul 25th, 2012 extjs4 - EXTJS Combox - Store does load but doesn't show Wednesday AM 10:56:08


• Jul 08th, 2012 javascript events - Display a text box when an option is selected Sunday PM 15:01:58


• Jul 23rd, 2012 How to get contents of a cell of html table using javascript? Monday AM 07:30:52


• Jul 14th, 2012 jquery - Initialize dataTable from separate .php table Saturday AM 02:20:55


• Jul 21st, 2012 javascript - Selecting elements by attributes of given value Saturday AM 11:28:28


• Jul 17th, 2012 jquery - Javascript to find a certain text Tuesday AM 04:59:55


• Jul 24th, 2012 How to change the contents of an HTML table with php + javascript Tuesday PM 13:44:42


• Jul 31st, 2012 html - jQuery with Nested Tables, select outer table tr/td with passed Selector Tuesday AM 04:06:07

The post javascript – Blank all fields within a table appeared first on Javascript ASK.

via Javascript ASK http://javascriptask.phpfogapp.com/javascript-blank-all-fields-within-a-table.html