javascript 如何在页面上动态更改表单操作主机?

woobm2wo  于 2023-04-28  发布在  Java
关注(0)|答案(1)|浏览(68)

如果输入字段“account”超过10个字符,我需要访问另一个服务器,我如何用JavaScript动态地将表单操作目标更改为server2?

<form method="get" action="server1/login.php"
    class="get-started-form flex items-center flex-wrap">
  <input name="account" type="text"
ovfsdjhp

ovfsdjhp1#

您可以监听输入框上的keyup event,以检测文本值何时更改,然后使用value property读取值。之后,比较长度,并根据需要动态修改form元素的action property

const getStartedForm = document.querySelector('.get-started-form');
const accountInput = document.querySelector('input[name="account"]');
accountInput.addEventListener('keyup', () => {
  if (accountInput.value.length > 10) {
    getStartedForm.action = 'server2/login.php';
  } else {
    getStartedForm.action = 'server1/login.php';
  }
});
<form
  method="get"
  action="server1/login.php"
  class="get-started-form flex items-center flex-wrap"
>
  <input name="account" type="text" />
</form>

相关问题