javascript - Three forms submitting all together by one submit button -
the js fiddle given below form have created. need submit , want output in mysql, when press submit button submits last form i.e. form2. need solution how can submit 3 forms 1 submit button, have javascript running in form. i've tried method wasn't appropriate me.
i tried using html5 form attribute on input elements & tried changing forms 1 form , tried ending things proper closing of td th , table tags within same form resulted in 2 problems. first when checked on select checkboxes neither selected nor deselected , second when clicked on checkbox under size section didn't come quantity textbox.
my forms code given below:
//select checkbox script checked = false; function checkedall(frm1) { var aa = document.getelementbyid('frm1'); if (checked == false) { checked = true } else { checked = false } (var = 0; < 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 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 name of 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 description of product"></textarea> </td> </table> </tr> <tr> <th> <p align="left">size & 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 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 original price of product" onkeypress="return isnumberkey(event)"> <td> <input type="text" name="product_special_price" placeholder="special" size="21" title="enter special price of product (not necessary)" onkeypress="return isnumberkeyspecial(event)"> </td> </td> </tr> </table> <tr> <th title="special price validity dates;(note valid if entered special price)"> <p align="left">special date : <sup><font color="red">*</font></sup> </p> </th> <td title="special price validity dates;(note valid 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 product visible 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 status"> </label> <label>disable : <input type="radio" name="status" value="disable" title="disable status"> </label> </th> </tr> <tr> <th title="tax class(which type of tax should applied on 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> <label>shipping : <input type="radio" name="tax" value="shipping" title="shipping"> </label>   <label>none : <input type="radio" name="tax" value="none" title="none both on left"> </label> </th> </tr> <tr> <th> <input type="reset" name="reset" value="reset" onclick="czbanglesreset();" title="reset details"> </th> <th> <input type="submit" name="submit" value="add product" title="add product inventory" style=" width: 33em;height: 2em; border:none; background: transparent; font-weight:bold; cursor:pointer;"> </th> </tr> </table> </form> </body>
disregarding markup issues, if don't need perform 3 form submissions (i don't know why would), use html5 form attribute on input elements. so, have 1 "master" form, , tie in input elements. once that's done, perform 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 color checkboxes. * @param {object} ele "check all" checkbox */ function checkedall(ele) { "use strict"; var arrayofelements = ele.closest("#colors").getelementsbytagname("input"), item, = 0; (i; < arrayofelements.length; = + 1) { item = arrayofelements[i]; if (ele !== item && document.contains(item) === true) { arrayofelements[i].checked = ele.checked; } } } /** * reset form origional state. */ function resetform() { "use strict"; var arrayofelements = document.getelementsbytagname("input"), item, = 0; (i; < arrayofelements.length; = + 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 display , state of input box checkbox.name + "qty". * @param {object} ele 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 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 name of 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 description of product"></textarea> </table> </td> </tr> <tr> <th> <p align="left">size & 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 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 original price of product" onkeypress="return isnumberkey(event)"> </td> <td> <input type="text" name="product_special_price" placeholder="special" size="21" title="enter special price of product (not necessary)" onkeypress="return isnumberkeyspecial(event)"> </td> </tr> </table> </td> </tr> <tr> <th title="special price validity dates;(note valid if entered special price)"> <p align="left">special date : <sup><font color="red">*</font></sup> </p> </th> <td title="special price validity dates;(note valid 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 product visible 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 status"> </label> <label>disable : <input type="radio" name="status" value="disable" title="disable status"> </label> </th> </tr> <tr> <th title="tax class(which type of tax should applied on 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> <label>shipping : <input type="radio" name="tax" value="shipping" title="shipping"> </label>   <label>none : <input type="radio" name="tax" value="none" title="none both on left"> </label> </th> </tr> <tr> <th> <input type="reset" name="reset" value="reset" onclick="resetform()" title="reset details"> </th> <th> <input type="submit" name="submit" value="add product" title="add product inventory" style=" width: 33em;height: 2em; border:none; background: transparent; font-weight:bold; cursor:pointer;"> </th> </tr> </table> </form> </body>
Comments
Post a Comment