在表单标签（HTML、JavaScript）中插入 <noscript> 或类似内容

Question

我有以下表格：

<form id="signup" onsubmit="return false;">
  ... form content...
  <input class="button" type="submit" />
</form>

点击按钮后，会调用 JavaScript 函数 signup()。此函数使用 AJAX 调用来验证表单（与当前数据库值进行比较），然后通过 PHP 函数提交表单。

我的问题是：如果用户在浏览器中禁用了 JavaScript，我是否可以修改 <form> 标记以包含操作和方法？

因为 HTML5 允许在正文中使用 <noscript> 标签，我想我会尝试这样的事情：

<form id="signup" <noscript>action="..." method="post"</noscript>>

但这不起作用。

如果用户启用了他们的 JS，我希望 AJAX 调用来处理所有事情 - 它可以提供非常干净的用户体验。但是，我需要它对那些禁用了 JS 的人仍然有效。

提前致谢。

Answer 1

你看错了。您总是希望在表单中包含 action 和 method 属性。

<form id="signup" action="/path/to/signup" method="post">

然后将一个函数绑定到 submit 事件，并使用 .preventDefault(); 阻止表单提交（我假设这里使用 jQuery）

$('#signup').on('submit', function(e) {
    e.preventDefault();

    // submit data via ajax here
});

这好多了，因为您不必再在 javascript 中设置登录名 URL。您只需从表格中获取即可。

$.ajax({
  type: "POST",
  url: $('#signup').attr('action'),
  data: $('#signup').serialize()
})
  .done(function( msg ) {
    // logged in (or not)
  });

Answer 2

试试这个例子

<form action="calcSquare.php">
<p>
<label for=x>Number</label>:
<input id="x" name="x" type="number">
</p>
<script>
var x = document.getElementById('x');
var output = document.createElement('p');
output.textContent = 'Type a number; it will be squared right then!';
x.form.appendChild(output);
x.form.onsubmit = function () { return false; }
x.oninput = function () {
  var v = x.valueAsNumber;
  output.textContent = v + ' squared is ' + v * v;
};
</script>
<noscript>
<input type=submit value="Calculate Square">
</noscript>
</form>

在表单标签（HTML、JavaScript）中插入 <noscript> 或类似内容

Inserting <noscript> or similar within form tag (HTML, JavaScript)

html

javascript

php

forms

noscript