Create a multi-choice search bar - javascript

I'm trying to make a simple HTML webpage with a search bar that would be able to query the external search engine of the user's choice (selected in a dropdown menu).
I'm unable to make the user's choice be accepted by the code. Here's what I have:
<html>
<div class="custom-select" style="width:200px;">
<select>
<option value="http://www.google.com/search">Google</option>
<option value="http://www.bing.com/search">Bing</option>
<option value="https://duckduckgo.com/?q=">Duckduckgo</option>
</select>
</div>
<div class="search-bar">
<form method="get" action="???">
<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" cellpadding="0">
<tr>
<td>
<input type="text" name="q" size="25" maxlength="255" value="" />
<input type="submit" value="Search" />
</td>
</tr>
</table>
</div>
</form>
</div>
</html>

You are not going to be able to do this with only html or css. Your best option is to use javascript to make an api call from the different search engines.
The google search api is here.
The bing search api is here. Note for some features it will cost money.
The duckduckgo search api is here.
You should also look into Jquery, Asynchronous programming, and JSON. You will most likely be using Jquery's Ajax to request data from each search engine, and will have to be able to parse the json and then change the html with js.

This can be done with javascript by setting the action attribute of the <form> just before the search request is fired.
Note: this does not work from inside the Stack Overflow snippet for reasons that I can't quite figure out (possibly a Content Security Policy), but I confirmed that it works in a standalone HTML file.
function UpdateFormAction() {
var url = document.getElementById("myDropdown").value;
document.getElementById("myForm").action = url;
}
<html>
<div class="custom-select" style="width:200px;">
<select id="myDropdown">
<option value="http://www.google.com/search">Google</option>
<option value="http://www.bing.com/search">Bing</option>
<option value="https://duckduckgo.com/?q=">Duckduckgo</option>
</select>
</div>
<div class="search-bar">
<form id="myForm" target="_blank" method="get" action="???" onsubmit="UpdateFormAction()">
<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" cellpadding="0">
<tr>
<td>
<input type="text" name="q" size="25" maxlength="255" value="" />
<input type="submit" value="Search" />
</td>
</tr>
</table>
</div>
</form>
</div>
</html>

Related

Looking to Add a variable inside an HTML link

excuse my ignorance but i would really appreciate your help.
I am new to HTML and i am just trying to add a variable inside an HTML link (ex. http://www.google.com/variable/).
The variable will be text type and i want to replace the text when i type something in a search bar.
(ex. search for "cars" and have www.google.com/cars)
Any thoughts how i can start this?
Much appreciated.
Write following javascript function:
function set(me)
{
var link = 'http://www.google.com/';
document.getElementById('result').value = link + me.value;
}
I have written following HTML lines to illustrate:
<div>
<input type="text" id="test" onkeyup="set(this);" />
<input type="text" id="result" />
</div>
You can call this function on onkeyup or onchange events as required.
Include in your Html.
<form method="get" action="http://www.google.com/search">
<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" cellpadding="0">
<tr>
<td>
<input type="text" name="q" size="25" maxlength="255" value="" />
<input type="submit" value="Search in Google" />
</td>
</tr>
<tr>
<td align="center" style="font-size:75%">
<input type="checkbox" name="sitesearch" value="rotinadigital.net"/>Only my site<br />
</td>
</tr>
</table>
</div>
</form>
If you want variables in strings then take a look at template literals. You can use them like so:
var variable = document.getElementsByTagName('input')[0].value;
var url = `https://www.google.com/${variable}/`;
// same as 'https://www.google.com/' + variable + '/'
It sounds like you're trying to achieve an effect similar to Google Instant though. Afaik that's just done through standard anchor links and using javascript to (rather radically) manipulate the contents of the page. Actually navigating to a different page would cause a rather noticeable delay.

How to parse HTTP GET method object in JS

I have variable "parse" in which is saved GET like this:
<div class="List_modal" data-target-input-id="Product" data-target-input-hidden="Product_Hidden">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Code</th>
<th>Base</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a title="Wsome talking " href="#" class="List_Item">
123.123.123.123
<input type="hidden" class="Code" value="123.123.123.123" />
<input type="hidden" class="Base" value="I NEED THIS TEXT" />
</a>
</td>
<td>
<a title="ere random text too" href="#" class="List_Item">
randomtextrandomtext
<input type="hidden" class="Code" value="123.123.123.123" />
<input type="hidden" class="Base" value="I NEEED THIS TEXT" />
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
What i need is to get only string from input class "Base" and "Code". I tried RegEx but i am not JS developer and i cant make Functions and using jQuery becasue this script is used in Data Integration Framework. Have any idea how to get this to values? And it should be universal because every time i scrap some site i have different values i code and base class.
What you need to do is web scraping, it's a whole art form in itself. There are commercial places like scraperwiki who will do it for you, or look at https://en.wikipedia.org/wiki/Web_scraping
As you have the html in a file (presumably) you don't have to use javascript, you can use a toolset that you are more familiar with

Load a form action in a div on the same page

I have a dealer locator which is powered through software that our IT department manages, and I'm trying to fix up their code a bit and make it more user friendly.
What I'd like to do is allow end users to enter in their zip code, and have the list of dealers in their area show up on the same page, rather than open a new tab/window, or re-load the page.
<div class="locator">
<form method="get" id="dsearchform" action="http://www5.pacelink.com/paceweb/locatorframe.jsp?brand=SWEQ&zip=&&distance=50&numlocations=6&submit=Find+a+Dealer" target="_blank" alt="Pace Search - Sno-Way" onsubmit="return dsearch(this)" class="dealersearch">
<input type="hidden" name="locatorBrand" value="SWEQ" />
<input type="hidden" name="distance" value="100" /><input type="hidden" name="numlocations" value="6" />
<h2>Sno-Way Dealer Locator:</h2>
<h3 class="secondary">Enter your zip code below to find an authorized Sno-Way dealer near you!</h3>
<div class="zip-entry">
<input type="text" name="zip" placeholder="ZipCode" value="ZipCode" class="field" onfocus="if(this.value == 'ZipCode'){this.value='';}" onblur="if(this.value == ''){this.value='ZipCode';}"/>
<input type="submit" name="submit" value="Search" id="button" class="but"/>
</div>
</form>
</div>
I've cobbled this together from another solution posted here, but I don't think it's on the right track at all:
<div id="search">
<form id="try" method="post" target="receiver" action="http://www5.pacelink.com/paceweb/locatorframe.jsp?brand=SWEQ&zip=&&distance=50&numlocations=6&submit=Find+a+Dealer">
Zip: <input id="zip" name="zip" type="text" onfocus="if(this.value == 'ZipCode'){this.value='';}" onblur="if(this.value == ''){this.value='ZipCode';}"/>
<input type="submit"/>
</form>
<div id="receiver">
<?php if (isset($_POST['zip'])){
//display search results here.
}
?>
</div>
</div>
First of
If you want to change the html dynamically you need to go with JavaScript and AJAX. This is , you load stuff asynchronously. The comment states XHR, this is
XmlHttpRequest
Better directly look for the much more convenient JQuery Ajax function.
Jquery is very easy to use.
Example to set html of the container with id retailer
$('#retailer').html(response); // response is the html your php creates
You only need to fetch the html via jquery ajax({... }), where most of the stuff works by default. Just set the url of your webservice and the request body payload) and go. In the callback you do the above and are fine.
Give it a try at
https://learn.jquery.com/ajax/
And inside your html after including the script resource for jquery in the header.
<script>$(document).ready(function(){
// your code goes here
}); </script>
To code your JQuery / JS.
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header" id="content-wrapper">
<h1>
Dashboard <small>${userType} </small>
</h1>
</section>
</div>

Adding TinyMCE to my dynamic form table

I had an idea to help me work better and create tools for myself to work faster.
I intend to make documents to save my QA work to the db and to my server.
All that works so far on my local, but the problem im sitting with is that the TinyMCE editor i want to use is not working.
I have a dynamic table added to my form that helps me add and delete rows in my form. In one of the columns i have added the TinyMCE editor in to describe the process i did with my qa testing. I have added the tag "", but when i want to add another row, the editor has stopped working. I would like to know what can i do to create a new row but still be able to have the editor work in eack column/ row
<fieldset class="row2">
<legend>Process</legend>
<p>
<input type="button" value="Add Row" onClick="addRow('dataTable')" />
<input type="button" value="Remove Row" onClick="deleteRow('dataTable')" />
<p>(All acions apply only to entries with check marked check boxes only.)</p>
</p>
<table id="dataTable" class="form" border="1">
<tbody>
<tr>
<p>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td>
<label>Name</label>
<input type="text" required="required" name="BX_STEP[]">
</td>
<td>
<label for="BX_process">Age</label>
<textarea type="text" required="required" class="small" name="BX_process[]"></textarea>
</td>
<td>
<label for="BX_pass-fail">Gender</label>
<select id="BX_pass-fail" name="BX_pass-fail" required="required">
<option>....</option>
<option>Pass</option>
<option>Fail</option>
</select>
</td>
<td>
<label for="BX_comment">Berth Pre</label>
<input id="BX_comment" name="BX_comment" required="required">
</td>
</p>
</tr>
</tbody>
</table>
<div class="clear"></div>
</fieldset>
<script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<script>tinymce.init({selector:'textarea'});</script>
I would just like to know how to generate a new text editor for every row i add?
I think you need to initialize each of the textareas independently. For example:
<script>
tinymce.init({selector:'#ta1'});
tinymce.init({selector:'#ta2'});
</script>
<h1>My First Text Area</h1>
<textarea id="ta1">Hello! Look at me, I'm an editable textarea!</textarea>
<h1>My Other Text Area</h1>
<textarea id="ta2">Whoa! Now there are two of us!</textarea>
See my jsfiddle: https://jsfiddle.net/wr8rh6b8/
You might also want to read up on selectors. The same selector syntax is used for CSS and for identifying DOM elements from your JavaScript code. See: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors

Self-Closing Tag Issue with document.innerHTML in Javascript

I am writing a browser plug-in for Firefox(Greasemonkey), Opera and Chrome in Javascript for a website. The issue is, when I load the document.innerHTML into a variable,
<form name="foo" action="foo.php" method="get">
<td id="td">text:
<input name="k" type="text" />
</td>
</form>
... the original code above of the website(which I am writing the plug-in for) is converted into
<form name="foo" action="foo.php" method="get">
<td id="td">text:
**<input name="k" type="text">**
</td>
... this one. As you can see, the self-closing <input /> tag is not closed anymore, and the </form> tag also disappeared. I have googled almost all the internet but none of the solutions I read did not solve my problem.
The closing </form> tags show up for me in Firefox when getting .innerHTML.
I'd suggest that the missing tag is due to your markup which I'm pretty sure is invalid:
<!-- A <form> wrapping a <td> ? -->
<form name="foo" action="foo.php" method="get">
<td id="td">text:
<input name="k" type="text" />
</td>
</form>
The parent of a <td> element should be a <tr>, not a <form>.
Given this markup:
<table>
<tr>
<form name="foo" action="foo.php" method="get">
<td id="td">text:
<input name="k" type="text" />
</td>
</form>
</tr>
</table>
...Firefox gives me this innerHTML for the <table>:
<tbody>
<tr>
<form name="foo" action="foo.php" method="get"></form>
<td id="td">text:
<input name="k" type="text">
</td>
</tr>
</tbody>
It attempts a correction of the invalid markup.
DEMO: http://jsfiddle.net/grM4c/
Well, taking a look on your code, you care creating a form with a unclosed TD in the middle.
<form name="foo" action="foo.php" method="get">
<td id="td"><span>text:<input name="k" type="text" /></span></td>
</form>
Try this way.

Categories