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

Question

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 href="#trackList">Tracks</a></li>
        <li><a 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?

Answer 1

Use :visible selector

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

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

Answer 2

You should add some change listener and change the name of the second <input> , then use the value on submit ( might not be needed if you do not need to submit )

<input name="userSearch" class="input-listener" type="text" class="form-control " placeholder=" SC.com/*PUT THIS PART IN THE SEARCH*">
<input name="userSearch2" class="input-listener" type="text" class="form-control " placeholder=" SC.com/*PUT THIS PART IN THE SEARCH*">

javascript:

     var valueOfLastModifiedInput;
$( '.input-listener' ).on( 'change', function( e ) {
   valueOfLastModifiedInput = $( this ).val(); 
} ); 
function getTracks(){
      titleList.length = 0;
      artistList.length = 0;
      imgList.length = 0;
      idList.length = 0;
         $(".trackList").html("");
        username = valueOfLastModifiedInput;
        subSection = "tracks";
        getAPIURL(username, subSection); 
        getAPI(apiurl);
} 

Answer 3

Here is one way to do it: https://jsfiddle.net/f28zraee/2/

create two inputs, one mobile and one desktop. Then use a media query to change it for mobile.

 .mobile{display: none}
@media (max-width: 600px){
  .mobile{display: inline;}
  .desktop{display: none;}
}