Dynamic HTML element -how to submit form to php

Question

I have written some code to create a dymanic HTML form element for my application,I want on submit that form will post data and php will write to database.

here is the code

 $("#add_id").click(function(name){
                name=prompt("Task name");
                if (name) {
                   $('.dashboard').append('<div class="each_task" id="task'+ count+'"><label>'+name+
          '</label><form class="task_form" action="process_task.php" method="post"><div class="ctrl_btn" id="start'+
          count+'"><input type="hidden" name="task_name" value="'+name+'" /><input name="task_start" type="hidden" id="start_time'+
          count+'" value="" /><input class="task_start" type="submit" id="'+count+'" value="Start" /></form></div><form class="task_form" action="process_task.php" method="post"><div class="ctrl_btn" id="end'+count
          +'"><input type="hidden" name="task_name" value="'+name+'" /><input name="task_end" type="hidden" id="end_time'+count+'" value="" /><input class="task_end" type="submit" id="'+count+'" value="End" /></form></div></div>').css('color', 'red');

Now when I submit the form it sends name and start_time or end_time value to php script which will insert data to database. the problem is dynamically created HTML element doesn't stick around.

Can anyone suggest how could I get around this problem and can have my dynamically created html stick to the page and also on submit post data to database.

Thanks

Answer 1

I'm happy to improve my answer if I didn't get your question accurately, but I'm assuming you want to stop the page from getting refreshed when you press the form submit button.

Here's a solution to prevent the page refresh using Javascript.

It is important to note that if you use this solution, you have to handle the form submission using Javascript and AJAX. An example of how to do this.