Question 35641 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

return The Id of selected button – Jquery

Hi there I have the following card that has 3 selectable buttons button.

<ul class="nav nav-tabs border-0" role="tablist" id="FlightType" onclick="SelectedFlightType()">
                                    <li class="nav-item">
                                        <button class="nav-link active" id="oneway-tab" data-bs-toggle="tab"
                                            data-bs-target="#oneway" type="button" role="tab" aria-controls="oneway"
                                            aria-selected="true">
                                            <span
                                                class="d-inline-block icon-20 rounded-circle bg-white align-middle me-2"></span>One-way
                                        </button>
                                    </li>
                                    <li class="nav-item">
                                        <button class="nav-link" id="return-tab" data-bs-toggle="tab"
                                            data-bs-target="#return" type="button" role="tab" aria-controls="return"
                                            aria-selected="false">
                                            <span
                                                class="d-inline-block icon-20 rounded-circle bg-white align-middle me-2"></span>Return
                                        </button>
                                    </li>
                                    <li class="nav-item">
                                        <button class="nav-link" id="multiCity-tab" data-bs-toggle="tab"
                                            data-bs-target="#multiCity" type="button" role="tab"
                                            aria-controls="multiCity" aria-selected="false">
                                            <span
                                                class="d-inline-block icon-20 rounded-circle bg-white align-middle me-2"></span>Multi-city
                                        </button>
                                    </li>
                                </ul>

And I have this button

<input id="btnSave" class="btn btn-search" type="button" value="Search" onclick="Search();" />

When I click on the button I’m calling Search() function which will redirect to a different page accrording selected button in the ul element.

I want to return the Id of the selected button and use it in the Search() function like this

var value = Search()

if(value == 'option1')
{
  //do something
}
else if(value == 'option2')
{
   //do another thing
}
else
{
   // do the rest thing
}

This is what I have tried so far

function valueFunction() {
            // var e = e || window.event;
            var e = window.event;
            e = e.target || e.srcElement;
            if (e.nodeName === 'BUTTON') {
                var ft = e.id;
                
                alert(ft);

                return e.id;
            }
        }

this works fine when I call it in the onclick of the ul element which has the id of "FlightType"

function search(){
    var value = valueFunction();
   alert(values) //undefined for first option, not responding for the other 2 options
}

var value = Search()

if (value == 'option1') {
  //do something
} else if (value == 'option2') {
  //do another thing
} else {
  // do the rest thing
}

function valueFunction() {
  // var e = e || window.event;
  var e = window.event;
  e = e.target || e.srcElement;
  if (e.nodeName === 'BUTTON') {
    var ft = e.id;

    alert(ft);

    return e.id;
  }
}
<ul class="nav nav-tabs border-0" role="tablist" id="FlightType" onclick="SelectedFlightType()">
  <li class="nav-item">
    <button class="nav-link active" id="oneway-tab" data-bs-toggle="tab" data-bs-target="#oneway" type="button" role="tab" aria-controls="oneway" aria-selected="true">
      <span class="d-inline-block icon-20 rounded-circle bg-white align-middle me-2"></span>One-way
    </button>
  </li>
  <li class="nav-item">
    <button class="nav-link" id="return-tab" data-bs-toggle="tab" data-bs-target="#return" type="button" role="tab" aria-controls="return" aria-selected="false">
      <span class="d-inline-block icon-20 rounded-circle bg-white align-middle me-2"></span>Return
    </button>
  </li>
  <li class="nav-item">
    <button class="nav-link" id="multiCity-tab" data-bs-toggle="tab" data-bs-target="#multiCity" type="button" role="tab" aria-controls="multiCity" aria-selected="false">
      <span class="d-inline-block icon-20 rounded-circle bg-white align-middle me-2"></span>Multi-city
    </button>
  </li>
</ul>

<input id="btnSave" class="btn btn-search" type="button" value="Search" onclick="Search();" />

plz direct me, I’m stuck for hrs.

Tags:

2

Answers


  1. 0

    why don’t you use the select html tag for this (with the option tags inside, each one has its own value)?

    In an other way, your function valueFunction can’t return you the id of buttons because you don’t look for them if the DOM. The event is generated by the input you have clicked on

    Login or Signup to reply.
  2. 0 
    by seeing your code  i understood  you have a few buttons implemented , all having id so you can just pass that id while onlick 

  



<input id="btnSave" class="btn btn-search" type="button" value="Search" onclick="Search('btnsave');" />
// in js code
function Search(id){
if(value == id)
{
  //do something
}
else if(value == id)
{
   //do another thing
}
else
{
   // do the rest thing
}
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search