1

The JS Fiddle given below is a form I have created. I need to submit it and want its output in MySQL, but when I press submit button it submits only the last form i.e. form2. I need a solution about how can I submit 3 forms by one submit button, I have some JavaScript running in the form. I've even tried this method but it wasn't appropriate for me.

I tried using the HTML5 form attribute on my input elements & I even tried changing my forms to only one form and even tried ending things with proper closing of td th and table tags within the same form but it resulted in two problems. First was when I checked on select all checkboxes it neither selected nor deselected and second was when I clicked on any checkbox under size section it didn't come up with the quantity textbox.

My forms code is given below:

//select all checkbox script
checked = false;

function checkedAll(frm1) {
  var aa = document.getElementById('frm1');
  if (checked == false) {
    checked = true
  } else {
    checked = false
  }
  for (var i = 0; i < aa.elements.length; i++) {
    aa.elements[i].checked = checked;
  }
}




//only numeric term script
function isNumberKey(evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57))
    return false;
  return true;
}

function isNumberKeyspecial(evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57))
    return false;
  return true;
}




//form reset
CZBanglesreset = function() {
  document.getElementById("form1").reset();
  document.form1.twopointtwosizeqty.disabled = true;
  document.form1.twopointfoursizeqty.disabled = true;
  document.form1.twopointsixsizeqty.disabled = true;
  document.form1.twopointeightsizeqty.disabled = true;
  document.form1.twopointtensizeqty.disabled = true;
  document.getElementById("frm1").reset();
  document.getElementById("form2").reset();
}




//oncheck quantity
function codename() {
  if (document.form1.twopointtwosize.checked) {
    document.form1.twopointtwosizeqty.disabled = false;
  } else {
    document.form1.twopointtwosizeqty.disabled = true;
  }

  if (document.form1.twopointfoursize.checked) {
    document.form1.twopointfoursizeqty.disabled = false;
  } else {
    document.form1.twopointfoursizeqty.disabled = true;
  }

  if (document.form1.twopointsixsize.checked) {
    document.form1.twopointsixsizeqty.disabled = false;
  } else {
    document.form1.twopointsixsizeqty.disabled = true;
  }

  if (document.form1.twopointeightsize.checked) {
    document.form1.twopointeightsizeqty.disabled = false;
  } else {
    document.form1.twopointeightsizeqty.disabled = true;
  }

  if (document.form1.twopointtensize.checked) {
    document.form1.twopointtensizeqty.disabled = false;
  } else {
    document.form1.twopointtensizeqty.disabled = true;
  }
}
body {
  background-image: url(../header_bg.jpg);
  background-size: cover;
}
textarea {
  resize: none;
}
input[type=checkbox] {
  cursor: pointer;
}
input[type=radio] {
  cursor: pointer;
}
b {
  cursor: default;
}
th {
  cursor: default;
}
td {
  cursor: default;
}
input[type=text] {
  cursor: cell;
}
textarea {
  cursor: cell;
}
input[type="reset"] {
  width: 10em;
  height: 2em;
  border: none;
  background: transparent;
  font-weight: bold;
  cursor: pointer;
}
input[disabled] {
  background: transparent;
  border: none;
  cursor: default;
}
input:disabled::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #fff;
}
input:disabled:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #fff;
}
input:disabled::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #fff;
}
input:disabled:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #fff;
}
<body>
  <form action="" method="POST" enctype="multipart/form-data" id="form1" name="form1">
    <table border="2" style="box-shadow: 20px 20px 10px #000000; background-color: white;" align="center">
      <tr>
        <th>
          <p align="Left">Name : <sup><font color="red">*</font></sup>
          </p>
        </th>
        <td>
          <input type="text" name="product_name" placeholder="Product Name" size="59" title="Enter the name of the product">
        </td>
      </tr>
      <tr>
        <th>
          <p align="Left">Description : <sup><font color="red">*</font></sup>
          </p>
        </th>
        <td>
          <table border="0">
            <textarea name="product_desc" placeholder="Product Description" maxlength="300" rows="6" cols="61" title="Enter the Description of the product"></textarea>
        </td>
        </table>
      </tr>
      <tr>
        <th>
          <p align="Left">Size &amp; Weight<sup><font color="red">*</font></sup>
          </p>
        </th>
        <th>
          <table border="1">
            <td title="Size 2.2">
              <label>
                <input type="checkbox" name="twopointtwosize" value="2.2size" title="Size 2.2" onClick="codename()">2.2
                <br>
                <input name="twopointtwosizeqty" type="text" disabled onKeyPress="return isNumberKey(event)" size="2" placeholder="QTY" maxlength="5">
              </label>
            </td>
            <td title="Size 2.4">
              <label>
                <input type="checkbox" name="twopointfoursize" value="2.4size" title="Size 2.4" onClick="codename()">2.4
                <br>
                <input type="text" size="2" name="twopointfoursizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" maxlength="5" disabled>
              </label>
            </td>
            <td title="Size 2.6">
              <label>
                <input type="checkbox" name="twopointsixsize" value="2.6size" title="Size 2.6" onClick="codename()">2.6
                <br>
                <input type="text" size="2" name="twopointsixsizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
              </label>
            </td>
            <td title="Size 2.8">
              <label>
                <input type="checkbox" name="twopointeightsize" value="2.8size" title="Size 2.8" onClick="codename()">2.8
                <br>
                <input type="text" size="2" name="twopointeightsizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
              </label>
            </td>
            <td title="Size 2.10">
              <label>
                <input type="checkbox" name="twopointtensize" value="2.10size" title="Size 2.10" onClick="codename()">2.10
                <br>
                <input type="text" size="3" name="twopointtensizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
              </label>
            </td>
            <td style="border-style: none;">
              <input type="text" placeholder="Weight" name="weight" size="8" maxlength="8" title="Enter the weight in Grams" onKeyPress="return isNumberKey(event)" style="height: 45px;">
            </td>
        </th>
        </table>
      </tr>
      <tr>
        <th>
          <p align="Left">Color : <sup><font color="red">*</font></sup>
          </p>
        </th>
        <td>
  </form>
  <form id="frm1">
    <table>
      <td title="White Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
        <label>
          <input type="checkbox" name="White" title="White Colour" value="white"><b title="White Colour">White</b>
        </label>
      </td>
      <td title="White/Red Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
        <label>
          <input type="checkbox" name="White/Red" title="White/Red Colour" value="w/r"><b title="White/Red Colour">W/R</b>
        </label>
      </td>
      <td title="White/Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
        <label>
          <input type="checkbox" name="White/Green" title="White/Green Colour" value="w/g"><b title="White/Green Colour">W/G</b>
        </label>
      </td>
      <td title="White/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
        <label>
          <input type="checkbox" name="White/Blue" title="White/Blue Colour" value="w/b"><b title="White/Blue Colour">W/B</b>
        </label>
      </td>
      </tr>
      <tr>
        <td title="Red Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
          <label>
            <input type="checkbox" name="Red" title="Red Colour" value="red"><b title="Red Colour">Red</b>
          </label>
        </td>
        <td title="Red/Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
          <label>
            <input type="checkbox" name="Red/Green" title="Red/Green Colour" value="r/g"><b title="Red/Green Colour">R/G</b>
          </label>
        </td>
        <td title="Red/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
          <label>
            <input type="checkbox" name="Red/Blue" title="Red/Blue Colour" value="r/b"><b title="Red/Blue Colour">R/B</b>
          </label>
        </td>
      </tr>
      <tr>
        <td title="Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
          <label>
            <input type="checkbox" name="Green" title="Green Colour" value="green"><b title="Green Colour">Green</b>
          </label>
        </td>
        <td title="Green/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
          <label>
            <input type="checkbox" name="Green/Blue" title="Green/Blue Colour" value="g/b"><b title="Green/Blue Colour">G/B</b>
          </label>
        </td>
        <tr>
          <td title="Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
            <label>
              <input type="checkbox" name="Blue" title="Blue Colour" value="blue"><b title="Blue Colour">Blue</b>
            </label>
          </td>
          <tr>
            <td title="Multi Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
              <label>
                <input type="checkbox" name="multicolor" title="Multi Colour" value="multicolor"><b title="Multi Colour">MultiColour</b>
              </label>
            </td>
  </form>
  <td title="Select All" align="right" style="border-style: none;">
    <input type="checkbox" name="checkall" title="Select All" onclick='checkedAll(frm1);'>
  </td>
  <td style="border-style: none;"><b title="Select All">All</b>
    <form action="" method="POST" enctype="multipart/form-data" id="form2">
  </td>
  </table>
  </td>
  </tr>
  </td>
  </tr>
  <tr>
    <th>
      <p align="Left">Price : <sup><font color="red">*</font></sup>
      </p>
    </th>
    <td>
      <table border="1">
        <td>
          <input type="text" name="product_price" placeholder="Original" size="21" title="Enter The Original Price Of The Product" onkeypress="return isNumberKey(event)">
          <td>
            <input type="text" name="product_special_price" placeholder="Special" size="21" title="Enter The Special Price Of The Product (not necessary)" onkeypress="return isNumberKeyspecial(event)">
          </td>
        </td>
  </tr>
  </table>
  <tr>
    <th title="Special Price Validity Dates;(note it is valid only if entered special price)">
      <p align="Left">Special Date : <sup><font color="red">*</font></sup>
      </p>
    </th>
    <td title="Special Price Validity Dates;(note it is valid only if entered special price)">
      <table border="0">
        <tr>
          <th title="Special Price Validity Starting Date">Start Date:</th>
          <td>
            <input type="date" name="startingdate" min="2015-02-01">
            <br>
          </td>
        </tr>
        <tr>
          <th title="Special Price Validity Ending Date">End Date:</th>
          <td>
            <input type="date" name="endingdate" min="2015-02-01">
            <br>
          </td>
        </tr>
        <tr>
          <th>
            <font color="white" size="0">Hello</font>
          </th>
        </tr>
        <tr>
          <th>
            <font color="white" size="0">Hello</font>
          </th>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <th title="Status(Should the Product be visible to the customers)">
      <p align="Left">Status : <sup><font color="red">*</font></sup>
      </p>
    </th>
    <th>
      <label>Enable :
        <input type="radio" name="status" value="enable" title="Enable The Status">
      </label>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <label>Disable :
        <input type="radio" name="status" value="disable" title="Disable The Status">
      </label>
    </th>
  </tr>
  <tr>
    <th title="Tax Class(which type of tax should be applied on the product)">
      <p align="Left">Tax Class : <sup><font color="red">*</font></sup>
      </p>
    </th>
    <th>
      <label>Taxable :
        <input type="radio" name="tax" value="taxable" title="Taxable Goods">
      </label>
      &nbsp;&nbsp;&nbsp;
      <label>Shipping :
        <input type="radio" name="tax" value="shipping" title="Shipping">
      </label>
      &nbsp;&nbsp;&nbsp
      <label>None :
        <input type="radio" name="tax" value="None" title="None from both on the left">
      </label>
    </th>
  </tr>
  <tr>
    <th>
      <input type="reset" name="reset" value="Reset" onclick="CZBanglesreset();" title="Reset All The Details">
    </th>
    <th>
      <input type="submit" name="submit" value="Add Product" title="Add Product To The Inventory" style=" width: 33em;height: 2em;
        border:none;
        background: transparent;
        font-weight:bold;
        cursor:pointer;">
    </th>
  </tr>
  </table>
  </form>
</body>

JS FIDDLE

Community
  • 1
  • 1
Hardik Sisodia
  • 615
  • 3
  • 14
  • 37
  • Why did you need more than one form? Can you change the page to use only one form and process the post data based on the checkboxes values? – Ricardo Souza Apr 29 '15 at 12:06
  • @rcdmk Actually No I tried changing it to only one form but it resulted me two problems. First was when I ticked on select all checkboxes it neither selected nor deselected and second was when I clicked on any checkbox under size section it didn't come up with the quantity textbox. – Hardik Sisodia Apr 29 '15 at 12:48

2 Answers2

2

First of all, you have overlapping tags: your form1 ends inside a td, which is not possible. If you look at the DOM structure, frm1 is fully nested inside form1. That is not the real problem, though.

When you try to submit 3 forms at the same time, the first two submissions are aborted and only the third one goes through. The only way to do it is asynchronously, using AJAX calls.

riv
  • 6,846
  • 2
  • 34
  • 63
  • Is it impossible without Ajax and if not how can I input Ajax for this problem?? I even tried changing my forms to only one form and even tried ending things with proper closing of td th and table tags within the same form but it resulted me two problems. First was when I ticked on select all checkboxes it neither selected nor deselected and second was when I clicked on any checkbox under size section it didn't come up with the quantity textbox. – Hardik Sisodia Apr 30 '15 at 18:06
1

Disregarding your markup issues, if you don't need to perform three form submissions (I don't know why you would), you could use the HTML5 form attribute on your input elements. So, you could have one "master" form, and tie in your input elements. Once that's done, just perform a single form submission.

//only numeric term script
function isNumberKey(evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57)) return false;
  return true;
}

function isNumberKeyspecial(evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode
  if (charCode > 31 && (charCode < 48 || charCode > 57)) return false;
  return true;
}

/**
 * Check all color checkboxes.
 * @param {Object} ele the "Check All" checkbox
 */

function checkedAll(ele) {
  "use strict";
  var arrayOfElements = ele.closest("#colors").getElementsByTagName("input"),
    item,
    i = 0;

  for (i; i < arrayOfElements.length; i = i + 1) {
    item = arrayOfElements[i];
    if (ele !== item && document.contains(item) === true) {
      arrayOfElements[i].checked = ele.checked;
    }
  }
}

/**
 * Reset the form back to its origional state.
 */

function resetForm() {
  "use strict";
  var arrayOfElements = document.getElementsByTagName("input"),
    item,
    i = 0;

  for (i; i < arrayOfElements.length; i = i + 1) {
    item = arrayOfElements[i].name;
    if (item.match(/qty/gi) !== null) {
      arrayOfElements[i].disabled = true;
    } else {
      arrayOfElements[i].checked = false;
    }
  }

  document.getElementById("MasterForm").reset();
}

/**
 * Toggle the display and state of the input box with the checkbox.name + "qty".
 * @param {Object} ele The clicked checkbox.
 */

function codename(ele) {
  "use strict";
  document.getElementsByName(ele.name + "qty")[0].disabled = !ele.checked;
}
 body {
   background-image: url(../header_bg.jpg);
   background-size: cover;
 }
 textarea {
   resize: none;
 }
 input[type=checkbox] {
   cursor: pointer;
 }
 input[type=radio] {
   cursor: pointer;
 }
 b {
   cursor: default;
 }
 th {
   cursor: default;
 }
 td {
   cursor: default;
 }
 input[type=text] {
   cursor: cell;
 }
 textarea {
   cursor: cell;
 }
 input[type="reset"] {
   width: 10em;
   height: 2em;
   border: none;
   background: transparent;
   font-weight: bold;
   cursor: pointer;
 }
 input[disabled] {
   background: transparent;
   border: none;
   cursor: default;
 }
 input:disabled::-webkit-input-placeholder {
   /* WebKit browsers */
   color: #fff;
 }
 input:disabled:-moz-placeholder {
   /* Mozilla Firefox 4 to 18 */
   color: #fff;
 }
 input:disabled::-moz-placeholder {
   /* Mozilla Firefox 19+ */
   color: #fff;
 }
 input:disabled:-ms-input-placeholder {
   /* Internet Explorer 10+ */
   color: #fff;
 }
<body>
  <form id="MasterForm">

    <table border="2" style="box-shadow: 20px 20px 10px #000000; background-color: white;" align="center">
      <tr>
        <th>
          <p align="Left">Name : <sup><font color="red">*</font></sup>
          </p>
        </th>
        <td>
          <input type="text" name="product_name" placeholder="Product Name" size="59" title="Enter the name of the product">
        </td>
      </tr>
      <tr>
        <th>
          <p align="Left">Description : <sup><font color="red">*</font></sup>
          </p>
        </th>
        <td>
          <table border="0">
            <textarea name="product_desc" placeholder="Product Description" maxlength="300" rows="6" cols="61" title="Enter the Description of the product"></textarea>
          </table>
        </td>
      </tr>
      <tr>
        <th>
          <p align="Left">Size &amp; Weight<sup><font color="red">*</font></sup>
          </p>
        </th>
        <th>
          <table border="1">
            <td title="Size 2.2">
              <label>
                <input type="checkbox" name="twopointtwosize" value="2.2size" title="Size 2.2" onClick="codename(this)">2.2
                <br>
                <input name="twopointtwosizeqty" type="text" disabled onKeyPress="return isNumberKey(event)" size="2" placeholder="QTY" maxlength="5">
              </label>
            </td>
            <td title="Size 2.4">
              <label>
                <input type="checkbox" name="twopointfoursize" value="2.4size" title="Size 2.4" onClick="codename(this)">2.4
                <br>
                <input type="text" size="2" name="twopointfoursizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" maxlength="5" disabled>
              </label>
            </td>
            <td title="Size 2.6">
              <label>
                <input type="checkbox" name="twopointsixsize" value="2.6size" title="Size 2.6" onClick="codename(this)">2.6
                <br>
                <input type="text" size="2" name="twopointsixsizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
              </label>
            </td>
            <td title="Size 2.8">
              <label>
                <input type="checkbox" name="twopointeightsize" value="2.8size" title="Size 2.8" onClick="codename(this)">2.8
                <br>
                <input type="text" size="2" name="twopointeightsizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
              </label>
            </td>
            <td title="Size 2.10">
              <label>
                <input type="checkbox" name="twopointtensize" value="2.10size" title="Size 2.10" onClick="codename(this)">2.10
                <br>
                <input type="text" size="3" name="twopointtensizeqty" placeholder="QTY" onKeyPress="return isNumberKey(event)" disabled maxlength="5">
              </label>
            </td>
            <td style="border-style: none;">
              <input type="text" placeholder="Weight" name="weight" size="8" maxlength="8" title="Enter the weight in Grams" onKeyPress="return isNumberKey(event)" style="height: 45px;">
            </td>
          </table>
        </th>
      </tr>
      <tr>
        <th>
          <p align="Left">Color : <sup><font color="red">*</font></sup>
          </p>
        </th>
        <td id="colors">
          <table>
            <td title="White Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
              <label>
                <input type="checkbox" name="White" title="White Colour" value="white"><b title="White Colour">White</b>
              </label>
            </td>
            <td title="White/Red Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
              <label>
                <input type="checkbox" name="White/Red" title="White/Red Colour" value="w/r"><b title="White/Red Colour">W/R</b>
              </label>
            </td>
            <td title="White/Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
              <label>
                <input type="checkbox" name="White/Green" title="White/Green Colour" value="w/g"><b title="White/Green Colour">W/G</b>
              </label>
            </td>
            <td title="White/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
              <label>
                <input type="checkbox" name="White/Blue" title="White/Blue Colour" value="w/b"><b title="White/Blue Colour">W/B</b>
              </label>
            </td>
          </table>
          <table>
            <td title="Red Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
              <label>
                <input type="checkbox" name="Red" title="Red Colour" value="red"><b title="Red Colour">Red</b>
              </label>
            </td>
            <td title="Red/Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
              <label>
                <input type="checkbox" name="Red/Green" title="Red/Green Colour" value="r/g"><b title="Red/Green Colour">R/G</b>
              </label>
            </td>
            <td title="Red/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
              <label>
                <input type="checkbox" name="Red/Blue" title="Red/Blue Colour" value="r/b"><b title="Red/Blue Colour">R/B</b>
              </label>
            </td>
          </table>
          <table>
            <tr>
              <td title="Green Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
                <label>
                  <input type="checkbox" name="Green" title="Green Colour" value="green"><b title="Green Colour">Green</b>
                </label>
              </td>
            </tr>
            <tr>
              <td title="Green/Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
                <label>
                  <input type="checkbox" name="Green/Blue" title="Green/Blue Colour" value="g/b"><b title="Green/Blue Colour">G/B</b>
                </label>
              </td>
            </tr>
            <tr>
              <td title="Blue Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
                <label>
                  <input type="checkbox" name="Blue" title="Blue Colour" value="blue"><b title="Blue Colour">Blue</b>
                </label>
              </td>
              <td title="Multi Colour" style="border-style: groove; box-shadow: 5px 5px 2px #3B3131;">
                <label>
                  <input type="checkbox" name="multicolor" title="Multi Colour" value="multicolor"><b title="Multi Colour">MultiColour</b>
                </label>
              </td>

              <td title="Select All" align="right" style="border-style: none;">
                <input type="checkbox" name="checkall" title="Select All" onclick='checkedAll(this);'>
              </td>
              <td style="border-style: none;"><b title="Select All">All</b>

              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <th>
          <p align="Left">Price : <sup><font color="red">*</font></sup>
          </p>
        </th>
        <td>
          <table border="1">
            <tr>
              <td>
                <input type="text" name="product_price" placeholder="Original" size="21" title="Enter The Original Price Of The Product" onkeypress="return isNumberKey(event)">

              </td>
              <td>
                <input type="text" name="product_special_price" placeholder="Special" size="21" title="Enter The Special Price Of The Product (not necessary)" onkeypress="return isNumberKeyspecial(event)">
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <th title="Special Price Validity Dates;(note it is valid only if entered special price)">
          <p align="Left">Special Date : <sup><font color="red">*</font></sup>
          </p>
        </th>
        <td title="Special Price Validity Dates;(note it is valid only if entered special price)">
          <table border="0">
            <tr>
              <th title="Special Price Validity Starting Date">Start Date:</th>
              <td>
                <input type="date" name="startingdate" min="2015-02-01">
                <br>
              </td>
            </tr>
            <tr>
              <th title="Special Price Validity Ending Date">End Date:</th>
              <td>
                <input type="date" name="endingdate" min="2015-02-01">
                <br>
              </td>
            </tr>
            <tr>
              <th> <font color="white" size="0">Hello</font>

              </th>
            </tr>
            <tr>
              <th> <font color="white" size="0">Hello</font>

              </th>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <th title="Status(Should the Product be visible to the customers)">
          <p align="Left">Status : <sup><font color="red">*</font></sup>
          </p>
        </th>
        <th>
          <label>Enable :
            <input type="radio" name="status" value="enable" title="Enable The Status">
          </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <label>Disable :
            <input type="radio" name="status" value="disable" title="Disable The Status">
          </label>
        </th>
      </tr>
      <tr>
        <th title="Tax Class(which type of tax should be applied on the product)">
          <p align="Left">Tax Class : <sup><font color="red">*</font></sup>
          </p>
        </th>
        <th>
          <label>Taxable :
            <input type="radio" name="tax" value="taxable" title="Taxable Goods">
          </label>&nbsp;&nbsp;&nbsp;
          <label>Shipping :
            <input type="radio" name="tax" value="shipping" title="Shipping">
          </label>&nbsp;&nbsp;&nbsp
          <label>None :
            <input type="radio" name="tax" value="None" title="None from both on the left">
          </label>
        </th>
      </tr>
      <tr>
        <th>
          <input type="reset" name="reset" value="Reset" onclick="resetForm()" title="Reset All The Details">
        </th>
        <th>
          <input type="submit" name="submit" value="Add Product" title="Add Product To The Inventory" style=" width: 33em;height: 2em;
                                border:none;
                                background: transparent;
                                font-weight:bold;
                                cursor:pointer;">
        </th>
      </tr>
    </table>
  </form>
</body>
kneeki
  • 2,444
  • 4
  • 17
  • 27
  • yes that helped me but had the same problem again when i click on 2.2 or any size checkbox it does not come up with the quantity textbox, same thing goes wrong in select all color it does not select or deselect all checkboxes in the color section.. How can I solve that?? – Hardik Sisodia May 01 '15 at 09:00
  • I've updated my example above with a working example of your code to fix your JavaScript issues. Note: Take a look at my HTML and JavaScript, I changed some stuff around for you. Let me know if you're still stuck. – kneeki May 01 '15 at 16:46
  • this is perfect and exactly what I was looking ahead for have one more query which I will be uploading soon here by tomorrow. Please do check it out if you can help me out with that too.Thank You. – Hardik Sisodia May 02 '15 at 10:08
  • Sure. Respond in a comment here when you post it. I'm not sure how to message someone directly on stackoverflow. – kneeki May 02 '15 at 21:53
  • I've posted [my new query](http://stackoverflow.com/questions/30168839/multiple-image-uploader-with-preview) please do have a look at it – Hardik Sisodia May 11 '15 at 13:23