Nós vimos o básico do uso de JQuery, pelo menos o que precisamos para o e-commerce que estamos fazendo, uma coisa que ainda não vimos foi como lidar com Forms.

Através do Form podemos enviar informações para o backend, e como o JQuery é a linguagem front-end que vamos usar, precisamos entender, pelo menos um pouco, como ele funciona.

Como sempre, o que estamos colocando de novo no código está em azul.

As divs container, row e col, são classes padrão do bootstrap para poder ter como selecionar e dá a formatação.

Dentro temos o Form propriamente dito.

Temos um nome de classe para seleção e formatação dele.

Poderíamos ter utilizado id ao invés de class se quiséssemos.

O método é POST, porque em um formulário pegamos as informações nos campos dele, para enviar para o backend, ou seja, vamos postar informações no servidor.

O action é a url que iremos postar.

Dentro do Form temos o textarea e o input, que é o botão que quando clicado, submeterá as informações contidas no form, para o endpoint da url do action.

django_ecommerce/e_commerce/jquery/index.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
    <style>
        h1{
            color: green;
        }
        #header-3 {
            
        }
        .description {
            height: 300px;
            width: 250px;
            padding: 30px 10px;
        }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col mx-auto">
          <h1>Form</h1>
          <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>
    <br />
    <br />
    <div class="form-data-submit">
    </div>
    <br />
    <br />
    <h1 class='header'>Olá mundo!</h1>
    <h1 class='header'>Olá mundo!</h1>   
    <h1 class='header' id='header-3'>Cabeçalho 3</h1>
    <h1 class='header'>Olá mundo!</h1>
    <p class="description">Primeiro parágrafo</p>
    <p class="description"><a href='#'>Link Qualquer</a></p> 
    <! --- <p class="description"><a href='/abc/'>Link Qualquer</a></p> --->
    <p class="description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis dolor non arcu fringilla tempus. Nam sollicitudin justo eu risus vestibulum finibus. Aliquam aliquet volutpat mi, vitae tempor tellus placerat sit amet. Praesent faucibus diam vitae arcu posuere, non dapibus ipsum lobortis. Nunc accumsan neque quis lacus molestie vehicula. Aenean imperdiet, urna eget ultrices sodales, mi urna hendrerit quam, vel imperdiet erat risus ac odio. Nullam congue quis arcu nec ullamcorper. Cras hendrerit justo sed enim accumsan, a mattis leo tincidunt. Etiam vel velit purus. In dapibus at augue tempor rutrum. Morbi suscipit metus et euismod rutrum. Sed at mollis metus. Phasellus est metus, fermentum eu elementum vitae, posuere in tellus.
      Vestibulum vulputate in tellus eget mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras mollis purus quis ipsum rhoncus, at cursus nisi interdum. Aliquam erat volutpat. Duis urna justo, hendrerit vel tempor id, fringilla venenatis lorem. Aenean ac velit mauris. Mauris viverra ex quis lacus pellentesque mattis. Integer sit amet consectetur nunc. Sed a pellentesque orci, ac gravida nisl. Duis nec sapien malesuada, volutpat dolor id, blandit dui. Ut id hendrerit metus. Proin quis mollis mauris. Integer nec lorem enim. Aliquam non finibus mauris. Ut euismod scelerisque nunc feugiat rhoncus. Aliquam erat volutpat.
      Proin a mi viverra, elementum risus a, luctus mauris. Vestibulum sit amet mauris eros. In id ante eget erat eleifend suscipit. Nullam a urna tempor augue eleifend fermentum quis ut lacus. Maecenas at lorem sit amet turpis sollicitudin ultricies in quis nisl. Sed aliquet congue luctus. Praesent aliquet eget diam quis posuere.
      Vivamus aliquam sagittis nisi, rutrum posuere metus ultrices et. Maecenas fermentum felis vel iaculis rutrum. Donec ut bibendum risus. Nam dignissim est id mauris efficitur, tempus porta lorem accumsan. Vestibulum malesuada mollis auctor. Cras ac lobortis purus. Suspendisse eu nisi nunc. Suspendisse quis mauris nunc.
      Mauris sit amet purus egestas, sagittis lacus ac, lobortis libero. Proin molestie sapien non sapien vehicula tristique. Praesent eget scelerisque leo, ac pellentesque sapien. Sed tincidunt cursus orci. Cras efficitur enim at interdum vehicula. Quisque ut quam et velit porttitor efficitur. Nulla et ultrices lectus. Nulla risus felis, pharetra sit amet sapien nec, sollicitudin pellentesque odio. Aliquam eu urna efficitur, faucibus turpis ac, vehicula est. Suspendisse magna eros, efficitur sit amet mollis in, venenatis ut arcu. Sed maximus, ex at vehicula dapibus, ligula sapien varius diam, id elementum ipsum arcu in orci. Nam justo lorem, malesuada non mi quis, elementum maximus sem. Phasellus eget tellus quis elit gravida eleifend vitae a velit. Proin ut auctor nulla, at congue ipsum. Curabitur et gravida enim. Etiam commodo, purus ac porta eleifend, elit velit hendrerit odio, sit amet semper dui mi nec nulla.
      Pellentesque mollis dui vel tortor lacinia, eu ultrices erat luctus. Aenean sit amet tellus dignissim nulla auctor posuere. Nunc varius ipsum sit amet arcu semper, at consequat libero faucibus. Nunc eget egestas tortor, ac fermentum justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed quis elit turpis. Aliquam at maximus sem. In ac volutpat nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus urna nec molestie faucibus. Quisque varius cursus sem eu auctor. Vivamus porttitor rutrum nisl, at malesuada sem scelerisque et.
      In scelerisque vestibulum sapien, at condimentum nunc tempor consectetur. In ullamcorper vitae enim ac commodo. Donec quis bibendum magna. Aliquam placerat nibh in vulputate facilisis. Nulla facilisi. Aliquam vehicula orci enim, laoreet dignissim nulla convallis nec. In hac habitasse platea dictumst.
      Aliquam erat volutpat. Nunc luctus vehicula elit, id tincidunt mi bibendum id. Nunc a mi commodo, ultrices sapien varius, ullamcorper ipsum. Aenean tincidunt risus turpis, nec aliquam augue vulputate vel. Maecenas consequat massa ac ipsum convallis placerat. Mauris malesuada euismod felis. Morbi volutpat velit egestas, facilisis libero non, volutpat lectus. Donec id enim nisi. Suspendisse hendrerit commodo enim, nec pulvinar nisi gravida placerat. Morbi consequat massa id justo fringilla elementum.
      Aliquam maximus nibh pharetra blandit porta. Sed sit amet metus sodales, lobortis diam sed, eleifend nunc. Vivamus ut magna eu nulla elementum elementum at non nisi. Nunc eleifend placerat massa sed tempor. Nulla sit amet lacinia enim. Etiam quis purus lectus. Pellentesque eros dolor, suscipit ac nisi porttitor, tempor dignissim ex. Morbi eget ipsum risus.
      Curabitur luctus felis a mollis maximus. Phasellus porta dignissim nunc ut commodo. Cras convallis luctus porttitor. Aenean sit amet ante tortor. Nam non elit lobortis, maximus sem id, faucibus elit. Sed pharetra quam nec dolor molestie, at sodales felis cursus. Donec faucibus lorem quis fringilla accumsan.
      Cras id vestibulum urna, ac hendrerit est. Integer non mauris id tellus vehicula convallis eget et risus. Etiam quis iaculis turpis. Suspendisse dui turpis, convallis at ultricies et, tincidunt eu nunc. Etiam suscipit rutrum mi sed vulputate. Vestibulum enim turpis, mollis sed tempus vitae, ornare id urna. Fusce a massa eget leo interdum gravida ut tempus purus. Nam molestie cursus erat, at tincidunt diam auctor a. Fusce imperdiet, elit sed sollicitudin feugiat, tortor nisl hendrerit dui, a tempor felis orci a mauris.
      Vestibulum eget sem ut est consequat euismod luctus nec augue. Sed est orci, dapibus eget varius sed, mattis eget justo. Phasellus placerat leo fermentum urna aliquet auctor. Phasellus nisl nulla, laoreet quis mi sed, blandit mattis quam. Mauris maximus ante in fermentum laoreet. Pellentesque sollicitudin rhoncus arcu, in finibus orci tempus quis. Ut ultrices bibendum pellentesque. Duis luctus leo nec felis venenatis, eu hendrerit ipsum consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce nisl orci, lobortis nec sapien eu, euismod suscipit metus. Suspendisse et velit urna. Curabitur ac nibh sodales, accumsan libero in, ultricies ligula.
      Mauris blandit ipsum at magna molestie luctus. Praesent accumsan semper lectus, elementum consectetur libero fermentum vitae. Suspendisse congue nisl vel dolor dapibus, sit amet interdum mi ornare. Nam leo erat, scelerisque non nisi ut, vulputate finibus quam. Fusce pharetra nibh id laoreet aliquet. Suspendisse faucibus, ligula ut scelerisque suscipit, nulla nunc condimentum metus, venenatis scelerisque tortor lorem nec sapien. Ut turpis neque, iaculis vitae velit non, ultricies consequat metus. Donec laoreet et nunc vel varius. Ut sed metus lobortis nisl pulvinar molestie non et diam. Donec aliquam nisl id porttitor venenatis.
      Nam varius felis mi, a lobortis nisi rutrum ac. Aenean sit amet dictum felis, quis posuere justo. Quisque varius, sapien eget blandit ultricies, magna mi vulputate arcu, ut cursus metus orci eu risus. Curabitur efficitur pellentesque dolor eget lacinia. Nam et risus non sapien vehicula pharetra quis vitae arcu. Duis eu nunc mattis, vehicula metus vel, feugiat ante. Aenean pulvinar, nisl sit amet dapibus hendrerit, sapien urna volutpat est, a convallis ex risus vel elit. Proin auctor efficitur risus in eleifend. Proin in nulla ut nunc elementum commodo eu nec quam. Sed porttitor tortor sed convallis ullamcorper.
      Morbi faucibus magna diam, quis sagittis quam pretium in. Praesent imperdiet pretium sapien et pulvinar. Quisque diam turpis, luctus quis augue id, facilisis ultrices tellus. In congue ultrices ligula, vel faucibus sapien. In hac habitasse platea dictumst. Nunc sed congue ex. Integer mauris risus, blandit pharetra ex a, sagittis vulputate massa. Sed tristique porttitor lacus id malesuada. Integer id tempor lectus, at euismod diam. Vestibulum pretium non elit sit amet ornare. Etiam ultricies metus massa, vel laoreet nisi tincidunt ut. In facilisis lorem id facilisis bibendum. Morbi risus nulla, condimentum non nisi non, iaculis ullamcorper felis. Quisque vel urna finibus, tincidunt lorem vel, lobortis justo. Nullam mollis eu arcu vel luctus.
      Nulla non cursus mi. Donec gravida est a vehicula eleifend. Ut tristique, lorem vel ullamcorper porta, urna elit porttitor tellus, eget finibus arcu nisl in felis. Suspendisse laoreet, orci sagittis molestie tempor, purus mauris malesuada nunc, non tincidunt erat neque aliquet tortor. Vestibulum eu lectus varius, hendrerit sem ut, vehicula lacus. Maecenas venenatis, sem nec aliquet tincidunt, lectus dui facilisis velit, ut laoreet nibh nisi id libero. Ut volutpat, nibh vel venenatis rhoncus, tellus eros bibendum enim, id accumsan arcu dui non lacus. Nunc eget dolor vitae lacus suscipit feugiat. Proin finibus odio non aliquam accumsan. Nunc varius et leo rutrum fermentum. Quisque quis mi fringilla erat consectetur blandit in id arcu. Phasellus auctor ante sit amet efficitur tempor. Praesent porta felis justo. Donec a molestie tellus, ut placerat enim. Donec maximus orci quis mauris fringilla rutrum. Phasellus cursus, mauris sit amet aliquam bibendum, ipsum metus venenatis justo, id pretium ex lectus sed tortor.
      Quisque maximus nibh non ex maximus volutpat. Etiam quis euismod nulla. Aliquam nisl odio, tincidunt sed sagittis vitae, pretium quis odio. Etiam luctus blandit orci, ut accumsan tellus tincidunt non. Quisque iaculis erat eget augue pharetra aliquam. In velit libero, ultrices nec gravida et, sollicitudin at urna. Cras eget eros sit amet metus consectetur finibus. Suspendisse at rhoncus quam. Fusce mattis eleifend mauris quis porttitor. Suspendisse potenti. Duis sit amet ligula purus.
      Quisque eu sem et tortor sollicitudin eleifend eu quis nibh. Donec rhoncus sem leo, sed pharetra orci pulvinar non. Sed sit amet rutrum lectus, auctor consectetur augue. Etiam dignissim tincidunt felis, et efficitur nisi congue lacinia. Fusce vitae sem a augue tincidunt dictum eget vitae ipsum. Vivamus mollis rhoncus vulputate. Phasellus quis erat pharetra, pulvinar magna id, egestas risus. Donec sed est velit. Nulla iaculis urna enim. Nulla enim enim, finibus ut vulputate ac, fringilla sit amet turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec pharetra suscipit sem at tincidunt. Fusce ut nulla ac arcu convallis feugiat. Cras tincidunt nunc nunc, in aliquet purus molestie sit amet. Praesent luctus pulvinar orci at rhoncus.
      Aenean elementum odio eu luctus suscipit. Sed ac lacus aliquet, cursus diam id, facilisis tellus. Curabitur sed gravida nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quam tortor, viverra nec metus sit amet, fermentum luctus nisl. Pellentesque pulvinar elit vitae dolor mollis, tincidunt porttitor nisl sagittis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam lobortis, nunc ut pretium consequat, lacus leo mattis purus, sed molestie neque quam et sapien. Maecenas suscipit, nisi ac aliquam faucibus, eros turpis finibus dui, eu pretium nulla ligula at elit. Nam dapibus sem sed tempor facilisis. Nam pharetra laoreet purus, ut facilisis nunc.
      Phasellus nisi velit, semper dignissim tempus at, vehicula sed augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec arcu sem, ultricies vitae metus sed, ultrices condimentum arcu. Nulla facilisi. Aenean elementum tortor purus, sed ornare libero faucibus ac. Fusce commodo consectetur lacus, porta pharetra mauris vestibulum sed. Aliquam iaculis hendrerit cursus.
    </p>
    <!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        const contentForm = $(".new-content-form")
        contentForm.submit(function(event){
          event.preventDefault()
          const $this = $(this)
          // Versão serializada
          console.log("Serialize: ", contentForm.serialize())
          // O conteúdo em si do textArea
          const textAreaContent = $(this).find("textArea")
          // Pega o nome do atributo textArea
          console.log("ATTR: ", textAreaContent.attr("name"))
          // Pega o valor do atributo textArea
          console.log("VAL: ", textAreaContent.val())
          // Pega o valor do atributo method e atribui a formMethod 
          const formMethod = $(this).attr("method")
          // Pega o valor do atributo action e atribui a formAction
          const formAction= $(this).attr("action")
          const data = {
            "content": textAreaContent.val(),
            "method": formMethod,
            "action": formAction
          }
          //$(".form-data-submit").text(textAreaContent.val())
            $(".form-data-submit").text(textAreaContent.val() + " método: " + formMethod)
            // String vazia para limpar o campo após o submit
            textAreaContent.val("")
            // Como os dados são passados para o back 
            //$.ajax({
              //url:
              //method:
              //data: data
            //})
        })
      })
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>  
  </body>
</html>