提交表单时 JavaScript 未在 HTML 文档中运行

发布于 2025-01-18 04:56:09 字数 2678 浏览 3 评论 0原文

我只是设置静态网站表单提交。我一直在使用此 jsfiddle 作为模板以添加提交按钮响应。诚然,我的JavaScript还不是需要的,但是我相信,当点击提交按钮时,这里的JavaScript应该提醒我提交的状态。目前,它似乎不起作用,当我在HTML文档底部包含脚本时完全阻止提交。

这是我的HTML:

<div class="container">
  <div class="columns">
    <div class="column is-half">
      <form action="https://api.staticforms.xyz/submit" method="post" id="staticform">
        <!-- Replace with your StaticForms accessKey -->
        <input type="hidden" name="accessKey" value="______">
        <input type="hidden" name="subject" value="Test from jsfiddle">
        <div class="field">
          <label class="label">Name</label>
          <div class="control">
            <input class="input" type="text" name="name" placeholder="Enter Your Name" required>
          </div>
        </div>
        <div class="field">
          <label class="label">Email</label>
          <div class="control">
            <input class="input" type="email" name="email" placeholder="Enter Your Email" required>
          </div>
        </div>
        <div class="field">
          <label class="label">Message</label>
          <div class="control">
            <textarea class="textarea" name="message" placeholder="Enter Your Message" required></textarea>
          </div>
        </div>
        <button class="button is-primary" type="Submit">Submit</button>
      </form>
    </div>
  </div>
</div>

这是我在页面底部的JavaScript:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$("#staticform").submit(function(event) {
  event.preventDefault();
  $.ajax({
    url: 'https://api.staticforms.xyz/submit', // url where to submit the request
    type: "POST", // type of action POST || GET
    dataType: 'json', // data type
    data: $("#staticform").serialize(), // post data || get data
    success: function(result) {
      // you can see the result from the console
      // tab of the developer tools
      alert(JSON.parse(result));
    },
    error: function(xhr, resp, text) {
      alert(xhr, resp, text);
    }
  })
});
</script>

我不确定这里缺少什么。它似乎在JSFIDDLE中起作用,但我什么都没有做。当我完全删除脚本时,提交会通过,但不会提示我具有状态。

我在控制台中收到以下错误:

位置1

的JSON中的意外令牌O

有意外的令牌O吗?最终,我希望在单击“提交”按钮时表现出表单状态的方法。

I'm simply setting up a static website form submission. I've been using this JSFiddle as a template to add a submission button response. Admittedly, my JavaScript isn't where it needs to be yet, but I believe that the JavaScript here is supposed to alert me about the status of the submission when the submit button is clicked. At the current moment, it doesn't seem to work, preventing submission at all when I include the script at the bottom of my HTML document.

Here's my HTML:

<div class="container">
  <div class="columns">
    <div class="column is-half">
      <form action="https://api.staticforms.xyz/submit" method="post" id="staticform">
        <!-- Replace with your StaticForms accessKey -->
        <input type="hidden" name="accessKey" value="______">
        <input type="hidden" name="subject" value="Test from jsfiddle">
        <div class="field">
          <label class="label">Name</label>
          <div class="control">
            <input class="input" type="text" name="name" placeholder="Enter Your Name" required>
          </div>
        </div>
        <div class="field">
          <label class="label">Email</label>
          <div class="control">
            <input class="input" type="email" name="email" placeholder="Enter Your Email" required>
          </div>
        </div>
        <div class="field">
          <label class="label">Message</label>
          <div class="control">
            <textarea class="textarea" name="message" placeholder="Enter Your Message" required></textarea>
          </div>
        </div>
        <button class="button is-primary" type="Submit">Submit</button>
      </form>
    </div>
  </div>
</div>

And here's my JavaScript at the bottom of the page:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$("#staticform").submit(function(event) {
  event.preventDefault();
  $.ajax({
    url: 'https://api.staticforms.xyz/submit', // url where to submit the request
    type: "POST", // type of action POST || GET
    dataType: 'json', // data type
    data: $("#staticform").serialize(), // post data || get data
    success: function(result) {
      // you can see the result from the console
      // tab of the developer tools
      alert(JSON.parse(result));
    },
    error: function(xhr, resp, text) {
      alert(xhr, resp, text);
    }
  })
});
</script>

I'm not sure what I'm missing here. It seems to work in the JSFiddle, but does nothing on my end. When I remove the script completely the submission goes through but doesn't prompt me with a status.

I get the following error in the console:

Unexpected token o in JSON at position 1

Any ideas? Ultimately, I want a way to demonstrate form status upon clicking the submit button.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文