提交表单时 JavaScript 未在 HTML 文档中运行
我只是设置静态网站表单提交。我一直在使用此 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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论