jQuery has a function .serialize(), encode a set of form elements as a string for submission.

The .serialize() method creates a text string in standard URL-encoded notation. It can act on a jQuery object that has selected individual form controls, such as , </code>, and <code><select></code>: <code>$( "input, textarea, select" ).serialize();</code></p> <div class="wp-block-syntaxhighlighter-code "><pre class="brush: jscript; title: ; notranslate" title=""> $( "form" ).on( "submit", function( event ) { event.preventDefault(); console.log( $( this ).serialize() ); }); </pre></div> <p>For official documentation <a href="https://api.jquery.com/serialize/" target="_blank" rel="noopener">click here</a></p> </div> </div> <!--Comments--> <section class="col-span-8 col-start-5 mt-10 space-y-6"> <p class="font-semibold"> <a href="/register" class="hover:underline">Register</a> Or <a class="hover:underline" href="/login">Login</a> to leave a comment. </p> </section> </article> </main> <!--alpine component example--> <footer id="newsletter" class="bg-gray-100 border border-black border-opacity-5 rounded-xl text-center py-16 px-10 mt-16"> <img src="/images/lary-newsletter-icon.svg" alt="" class="mx-auto -mb-6" style="width: 145px;"> <h5 class="text-3xl">Stay in touch with the latest posts</h5> <p class="text-sm mt-3">Promise to keep the inbox clean. No bugs.</p> <div class="mt-10"> <div class="relative inline-block mx-auto lg:bg-gray-200 rounded-full"> <form method="POST" action="/newsletter" class="lg:flex text-sm"> <input type="hidden" name="_token" value="ZwBYGZuEW7a2Lz9FwcpArfK9sbSweQVYh0Bsw7bs"> <div class="lg:py-3 lg:px-5 flex items-center"> <label for="email" class="hidden lg:inline-block"> <img src="/images/mailbox-icon.svg" alt="mailbox letter"> </label> <input id="email" name="email" type="text" placeholder="Your email address" class="lg:bg-transparent py-2 lg:py-0 pl-4 focus-within:outline-none"> </div> <button type="submit" class="transition-colors duration-300 bg-blue-500 hover:bg-blue-600 mt-4 lg:mt-0 lg:ml-3 rounded-full text-xs font-semibold text-white uppercase py-3 px-8"> Subscribe </button> </form> </div> <div> </div> </div> </footer> </section> </body>