html表单输入法获取防止url中的名称（如果值未填写）

发布于 2025-01-10 10:43:48 字数 804 浏览 1 评论 0原文

假设这是我在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并提交时，网址变成这样fname=JhonDoe&lname=

注意这里，我没有填写lname，但 lname 位于我不想要的 url 中。

我希望，如果某个字段具有 value，则该字段应作为查询参数位于 url 中，如果没有字段，则该字段不应位于 url 中> 查询参数。

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

原文

Let's say this is my html in reactjs/jsx:

<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>

and when i click on the submit buttoin without inputing anything, it make the url like this fname=&lname=

and when i fill anly fname and submit, the url become like this fname=JhonDoe&lname=

Notice here, i didn't fill the lname, yet the lname is here in url which i dont want.

I want, if a field has value, that field should be in url as query params, if not field, that field should not be in url query params.

is it possible to do? how can I do it? All the fields should be optional.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

新人笑 2025-01-17 10:43:48

您可以使用此纯 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>

You can use this plain JavaScript to remove the empty inputs from submitting.

<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>

回复收藏 0 原文

~没有更多了~