return The Id of selected button-CodePudding

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

<ul  role="tablist" id="FlightType" onclick="SelectedFlightType()">
                                    <li >
                                        <button  id="oneway-tab" data-bs-toggle="tab"
                                            data-bs-target="#oneway" type="button" role="tab" aria-controls="oneway"
                                            aria-selected="true">
                                            <span
                                                ></span>One-way
                                        </button>
                                    </li>
                                    <li >
                                        <button  id="return-tab" data-bs-toggle="tab"
                                            data-bs-target="#return" type="button" role="tab" aria-controls="return"
                                            aria-selected="false">
                                            <span
                                                ></span>Return
                                        </button>
                                    </li>
                                    <li >
                                        <button  id="multiCity-tab" data-bs-toggle="tab"
                                            data-bs-target="#multiCity" type="button" role="tab"
                                            aria-controls="multiCity" aria-selected="false">
                                            <span
                                                ></span>Multi-city
                                        </button>
                                    </li>
                                </ul>

And I have this button

<input id="btnSave"  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  role="tablist" id="FlightType" onclick="SelectedFlightType()">
  <li >
    <button  id="oneway-tab" data-bs-toggle="tab" data-bs-target="#oneway" type="button" role="tab" aria-controls="oneway" aria-selected="true">
      <span ></span>One-way
    </button>
  </li>
  <li >
    <button  id="return-tab" data-bs-toggle="tab" data-bs-target="#return" type="button" role="tab" aria-controls="return" aria-selected="false">
      <span ></span>Return
    </button>
  </li>
  <li >
    <button  id="multiCity-tab" data-bs-toggle="tab" data-bs-target="#multiCity" type="button" role="tab" aria-controls="multiCity" aria-selected="false">
      <span ></span>Multi-city
    </button>
  </li>
</ul>

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

plz direct me, I'm stuck for hrs.

CodePudding user response：

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

CodePudding user response：

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