基于文本字段中首字母的条件 HTML 表单答案

【问题标题】：Conditional HTML form based on the beginning letter in a Text Field基于文本字段中首字母的条件 HTML 表单
【发布时间】：2021-09-28 08:40:30
【问题描述】：

我正在制作一个 HTML 表单，用户在其中提交用户 ID，并且根据该 ID 的第一个字母，它将重定向到网站的特定页面。

该网站是一个 WordPress 网站，每次我测试它时，它都不会转到我的占位符链接（Youtube 和 Reddit），而是根据输入的 ID 转到一个空白的 WP 页面。

例如。提交“A123”会指向 website.com/?participantID=A123 而不是 Reddit（占位符网站）。

这可能是 WP 问题，但感觉好像我没有正确地将输入转换为字符串。老实说，我对我写的任何 JS 都没有信心。感谢任何帮助。谢谢！

<form onsubmit="pageRedirect()">
  
<input type="text" id="participantID" name="participantID">
<input type="submit">
</form>

<script>
  let inputValue = document.getElementById("participantID");

pageRedirect() {

if ("inputValue".startsWith("A")) {
action="https://reddit.com";
}
else {
    action="https://youtube.com";
  }
}
  </script>

【问题讨论】：

为什么"inputValue".startsWith("A") 中的"inputValue" 周围有引号？ - 它是一个变量...
好的，有道理！老实说，我不确定为什么我将 inputValue 放在引号中。这是漫长的一天，哈哈

标签： javascript html string if-statement conditional-statements

【解决方案1】：

您似乎将 URL 分配给操作变量，但除此之外什么也没做。因此，表单会默认执行 POST 到当前页面的操作。您对输入值的访问也不正确。

您似乎也缺少 pageRedirect() 函数的 function 关键字？

您可以通过返回 false 来取消此默认行为，然后做任何您想做的事情：

function pageRedirect() {
    const inputValue = document.getElementById('participantID').value;
    if (inputValue.startsWith('A')) {
        document.location.href = "https://reddit.com";
    } else {
        document.location.href = "https://youtube.com";
    }
    // Returning false in `onsubmit` cancels the form
    return false;
}

当然，这是对这些站点的简单（HTTP GET）“重定向”。如果您想实际发布数据，那就另当别论了。

【讨论】：

谢谢！它似乎忽略了 return false，但我会再玩一些 tmrw。我现在下班了！
啊，我好像忘了说你的onsubmit 应该看起来像onsubmit="return pageRedirect()"。浏览器中 JS 的怪癖之一。

【解决方案2】：

虽然我还没有测试过，但这应该可以工作。

如果你需要，我可以修改我的答案

<form id="redirectForm">
  <input type="text" id="participantID" name="participantID" />
  <input type="submit" />
</form>

<script>  
 document.getElementById("redirectForm").addEventListener("submit",function (event) {
event.preventDefault()
        let inputValue = document.getElementById("participantID").value;
    
        if (inputValue.startsWith("A")) {
          window.location = "https://reddit.com";
        } else {
          window.location = "https://youtube.com";
        }
        return false;
      })
    </script>

【讨论】：

谢谢！我玩过你和 Kelvin 的修改，但它似乎忽略了 return false。但是，我已经完成了这一天，所以我会玩更多 tmrw。

【解决方案3】：

刚才又看了一遍这个问题，我相信我现在理解了这个要求，并且可以为您指明正确的方向。唉，snippet 这里实际上不会运行redirect，但以下似乎可以满足您的需要。

<html>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <script>
        
            const buildurl=function( endpoint, params ){
                let url=new URL( endpoint );
                url.search = new URLSearchParams( params ).toString();
                return url;
            };

            const pageRedirect=function(e){
                // prevent the form doing what it should
                e.preventDefault();
                // find reference to the form from the event target
                let form=e.target;
                // find the input element
                let input=form.querySelector('input[ name="participantID" ]');
                // prepare the payload to send to 3rd party site
                let args={};
                    args[ input.name ]=input.value;
                    
                // determine which site to redirect to
                let endpoint=input.value.startsWith('A') ? 'https://reddit.com' : 'https://youtube.com';

                // construct the target url and set form attributes
                form.action=buildurl( endpoint, args );
                form.target='_blank';
                
                // submit the form
                return form.submit();
            };
        </script>
    </head>
    <body>
        <form onsubmit='return pageRedirect(event)'>
          <input type='text' name='participantID' />
          <input type='submit' />
        </form>
    </body>
</html>

【讨论】：