How to have two different inputs (one for mobile, one for desktop) modify the same variable?

- 1 answer

Ad

so the issue I am having is that I want to create two different inputs, but have them modify the same variable. Basically, I have one input that is only visible on mobile and tablet in the collapsed navbar, and the other is visible in the center of the page on desktop and larger screens.

The input value is modifying var username. The problem that i'm having is that it seems to only take the value of the first occurring input. So, if i'm on desktop, the second input isn't returning anything, but it's the only input shown.

I've tried assigning common id's and names to the inputs to no avail. If I go on mobile, the input works just as intended. I think this is because the mobile input field occurs before the desktop input field in the code.

Here's the applicable HTML:

<nav class="visible-xs visible-sm navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsed" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>
    <div class="collapse navbar-collapse" id="collapsed">
      <ul class="nav navbar-nav">
        <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#trackList">Tracks</a></li>
        <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#queueList">Queue</a></li>
        <li>
        <input name="userSearch" type="text" class="form-control " placeholder=" SC.com/*PUT THIS PART IN THE SEARCH*">
      </input>
      <button class="btn" id="tracks">Tracks :)</button>
      <button class="btn" id="favorites">Favorites :)</button>
      <button class="btn" id="clearQueue">Clear My Queue</button>
        </li>

      </ul>
    </div>
  </div>
</nav>
<div id="queueApp" class="wrapper">
  <div class="row col-md-12">
    <div class="col-md-4 pages">
      <h1>Your Tracks, Fam</h1>
      <span class="prev">
      <span class="prevPage glyphicon glyphicon-backward"></span>
      <p class="prevPage">Previous</p>
      </span>
      <span class="next">
      <p class="nextPage">Next</p>
      <span class="nextPage glyphicon glyphicon-forward"></span>
      </span>


    </div>

    <div class="col-md-4 search visible-md visible-lg">
      <input name="userSearch" type="text" class="form-control " placeholder=" SC.com/*PUT THIS PART IN THE SEARCH*">
      </input>
      <button class="btn" id="tracks">Tracks :)</button>
      <button class="btn" id="favorites">Favorites :)</button>
      <button class="btn" id="clearQueue">Clear My Queue</button>
    </div>
  </div> 

And here's the applicable JS:

function getTracks(){
      titleList.length = 0;
      artistList.length = 0;
      imgList.length = 0;
      idList.length = 0;
         $(".trackList").html("");
        username = $("input[name=userSearch]").val();
        subSection = "tracks";
        getAPIURL(username, subSection); 
        getAPI(apiurl);
} 

Any ideas?

Ad

Answer

Ad

Use :visible selector

username = $("input[name=userSearch]:visible").val();

$("input[name=userSearch]:visible") will be the visible input field.

Ad
source: stackoverflow.com
Ad