如何在HTML中使用相同的输入值拥有一个输入字段，两个按钮和两个操作

How to have one input field , two buttons and two actions using same input value in HTML

本文关键字：输入 两个 操作 字段 按钮 有一个 HTML 拥有      更新时间：2023-09-26

>我正在尝试做一个功能，例如我有一个输入字段和两个按钮用于两个不同的操作，但获取相同的输入值。

按钮 1 

 <form id="formAddUser" name="search" method="post" action="/maps">
        <input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
        <br>
        <br>
        <button id="btnSubmit" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
    </form>

按钮 2

    <form id="formAddUser" name="search" method="post" action="/biodata">
    <button id="btnSubmit" class="btn btn-info primary" type="submit">View BioData</button>
    </form>
我

有一个文本，我取pilgrim的 ID 并提供两个按钮"view biodata"和"view location"

如何获取一个 html 元素的输入值以传递给两个 javascript 函数以对输入执行一些操作？

我通常将两个按钮放在表单上，并使用jQuery附加On Click事件以更改表单的操作。 试试这个...

<form id="formAddUser" name="search" method="post" action="/maps">
  <input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
  <br>
  <br>
  <button id="btnSubmit1" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
  <button id="btnSubmit2" class="btn btn-info primary" type="submit">View BioData</button>
</form>

然后，还添加（必须加载jQuery）...

$("#btnSubmit1").on('click', function() {
  $("#formAddUser").attr("action", "/maps");
});
$("#btnSubmit2").on('click', function() {
  $("#formAddUser").attr("action", "/biodata");
});

表单提交的默认操作仍将运行，但具有不同的操作。

首先：你有两个ID相同的按钮吗？您需要选择不同的ID，例如btnTLocation和btnBiodata。

第二：将两个按钮放在同一个表单中。对不起，如果我错了，但我知道您有两个具有相同ID的表格（再次）。所以，你只需要一种形式，有些人是这样的：

<form id="formAddUser" name="search" method="post" action="/maps">
  <input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
  <br>
  <br>
  <button id="btnLocate" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
  <button id="btnBiodata" class="btn btn-info primary" type="submit">View Biodata</button>
</form>

稍后，您需要创建一个 JavaScript 函数。你知道怎么创造吗？使用JavaScript函数，你可以通过ID调用元素。 例如，如果我想更改btnLocate的文本：

<script type="text/javascript">
  function changeText() {
    document.getElementById("btnLocate").innerHTML = New Text;
  }
</script>

在 上添加 JavaScript

现在，在按钮的单击事件上调用该函数，例如：

<button id="btnLocate" class="btn btn-info primary" type="submit" onClick="changeText()">Locate Pilgrim</button>

这是一个简单的例子，使用元素的ID，您可以更改所需的内容。如果你想在屏幕上显示一些东西，在JavaScript函数中使用alert（"文本在这里"）。

希望我能帮上忙。

再见帕施。

将所有内容放在同一个窗体中，并在一个或两个按钮上使用 formaction 属性。

如果单击表单标记上的操作属性，则表单操作将覆盖该特定按钮。

我现在在手机上，所以很难输入一个例子，但 http://www.wufoo.com/html5/attributes/13-formaction.html 有一些很好的信息。

<form method="post" action="/selector">
        <input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
        <button name="action" value="view-data" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
        <button name="action" value="locate" class="btn btn-info primary" type="submit">Locate Pilgrim</button>
</form>

在选择器中，您可以弄清楚使用action的值要做什么。

您可以将

两个按钮和文本输入组合成一个表单，并使用JavaScript（通过onclick属性）根据单击的按钮更改表单操作。

<script>
function setMapsAction(){
    formAddUser.action = "/maps";
}
function setBioAction(){
   formAddUser.action = "/biodata";
}
</script>
<form id="formAddUser" name="search" method="post" action="see-script">
        <input id="inputUserName" type="text" placeholder="Pilgrim ID here..." name="pilgrimID" autocomplete="off">
        <br>
        <br>
        <button id="btnSubmitMaps" class="btn btn-info primary" type="submit"
                onclick="javascript:setMapsAction()" 
           >Locate Pilgrim</button>
        <button id="btnSubmitBio"  class="btn btn-info primary" type="submit"
                onclick="javascript:setBioAction()"
           >View BioData</button>
    </form>
相关文章：