post content of new recipe on good submit

package.json

@@ -21,6 +21,7 @@
     "dynamic-scrollspy": "^0.2.0",
     "ejs": "^3.1.8",
     "express": "^4.17.1",
+    "express-formidable": "^1.2.0",
     "markdown-it": "^13.0.1",
     "markdown-it-hashtag": "^0.4.0",
     "mkdirp": "^1.0.4",

server.js

@@ -1,7 +1,10 @@
 const PORT = 8090;
 var express = require('express');
+const formidable = require('express-formidable');
 var app = express();
 
+app.use(formidable());
+
 console.log('Starting express server on port ' + PORT);
 
 // set the view engine to ejs
@@ -40,4 +43,9 @@ app.get(/\/.*/, function (req, res) {
     res.render(pathname, { "page": page });
 });
 
+app.post("/new_recipe", function (req, res) {
+    console.log(JSON.stringify(req.fields));
+    res.send('mission success');
+});
+
 app.listen(PORT);

views/pages/new_recipe.ejs

@@ -11,14 +11,14 @@
 	</header>
 
     <div class="container mt-5 topMargin">
-        <form class="row needs-validation" novalidate>
+        <form id="new_recipe_form" class="row needs-validation" method="post" novalidate>
             <div class="col">
                 <h1 class="display-1">New Recipe</h1>
             </div>
             <div class="mb-3">
                 <label for="recipe_name_input" class="form-label">Recipe Name</label>
                 <div class="input-group has-validation">
-                    <input type="text" class="form-control" id="recipe_name_input" placeholder="Banana Bread" required>
+                    <input type="text" class="form-control" name="recipe_name_input" placeholder="Banana Bread" required>
                     <div class="invalid-feedback">
                         Recipe name required
                     </div>
@@ -26,14 +26,14 @@
             </div>
             <div class="mb-3">
                 <label for="tag_input" class="form-label">Tags (comma-seperated)</label>
-                <input type="text" class="form-control" id="tag_input" pattern="(\w+,?)+" placeholder="bread,dessert" required>
+                <input type="text" class="form-control" name="tag_input" pattern="(\w+,?)+" placeholder="bread,dessert" required>
                 <div class="invalid-feedback">
                     Tags required as comma-separated list. Letters only.
                 </div>
             </div>
             <div class="mb-3">
                 <label for="ingredient_input" class="form-label">Ingredients (pipe-separated) <b>Measure | Unit | Weight | Ingredient</b></label>
-                <textarea class="form-control" id="ingredient_input" rows="8" placeholder="1/2 | c | 150g | Sugar
+                <textarea class="form-control" name="ingredient_input" rows="8" placeholder="1/2 | c | 150g | Sugar
 1 | tsp | 7g | Cinnamon" required></textarea>
                 <div class="invalid-feedback">
                     Ingredients required
@@ -41,7 +41,7 @@
             </div>
             <div class="mb-3">
                 <label for="instruction_input" class="form-label">Instructions</label>
-                <textarea class="form-control" id="instruction_input" rows="8" placeholder="1. Preheat oven..
+                <textarea class="form-control" name="instruction_input" rows="8" placeholder="1. Preheat oven..
 2. Mix stuff..." required></textarea>
                 <div class="invalid-feedback">
                     Instructions required
@@ -63,12 +63,16 @@
             var forms = document.querySelectorAll('.needs-validation')
 
             // Loop over them and prevent submission
-            Array.prototype.slice.call(forms)
+            Array.prototype.slice.call(forms).forEach(function (form) {
-            .forEach(function (form) {
                 form.addEventListener('submit', function (event) {
+                    event.preventDefault();
                     if (!form.checkValidity()) {
-                    event.preventDefault()
+                        event.stopPropagation();
-                    event.stopPropagation()
+                    }
+                    else {
+                        $.post("/new_recipe", $("#new_recipe_form").serialize(), function(jsonData){
+                            console.log(jsonData);
+                        }, "json");
                     }
 
                     form.classList.add('was-validated')

views/partials/include.ejs

@@ -6,4 +6,4 @@
 <link rel="stylesheet" type="text/css" href="/css/site.css">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
 <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.16.2/build/styles/default.min.css">
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

views/partials/post_html_include.ejs

@@ -1,4 +1,3 @@
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 <script type="text/javascript" src="/script/app.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>