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

Question

I am trying to do a function like I have one input field and two buttons for two different actions but fetch the same input value.

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

Button 2

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

I have one text where I take the ID of pilgrim and provide two buttons 'view biodata' and 'view location'

How can I get the input value of one html element to pass to two javascript functions to perform some actions with the inputs?

bob-fornal · Accepted Answer · 2014-12-03 04:13:41Z

2

I've typically put both buttons on the form and used jQuery to attach On Click events to change the action of the form. Try this ...

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

Then, also add (jQuery must be loaded) ...

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

The default action of the form submit will still operate, with different actions.

answered Dec 3, 2014 at 4:13

bob-fornal

5,1205 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paschoali · Accepted Answer · 2014-12-03 04:20:19Z

First: do you have two buttons with same ID? You need to choose different IDs, like btnLocate and btnBiodata.

Second: put the two buttons inside the same form. Sorry if I wrong, but I understand that you have two forms with same ID (again). So, you need just one form, somethink like this:

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

Later, you need to create a JavaScript function. You know how to create? With JavaScript function you can call elements by ID. Example, if I want to change the text of btnLocate:

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

To add JavaScript on

Now, call the function on the click event of the button, for example:

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

This is simple example, with ID of element, you can change what you want. If you want to display something on screen, use alert("Text here") inside JavaScript function.

Hope I can help.

Bye, Pasch.

Nathan Friedly · Accepted Answer · 2014-12-03 04:17:04Z

0

Put everything in the same form and use the formaction attribute on one or both of the buttons.

formaction overrides the action attribute on the form tag if that particular button is clicked.

I'm on my phone right now, so it's hard to type up an example, but http://www.wufoo.com/html5/attributes/13-formaction.html has some good information.

edited Dec 3, 2014 at 4:17

answered Dec 3, 2014 at 4:09

Nathan Friedly

8,1563 gold badges44 silver badges67 bronze badges

1 Comment

mo0206 Over a year ago

Hi Nathan , I am sorry but Can you please edit it for me :-|

Ahmed Masud · Accepted Answer · 2014-12-03 04:22:43Z

0

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

In selector you can figure out what to do using value of the action.

answered Dec 3, 2014 at 4:22

Ahmed Masud

22.7k3 gold badges37 silver badges60 bronze badges

Comments

regmagik · Accepted Answer · 2014-12-03 04:27:20Z

You could combine both buttons and a text input into single form and use JavaScript (via onclick attribute) to change form action based on the button clicked.

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

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related