I am trying to create an HTML form that lets the user input tasks. I am trying to create a button that would submit the form once the user inputted the tasks. But for some reason, the form is not able to submit. I have tried many debugging processes such as echoing and error logging. Down below I have my HTML form and PHP.
<?php
if(isset($_POST['submit'])) {
echo "yes it workds";
}
?>
<title>My Daily Tasks</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<h1 align="center"><u><b>Today's Tasks</b></u></h1>
<hr>
<div>
<form action="test.php" method="post">
<h2 align="center">Task</h2>
<center>
<input type="text" class="form-control" placeholder="Task" name="taskname[]">
</center>
<br>
<br>
<h3 align="center">What time do you want me to remind you about this task?</h3>
<center>
<select class="form-control" name="remind_endtime_hour[]">
<option value="00">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>
</select>
<select class="form-control" name="remind_endtime_minute[]">
<option value="00">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>
<select class="form-control" name="remind_endtime_AM_PM[]">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
<br>
<br>
<hr>
</center>
<br>
</form>
</div>
<center>
<button class ="btn btn-success" id="addMore">+ Another Task</button>
<br>
<br>
</center>
<input class="btn btn-primary" type="submit" name="submit" value="Submit" style="width: auto; height: auto; font-size: 25px; text-align: center;" required>
</body>
<script>
var contents = `<center><div><button class="remove" type="button">- Task</button>
${jQuery("form").html()}
</div></center>`;
jQuery("#addMore").click(function(){
jQuery('form').append(contents);
});
jQuery('form').on('click', '.remove',function(e){
e.preventDefault();
$(this).parent().remove();
});
</script>
