Home Use JS variable for fancybox data-src value
Reply: 0

Use JS variable for fancybox data-src value

user2361
1#
user2361 Published in July 23, 2018, 1:33 pm

I have an expandable search bar that collects search input from the user and then redirects them to a search-focused php page with the search for their input already displayed. Works great.

I'm trying to open a fancybox iframe for the search.php page. I have one issue that feels like it should be so simple but haven't been able to overcome – I can't figure out how to update the data-src value that fancybox uses to a URL that includes the search input. I have the fully parsed URL that I need in a js variable but I can't figure out how to get 'data-src' to use it. If I hard code the URL in quotes, it works the way I want it to, so I just need help figuring out how to use my JS string variable instead of a hard-coded URL.

Here is my search input html:

<div class="infobarsearch-container">
   <div id="sb-search" class="sb-search">
      <form id="tfnewsearch" method="get" action="">

          <input class="sb-search-input" placeholder="Search..." type="search" value="" name="q" id="search">

          <input id="searchbtn" name="searchbtn" class="sb-search-submit" type="submit" onclick="searchstuff()" value="" data-fancybox data-type="iframe" data-src="THIS NEEDS TO BE THE VALUE OF SEARCHINPUT FROM SEARCHSTUFF()" data-caption="My Caption">

          <span class="sb-icon-search"></span>
      </form>
   </div>
</div>

Here is the onclick function where I build the parsed url that includes the search input. The JS variable with the complete url that I need to use is 'searchinput':

function searchstuff()
   {
      var searchinp = document.getElementById('search');
      searchinput = "inputs/search.php?search=" + searchinp.value;
      alert("searchinput: " + searchinput);
   }

And here is the fancybox initialization for this use on the page:

$('[data-fancybox]').fancybox({
   toolbar  : false,
   smallBtn : true,
   afterClose: function () {
      parent.location.reload(true);
   }

$(".searchbtn").fancybox({
   toolbar  : false,
   smallBtn : true,
});

I hope you can help. I need to get the url string value stored in the 'searchinput' variable in searchstuff() to be used by 'data-src' in the searchbtn input element. Cheers.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.315607 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO