- Posts: 3
- Thank you received: 0
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
- Topic Author
- Offline
- New Member
Less
More
7 years 5 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?
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="http://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('http://www.onetonline.org/find/quick?s='+b) }); </script>
The topic has been locked.
- urbana
- Offline
- Premium Member
Less
More
- Posts: 90
- Thank you received: 17
7 years 5 months ago - 7 years 5 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
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: 7 years 5 months ago by urbana. Reason: id tag
The topic has been locked.
- jpwiega
- Topic Author
- Offline
- New Member
Less
More
- Posts: 3
- Thank you received: 0
7 years 5 months ago - 7 years 5 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.
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("http://www.onetonline.org/find/quick?s="+b) }); </script>
Last edit: 7 years 5 months ago by jpwiega.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10612
- Thank you received: 3691
7 years 5 months ago #143143
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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:
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("http://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.
- urbana
- Offline
- Premium Member
Less
More
- Posts: 90
- Thank you received: 17
7 years 5 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:
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("http://www.onetonline.org/find/quick?s="+b) }); </script>
The following user(s) said Thank You: jpwiega
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10612
- Thank you received: 3691
7 years 5 months ago #143146
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
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
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- urbana
- Offline
- Premium Member
Less
More
- Posts: 90
- Thank you received: 17
7 years 5 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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 3
- Thank you received: 0
7 years 5 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.
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10612
- Thank you received: 3691
7 years 5 months ago - 7 years 5 months ago #143171
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic JS to open link in new tab inserts limesurvey hosting directory before the link
No, because you're in the LimeSurvey form, "Enter" will submit that.One follow-up: is it possible to use "enter" to execute the search function after a respondent places text in the box?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 7 years 5 months ago by tpartner.
The topic has been locked.