title: Way to submit a "hidden" form through link and button clicks with Vue.js 3?
body: <p>I am still pretty new to Vue.js 3 and am wondering if there is a way to do what I'm attempting utilizing Vue.js (but I am open to plain JavaScript if not).</p>
  <p>I am wishing to submit a form containing hidden fields on a page when any of the link/button items are clicked: the  tag containing &quot;Click here&quot;, the placeholder image, and the actual button itself.</p>
  <p>The fields I'm wishing to submit are contained in the &quot;VISIT specific hidden inputs here&quot; comment.
  Additionally, I am wanting an outside link to open when any of those three are clicked. So on submit it will submit the hidden form AND open the link.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" class="h-100"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta
        name="viewport"
        content="width=device-width, initial-scale=1, shrink-to-fit=no"
      /&gt;
      &lt;meta name="description" content="" /&gt;
      &lt;meta name="author" content="" /&gt;
  
      &lt;!-- Bootstrap core CSS --&gt;
      &lt;link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
        crossorigin="anonymous"
      /&gt;
  
      &lt;style&gt;&lt;/style&gt;
  
      &lt;script src="https://cdn.jsdelivr.net/npm/vue@3.0.11"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/vee-validate@next"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body class="d-flex flex-column h-100" id="awApp"&gt;
      &lt;header&gt;
        &lt;!-- FIXED NAVBAR AND/OR HEADER --&gt;
        &lt;nav class="navbar"&gt;
          &lt;div class="container"&gt;
            &lt;a class="navbar-brand"&gt;
              &lt;img :src="imgSrc" alt="logo" width="200" /&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      &lt;/header&gt;
      &lt;!-- / HEADER/NAVBAR --&gt;
  
      &lt;!-- TOP CONTENT --&gt;
      &lt;main role="main" class="flex-shrink-0 aw-index"&gt;
        &lt;div class="container pt-0"&gt;
          &lt;div class="row gx-5"&gt;
            &lt;div class="col-md-7 text-light my-auto"&gt;&lt;/div&gt;
            &lt;div class="col-md-5"&gt;
              &lt;div class="card shadow aw-index p-3"&gt;
                &lt;div class="card-body"&gt;
                  &lt;h4 class="card-title aw-orange aw-font-droid"&gt;
                    Download Your Book
                  &lt;/h4&gt;
                  &lt;form&gt;
                    &lt;!-- VISIT specific hidden inputs here --&gt;
                    &lt;input type="hidden" name="z_submit_date" v-model="now" /&gt;
                    &lt;input type="hidden" name="z_utm_source" value="Source" /&gt;
                    &lt;input type="hidden" name="z_utm_medium" value="Medium" /&gt;
                    &lt;input type="hidden" name="z_utm_campaign" value="Campaign" /&gt;
                    &lt;input type="hidden" name="z_utm_content" value="Content" /&gt;
                    &lt;!-- /VISIT specific hidden inputs here --&gt;
                    &lt;h5 class="card-text aw-orange aw-font-freight-light"&gt;
                      &lt;a class="aw-orange" href="" target="_blank"&gt;Click here&lt;/a&gt;
                      to download it now.
                    &lt;/h5&gt;
                    &lt;div class="row text-center"&gt;
                      &lt;a href="" target="_blank"&gt;
                        &lt;img
                          class="img-fluid"
                          src="https://via.placeholder.com/150x200"
                        /&gt;
                      &lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class="row text-center mt-4"&gt;
                      &lt;button
                        type="submit"
                        class="
                          btn
                          aw-bg-orange
                          text-dark
                          aw-font-freight-semibold-regular aw-background-orange
                        "
                        value="Submit"
                      &gt;
                        &lt;strong&gt;Download&lt;/strong&gt;
                      &lt;/button&gt;
                    &lt;/div&gt;
                  &lt;/form&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/main&gt;
      &lt;!-- /TOP CONTENT --&gt;
  
      &lt;!-- FOOTER --&gt;
      &lt;footer class="footer mt-auto py-3 bg-secondary"&gt;&lt;/footer&gt;
      &lt;!-- /FOOTER --&gt;
    &lt;/body&gt;
  
    &lt;!-- BOOTSTRAP JS --&gt;
    &lt;script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
      crossorigin="anonymous"
    &gt;&lt;/script&gt;
    &lt;!-- /BOOTSTRAP JS --&gt;
  
    &lt;!-- VUE APP CODE --&gt;
    &lt;script&gt;
      const app = Vue.createApp({
        data() {
          return {
            currentYear: new Date().getFullYear(),
            now: new Date().toISOString(),
          };
        },
        methods: {
          submitForm(e) {},
        },
      });
  
      app.mount("#awApp");
    &lt;/script&gt;
    &lt;!-- /VUE APP CODE--&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>