Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

JS to open link in new tab inserts limesurvey hosting directory before the link

  • jpwiega
  • jpwiega's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
8 years 7 months ago #143088 by jpwiega
JS to open link in new tab inserts limesurvey hosting directory before the link was created by jpwiega
Hi,

I'm trying to include the following JS in my survey to produce a search button that takes text input and inserts it at the end of a URL that is opened in a new browser tab. However, it appears that any clickable links (even a basic HTML link) insert my limesurvey hosting url and directory before the linked URL (so nothing happens).

Can you please help me get the links to simply open as written?
Code:
<div id="tfheader">
        <form id="tfnewsearch" method="get" action="https://www.onetonline.org/find/quick?s=">
            <input type="text" placeholder="Enter Your Job Title..." class="tftextinput" id="tftextinput" name="q" size="26" maxlength="120"><input type="submit" value="Search O*NET Occupations" class="tfbutton">
        </form>
        <div class="tfclear"></div>
        </div>
        <script>
            var a = document.getElementById('tfnewsearch');
            a.addEventListener('submit',function(e) {
                e.preventDefault();
                var b = document.getElementById('tftextinput').value;
                window.open('https://www.onetonline.org/find/quick?s='+b)
            });
        </script>
The topic has been locked.
More
8 years 7 months ago - 8 years 7 months ago #143101 by urbana
Replied by urbana on topic JS to open link in new tab inserts limesurvey hosting directory before the link
The problem is the submit button - it seems that submit buttons are reserved and used by different limesurvey functions
I recommend two things:
1. get red rid of the form tag - you don't need it - also the action item is useless in your case
2. change type submit to button

And you use the same class name and id name for the input field thats not good eigther
id tags should always be unique
then you should get it to run
Last edit: 8 years 7 months ago by urbana. Reason: id tag
The topic has been locked.
  • jpwiega
  • jpwiega's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
8 years 7 months ago - 8 years 7 months ago #143141 by jpwiega
Replied by jpwiega on topic JS to open link in new tab inserts limesurvey hosting directory before the link
First, to ensure we're on the same page, allow me to demonstrate a working example of the JS hosted on my website here. A respondent is able to enter a job title, click the button, and is taken to www.onetonline.org/find/quick?s with the text of their search inserted at the end of the full onetonline.org url.

I attempted your edits to the best of my ability, but need to retain the form tag at some level in order to offer a text entry field. Below is what I've arrived at, but it still is not working. In light of the working example linked above, what am I still missing? Apologies for generally lacking html/JS expertise. Thanks for the help.
Code:
<form id="tfnewsearch" method="get"><input class="tftext" id="tftextinput" maxlength="120" name="q" placeholder="Enter Your Job Title..." size="26" type="text" /><input class="tfbutton" type="submit" value="Search O*NET Occupations" /> </form>
<script>
    var a = document.getElementById('tfnewsearch');
    a.addEventListener('submit',function(e) {
      e.preventDefault();
      var b = document.getElementById('tftextinput').value;
    window.open("https://www.onetonline.org/find/quick?s="+b)
    });
</script>
Last edit: 8 years 7 months ago by jpwiega.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 7 months ago #143143 by tpartner
Replied by tpartner on topic JS to open link in new tab inserts limesurvey hosting directory before the link
You don't need a <form> element unless you want to want to act on it. And, technically, you already have one - the LS form.

Something like this should do the trick:

Code:
<div class="search-wrapper" style="background:#FFFFFF; padding: 20px; margin: 20px; color: #2C3E50;">
  <input class="tftext" id="tftextinput" maxlength="120" placeholder="Enter Your Job Title..." size="26" type="text" style="border:1px solid #233140;" />
  <button id="tfbutton" type="button" value="Search O*NET Occupations" style="margin-left:8px;" />Search O*NET Occupations</button> 
</div>
<script type="text/javascript" charset="utf-8">    
  $(document).ready(function() {
    $('#tfbutton').on('click', function(e) {
      e.preventDefault();
      var b = $('#tftextinput').val();
      window.open("https://www.onetonline.org/find/quick?s="+b)
    });
  });
</script>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: jpwiega
The topic has been locked.
More
8 years 7 months ago #143144 by urbana
Replied by urbana on topic JS to open link in new tab inserts limesurvey hosting directory before the link
OK I see you'r lack of the fundamentals no prob
First you don't need a form to show form elements
Here is a working code (at least in the current LS Version) based on jQuery

Paste that in the question or helptext:
Code:
<input class="tftextinput" id="tftextinput2" maxlength="120" name="q" placeholder="Enter Your Job Title..." size="26" type="text" /><input class="tfbutton" id="tfnewsearch" type="button" value="Search O*NET Occupations" /> 
<div class="tfclear"> </div>
<script type="text/javascript">
$("body #tfnewsearch").on("click",function(){
  var b = $("#tftextinput2").val();
  window.open("https://www.onetonline.org/find/quick?s="+b)
});
        </script>
The following user(s) said Thank You: jpwiega
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 7 months ago #143146 by tpartner
Replied by tpartner on topic JS to open link in new tab inserts limesurvey hosting directory before the link
@urbana, beat you by 3 minutes :P
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
8 years 7 months ago #143148 by urbana
Replied by urbana on topic JS to open link in new tab inserts limesurvey hosting directory before the link
:laugh: :laugh:
The topic has been locked.
  • jpwiega
  • jpwiega's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
8 years 7 months ago #143157 by jpwiega
Replied by jpwiega on topic JS to open link in new tab inserts limesurvey hosting directory before the link
Many thanks to both of you--these solutions work well. l'm using them with the "Text Display" type question.

One follow-up: is it possible to use "enter" to execute the search function after a respondent places text in the box? I realize tabbing over to the button and then hitting "enter" accomplishes this, but I'm afraid most respondents won't think to do that and may hit enter instead of tabbing over to or clicking the search button. Presently this simply moves the survey to the next page.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 7 months ago - 8 years 7 months ago #143171 by tpartner
Replied by tpartner on topic JS to open link in new tab inserts limesurvey hosting directory before the link

One follow-up: is it possible to use "enter" to execute the search function after a respondent places text in the box?

No, because you're in the LimeSurvey form, "Enter" will submit that.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 8 years 7 months ago by tpartner.
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source