How to create child form using jquery

Question

I am working with javascript/jquery and right now I have button "Add task",whenever i click on that button then "multiple form" creating with "add subtask" button but i want to add one more thing:

Whenever i click on any "Add subtask", then another form should appear in front of "Main form (parent form)"

Here is my current code:

var count = 0;
$('.buttonClass').click(function() {
  count += 1;

  $("<form name='myform''/>").appendTo('body');
  $("<input placeholder='this is a main task'/>").appendTo('body');
  $("<input type='submit' name='' value='Add subtask'/>").appendTo('body');
  $("<br>").appendTo('body');
  $("</form/>").appendTo('body');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<button class="buttonClass">Add Task</button>

Perhaps jQuery's [before](http://api.jquery.com/before/) method would be helpful? — mykaf, Mar 01 '23 at 17:35
@mykaf can you please explain or update my answer so i can check — Alyssa, Mar 01 '23 at 17:38
Did you look at the linked documentation? That should explain. You want to create another form in front of ("before") "Main" form. Are you confused by something in the documentation? — mykaf, Mar 01 '23 at 17:45
@freedomn-m okay forget the "form", But how can i add "subtask" ( further fields) in front of main button(add task) ? — Alyssa, Mar 01 '23 at 17:47
@freedomn-m my task is simple, let me explain , i have a button "add task" so whenever we click on "add task" then "textbox with "subtask" " button showing ( can be multiple) so i want if i click on any "subtask" button then further new "texbox" and "submit" button should display in front of parent category/button — Alyssa, Mar 01 '23 at 17:50
@freedomn-m your code in jsfiddele not working properly , i mean whenever i click an "addsubtask" then all forms are not showing ( hide on click) but i want whenever i click on "addsubtask" then new textbox with submit button should display in front of that button(parent) — Alyssa, Mar 01 '23 at 18:00
As mentioned previously, you'll need *event delegation* for the newly added button. See https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — freedomn-m, Mar 01 '23 at 18:24
Please [edit] your question with all your requirements. As it is right now, it's very confusing with "add another form" but no reference to that form. Your comment above *seems to* contradict the question. — freedomn-m, Mar 01 '23 at 18:25

Moritz Ringler · Answer 1 · 2023-03-01T18:47:36.043

I think you want something like this, i.e. a second handler for "Add subtask", that inserts the input before the current block:

var count = 0;
$('.addTask').click(function() {
  count += 1;
   $('#taskForms').append($(`
      <li>
        <form>
          <ol class="subtasks"></ol>
          <div>
            <input placeholder='this is a main task'/>
            <button class="addSubtask" type='button'>Add subtask</button>
          </div>
        </form>
      </li>
   `))
});

const subtaskHTML =`
      <li>
        <input placeholder='this is a subtask task'/>
        <button class="prependSubtask" type='button'>Add subtask</button>
      </li>
   `

$('#taskForms').on('click', '.addSubtask', function(){
  $(this).closest('form').find('ol').append($(subtaskHTML))
});


$('#taskForms').on('click', '.prependSubtask', function(){
  $(this).parent().before($(subtaskHTML))
});

ol {
  counter-reset: item;
  list-style: none;
  padding: 0;
}
li {
  display: flex;
}
li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
  display: flex;
  align-items: end;
  padding-right: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<ol id="taskForms">
  <button type="button" class="addTask">Add Task</button>
</ol>

@Mortiz Ringler : your code is working but there is only thing is missing , as i mentioned , with "subtask textbox" i want another "add subtask" button which works same , and can you write number in front of main task and subtask ? for example "task 1" and subtask "1.1" or "1.2" and so on.. — Alyssa, Mar 01 '23 at 18:22
gee, I forgot what a massacre jQuery is... Check the updated answer — Moritz Ringler, Mar 01 '23 at 18:48

How to create child form using jquery

1 Answers1