8 - Handling form data in jQuery

yustianray · Oct 3, 2017 · 6920162 · 6920162
1 parent 13c278c
commit 6920162
Showing 1 changed file with 98 additions and 1 deletion.
diff --git a/fasttracktojquery/index.html b/fasttracktojquery/index.html
@@ -27,6 +27,69 @@
 
   </head>
   <body>
+    <div class='container'>
+      <div class='row'>
+        <div class='col mx-auto'>
+          <h3>Form</h3>
+    <form class='new-content-form' method="POST" action='/some/url/link'>
+      <textarea name='content' class='form-control'></textarea>
+      <input type='submit' value='Save' />
+    </form>
+  </div>
+</div>
+  </div>
+
+  <div class='formDataSubmitted'>
+
+
+  </div>
+
+
+
+
+
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+
+
+
+
+
     <h1 class='header'>Hello, world!</h1>
     <h1 class='header'>Hello, world!</h1>
     <h1 class='header' id='header-3'>Header 3</h1>
@@ -103,7 +166,7 @@ <h1 class='header'>Hello, world!</h1>
 
 
 
-   <script type="text/javascript">
+   <!-- <script type="text/javascript">
       $(document).ready(function(){
         var $descriptionItems = $(".description")
         // console.log($descriptionItems.length) // 0, 1, 2
@@ -145,6 +208,8 @@ <h1 class='header'>Hello, world!</h1>
       })
    </script>
 
+ -->
+
 
 
 
@@ -153,9 +218,41 @@ <h1 class='header'>Hello, world!</h1>
 
 
 
+ <script type="text/javascript">
+    $(document).ready(function(){
+      var contentForm = $(".new-content-form")
+      contentForm.submit(function(event){
+        event.preventDefault()
+        var $this = $(this)
+        //console.log(contentForm.serialize())
+        var textAreaContent = $this.find('textarea')
+        // console.log(textAreaContent.attr("name"))
+        //console.log(textAreaContent.val())
+        var formMethod = $this.attr("method") // contentForm.attr("method")
+        var formAction = $this.attr("action")
+        var data = {
+            "content": textAreaContent.val(),
+            "method": formMethod,
+            "action": formAction
+        }
+
+        $('.formDataSubmitted').text(textAreaContent.val() + " method is " + formMethod)
+
+        textAreaContent.val("")
+
+
+        // $.ajax({
+        //   url:
+        //   method:
+        //   data:
+        // })
+
+      })
 
+    })
 
 
+ </script>