Question

我正在尝试执行一个函数，例如我有一个输入字段和两个按钮用于两个不同的操作但是获取相同的输入值。

按钮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函数以对输入执行某些操作？

Answer 1

我通常会在表单上放置两个按钮，并使用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");
});

表单提交的默认操作仍然会以不同的操作运行。

Answer 2

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

第二：将两个按钮放在同一个表格中。对不起，如果我错了，但我知道你有两个具有相同ID的表格（再次）。所以，你只需要一个表格，想象一下：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

在

上添加JavaScript

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

＆＃13;

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

＆＃13;

这是一个简单的例子，使用ID元素，你可以改变你想要的。如果你想在屏幕上显示某些内容，请在JavaScript函数中使用alert（＆＃34; Text here＆＃34;）。

希望我能提供帮助。

再见 PASCH。

Answer 3

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

如果单击该特定按钮，

formaction将覆盖表单标记上的action属性。

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

Answer 4

<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的值来确定要执行的操作。

Answer 5

您可以将两个按钮和一个文本输入组合成单个表单，并使用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>

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

5 个答案: