3

How can I add another one empty form elements when anchor tag is click?

This is the code I have used:

 <div class="nav_left">
<form name="frm" action="#" method="post" onsubmit="return frm_onsubmit();">

<table>
    <tbody><tr>
        <td colspan="2"><h2 id="title">Add Time Group</h2></td>
    </tr>
    <tr>
        <td><input name="action" id="action" value="add" type="hidden"></td>
    </tr>
    <tr>
        <td colspan="2"><h5>Time Group<hr></h5></td>
    </tr>
    <tr>
        <td><a href="javascript:void(null)" title="This will display as the name of this Time Group." class="info" >Description</a></td>
        <td><input name="description" id="description" size="35" tabindex="1" value="" type="text"></td>
    </tr>
    <tr>
        <td colspan="2"><h5>New Time<hr></h5></td>
    </tr>
<tr><td colspan="2">
<table><tbody>
<tr><td>Time to start:</td><td>
<select name="hour_start">
<option value="" selected="">-</option>
<option value="01"> 01</option><option value="2"> 02</option><option value="3"> 03</option><option value="4"> 04</option><option value="05"> 05</option><option value="06"> 06</option><option value="07"> 07</option><option value="08"> 08</option><option value="09"> 09</option><option value="10"> 10</option><option value="11"> 11</option><option value="12"> 12</option><option value="13"> 13</option><option value="14"> 14</option><option value="15"> 15</option><option value="16"> 16</option><option value="17"> 17</option><option value="18"> 18</option><option value="19"> 19</option><option value="20"> 20</option><option value="21"> 21</option><option value="22"> 22</option><option value="23"> 23</option><option value="24"> 24</option>
</select>&nbsp:&nbsp
<select name="minute_start">
<option value="00" selected=""> 00</option>
<option value="01"> 01</option><option value="02"> 02</option><option value="03"> 03</option><option value="04"> 04</option><option value="05"> 05</option><option value="06"> 06</option><option value="07"> 07</option><option value="08"> 08</option><option value="09"> 09</option><option value="10"> 10</option><option value="11"> 11</option><option value="12"> 12</option><option value="13"> 13</option><option value="14"> 14</option><option value="15"> 15</option><option value="16"> 16</option><option value="17"> 17</option><option value="18"> 18</option><option value="19"> 19</option><option value="20"> 20</option><option value="21"> 21</option><option value="22"> 22</option><option value="23"> 23</option><option value="24"> 24</option><option value="25"> 25</option><option value="26"> 26</option><option value="27"> 27</option><option value="28"> 28</option><option value="29"> 29</option><option value="30"> 30</option><option value="31"> 31</option><option value="32"> 32</option><option value="33"> 33</option><option value="34"> 34</option><option value="35"> 35</option><option value="36"> 36</option><option value="37"> 37</option><option value="38"> 38</option><option value="39"> 39</option><option value="40"> 40</option><option value="41"> 41</option><option value="42"> 42</option><option value="43"> 43</option><option value="44"> 44</option><option value="45"> 45</option><option value="46"> 46</option><option value="47"> 47</option><option value="48"> 48</option><option value="49"> 49</option><option value="50"> 50</option><option value="51"> 51</option><option value="52"> 52</option><option value="53"> 53</option><option value="54"> 54</option><option value="55"> 55</option><option value="56"> 56</option><option value="57"> 57</option><option value="58"> 58</option><option value="59"> 59</option>
</select>
</td></tr>

<tr><td>Time to finish:</td><td>
<select name="hour_finish">
<option value="" selected="">-</option>
<option value="01"> 01</option><option value="02"> 02</option><option value="03"> 03</option><option value="04"> 04</option><option value="05"> 05</option><option value="06"> 06</option><option value="07"> 07</option><option value="08"> 08</option><option value="09"> 09</option><option value="10"> 10</option><option value="11"> 11</option><option value="12"> 12</option><option value="13"> 13</option><option value="14"> 14</option><option value="15"> 15</option><option value="16"> 16</option><option value="17"> 17</option><option value="18"> 18</option><option value="19"> 19</option><option value="20"> 20</option><option value="21"> 21</option><option value="22"> 22</option><option value="23"> 23</option><option value="24"> 24</option>
</select>&nbsp:&nbsp

<select name="minute_finish">
<option value="00" selected=""> 00</option>
<option value="01"> 01</option><option value="02"> 02</option><option value="03"> 03</option><option value="04"> 04</option><option value="05"> 05</option><option value="06"> 06</option><option value="07"> 07</option><option value="08"> 08</option><option value="09"> 09</option><option value="10"> 10</option><option value="11"> 11</option><option value="12"> 12</option><option value="13"> 13</option><option value="14"> 14</option><option value="15"> 15</option><option value="16"> 16</option><option value="17"> 17</option><option value="18"> 18</option><option value="19"> 19</option><option value="20"> 20</option><option value="21"> 21</option><option value="22"> 22</option><option value="23"> 23</option><option value="24"> 24</option><option value="25"> 25</option><option value="26"> 26</option><option value="27"> 27</option><option value="28"> 28</option><option value="29"> 29</option><option value="30"> 30</option><option value="31"> 31</option><option value="32"> 32</option><option value="33"> 33</option><option value="34"> 34</option><option value="35"> 35</option><option value="36"> 36</option><option value="37"> 37</option><option value="38"> 38</option><option value="39"> 39</option><option value="40"> 40</option><option value="41"> 41</option><option value="42"> 42</option><option value="43"> 43</option><option value="44"> 44</option><option value="45"> 45</option><option value="46"> 46</option><option value="47"> 47</option><option value="48"> 48</option><option value="49"> 49</option><option value="50"> 50</option><option value="51"> 51</option><option value="52"> 52</option><option value="53"> 53</option><option value="54"> 54</option><option value="55"> 55</option><option value="56"> 56</option><option value="57"> 57</option><option value="58"> 58</option><option value="59"> 59</option>
</select>
</td></tr>

<tr><td>Week Day Start:</td><td>
<select name="day_start">
<option value="">-</option><option value="Monday">Monday</option><option value="Tuesday">Tuesday</option><option value="Wednesday">Wednesday</option><option value="Thursday">Thursday</option><option value="Friday">Friday</option><option value="Saturday">Saturday</option><option value="Sunday">Sunday</option>
</select></td></tr>
<tr><td>Week Day finish:</td><td>
<select name="day_finish">
<option value="">-</option><option value="Monday">Monday</option><option value="Tuesday">Tuesday</option><option value="Wednesday">Wednesday</option><option value="Thursday">Thursday</option><option value="Friday">Friday</option><option value="Saturday">Saturday</option><option value="Sunday">Sunday</option>
</select></td></tr>

</tbody>
</table></td>
</tr>   <tr>
        <td colspan="2"><h6><input name="submit" tabindex="1" value="Submit" type="submit"></h6></td>
    </tr>
</tbody>
</table><!-- end of table frm_timegroups -->
</form>

</td>
</tr>
</tbody></table>
</div>
<!--NAVIGATION ON LEFT-->

<!--NAVIGATION ON RIGHT-->
<div class="rnav">
<ul>
    <li><a class="current" href="addgroup.php">Add Time Group</a></li>

    <li><a class="current_validation" href="#">LINK 1 </a> </li>
</ul>
</div>

Now I need to create another form with empty fields inside,and when I click the LINK1 it limit by one and must be the same form.

working fiddle

Rahul Gopi
  • 414
  • 1
  • 16
  • 31
Bee
  • 309
  • 3
  • 14

1 Answers1

3

For one NEVER call any form element name="submit" it will block any scripted submission.

What fields do you want to create?

Here is a generic method: I added IDs to form tbody and link:

<form id="frm" action="#" method="post">
<table>
  <tbody id="tb_timegroups">

<a id="create" class="current_validation" href="#">LINK 1 </a>

using script like

window.onload=function() { 
  document.getElementById("frm").onsubmit=frm_onsubmit;

  document.getElementById("create").onclick=function() {
    var row = document.createElement("tr"),
        cell = document.createElement("td"),
        field = document.createElement("input");
    field.name="somename";
    field.type="text";
    cell.appendChild(field);
    row.appendChild(cell);
    document.getElementById("tb_timegroups").appendChild(row);
  }  
}

I however found this one which based on your comment seems to fit the purpose:

Create clone of table row and append to table in JavaScript

Specifically for your code - please check the IDs I added to link, form and table:

FIDDLE

function frm_onsubmit() {
    if (document.getElementById("description").value == "") {
        return false; // stop submission
    }
    return true; // allow submission

}
window.onload = function () {
    document.getElementById("frm").onsubmit = frm_onsubmit;
    document.getElementById("titleLink").onclick = function () {
        document.getElementById("description").focus(); // or whatever
        return false; // instead of javascript:void
    }

    document.getElementById("clone").onclick = function () {
        var tb = document.getElementById("timeTB");
        var allTBs = tb.querySelectorAll("tbody");
        var fields = allTBs[allTBs.length-1].getElementsByTagName("select");
        var empty = false;
        for(var i=0;i<fields.length;i++) {
            if (fields[i].selectedIndex<1) {
                empty = true;
                break;
            }
        }
        if (empty) {
            alert("Some selects were left");
        }
        else {
          var tb = document.getElementById("timeTB"),
          clone = tb.querySelector("tbody").cloneNode(true); // copy children too
          tb.appendChild(clone)
        }
        return false;
    }
}
Community
  • 1
  • 1
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • thanks sir... but why the submit button is change into text field??? Is there a way to only clone only one empty field sir?? – Bee Aug 05 '15 at 14:26
  • Be more specific. You wanted the time selects - now you do not? Also the submit needs to be TYPE submit but not have NAME submit – mplungjan Aug 05 '15 at 15:10
  • The tidy function added some trailing spaces to attributes so `"submit"` became `"submit "` – mplungjan Aug 05 '15 at 15:32
  • sorry sir... my point is to clone only one empty set of fields when it click... like this... if(clone form field is empty)=>then=>do not clone; else if(clone form field is !empty)=>then=>clone another one; – Bee Aug 05 '15 at 15:33
  • PLEASE update your question with examples of before and after, perhaps a screen shot. I do not understand your use case. You say create a new form but clone one field. Please make it more clear – mplungjan Aug 05 '15 at 16:04
  • ahm.. if id="titleLink" is click...it always create copy..when it click 10 times.. it clone 10 times... i just want some validation that if you click; then it clone fields.... after the first click, then second click will have validation if the clone field is not empty... if empty-> then do not clone..... if not empty then clone another one set of fields – Bee Aug 05 '15 at 16:17
  • You mean if id="clone" is clicked. What cannot be empty? You only have selects. Is the description part of what you want to clone? – mplungjan Aug 05 '15 at 16:25
  • yes sir... exactly i want "we cannot leave empty"..... description is not part i want to clone sir – Bee Aug 05 '15 at 16:31
  • Ok. Now I should start to charge you.... This is above and beyond. See update – mplungjan Aug 05 '15 at 16:58
  • thank you sir... seriously you will charge me sir?? sir... how can I pay for you without money?? service?? – Bee Aug 06 '15 at 07:14
  • I was joking. I did not just answer your question, I wrote your code for you – mplungjan Aug 06 '15 at 07:21
  • your right sir... big thanks sir.. im thinking how to pay you... did you visit philippines ? – Bee Aug 06 '15 at 07:39
  • Not in any foreseeable future. But thanks for asking. Please accept the answer if it works for you – mplungjan Aug 06 '15 at 07:44
  • 1
    if ever you visit in philippines...I am here.... you can contact me.. I can help you regards tourist spot.. – Bee Aug 06 '15 at 07:55