html 如果值未填写，表单输入法将阻止 url 中的名称

Question

假设这是我在 reactjs/jsx 中的 html:

<form action="/search-list" method="GET">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>

当我在没有输入任何内容的情况下单击 submit 按钮时，它使 url 像这样 fname=&lname=

当我只填写fname并提交时，url变成这样fname=JhonDoe&lname=

请注意，我没有填写 lname，但 lname 在 url 中，我不需要。

我想，如果一个字段有 value，那个字段应该在 url 作为查询参数，如果没有字段，那个字段不应该在 url 查询参数。

可以吗？我该怎么做？所有字段都应该是可选的。

Answer 1

您可以使用此纯文本 JavaScript 从提交中删除空输入。

<form method="GET" id="myForm">
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname"><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname"><br><br>
    <input type="submit" value="Submit">
</form>

<script>
    Form = document.getElementById("myForm");
    Form.addEventListener('submit',()=>{
    if(Form.fname.value == ""){
    Form.fname.name ="";
    }

    if(Form.lname.value == ""){
    Form.lname.name ="";
    }


    Form.submit();
    });

</script>

html 如果值未填写，表单输入法将阻止 url 中的名称

html form input method get prevent name in url if value is not filled

html

forms

form-helpers

reactjs