How to parse HTTP GET method object in JS - javascript

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

Related

Create a multi-choice search bar

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>

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.

Select Image and pass data to database

I am working on a mobile app and I have a scenario where the user upon selecting an image (For example: the mode of payment- credit card will have an image, money will have an image) thorough on-click function the color of the image should change and the data should be retrieved from database.
I am able to fix the on-click color change option but unable to access data from database. Please help me with this.
This is the code below:
<div class="container">
<table style="width:60%;text-align:center; ">
<thead>
<tr>
<td colspan="4" style="border-right:1px solid;">Mode of transport:(click to select)
</td>
<td colspan="2" >Mode of payment:(click to select)
</td>
</tr>
<thead>
<tr>
<td><img id="p2" src="./images/car_blue 120.png" style="width:60px;height:60px;" onclick="" />
</td>
<td>
<img id="p2" src="./images/Bus_blue 120.png" style="width:60px;height:60px; " onclick="" />
</td>
<td>
<img id="p2" src="./images/plane_blue 120.png" style="width:60px;height:60px; " onclick="" />
</td>
<td>
<img id="p2" src="./images/cash_blue 120.png" style="width:60px;height:60px; padding:5px;" onclick="" />
</td>
<td>
<img id="p2" src="./images/credit_card_blue 120.png" style="width:60px;height:60px; padding:5px;" onclick="" />
</td>
</tr>
</table>
</div>
Here You are talking about 2 different activity, It is not imp. that you are using Image/Button/or anything else. It only act as trigger to access database . It perform Some action after on click Event. " In your scenario action is "Retrieving Data"
If you provide clear info about Database type you are using , then it is easier to explain soln.
Your are in client side and you have to communicate with the server to access the data you need. if you want to communicate with remote server you will have to call web services in your app using javascript.
You have to invoke a function with onclick event which performs required action,for this you can use Ajax. Refer the discussion
connecting to an external databse with phonegap-android app
Use AJAX to populate Cordova database

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

Wrap table rows without breaking HTML validation?

I have a table and I want to wrap table rows , but the problem is I don't know with what to wrap those those guys up... If I use <div>,<span>,<tr>,<td>...they all break my validation. So with what can I wrap my table-rows without breaking validation?
This is how I want it to look only problem is that my HTML is not valid.
Fiddle Here
I am generating my wrappers using following Jquery
$(document).ready(function(){
$('tr:first').nextUntil('.section2').andSelf().addClass('section1');
$('tr:nth-child(3)').removeClass('section1').addClass('section2');
$('.section2').nextUntil('.section3').removeClass('section1').addClass('section2');
//Lets wrap those two sections inside divs ...
//This will obviously break my validation:(
$('tr.section1').wrapAll('<div class="section_box1"></div>');
$('tr.section2').wrapAll('<div class="section_box2"></div>');
});
As #KevinB writes in a comment, a tbody element is really the only way to group table rows in a wrapper element. In static markup, this could be:
<table class="form-table">
<tbody class="bg">
<tr valign="top">
<th scope="row">Hide Menu Background:</th>
<td>
<input type="checkbox" value="value1" name="name1"/>
</td>
</tr>
<tr valign="top">
<th scope="row">
Menu Background:
</th>
<td>
<input type="file" name=""/>
</td>
</tr>
</tbody>
<tbody class="other">
<tr valign="top">
<th scope="row">Hide Sidebar:</th>
<td>
<input type="checkbox" value="value2" name="name2"/>
</td>
</tr>
<tr valign="top">
<th scope="row">Hide Site Title:</th>
<td>
<input type="checkbox" value="value3" name="name3" />
</td>
</tr>
</tbody>
</table>
The class attributes on tbody elements are really not needed, but they can be used to make styling a little easier.
Alternatively, you might decide that the two parts are not really logically parts of the same table, and use two separate table elements. This is really the only way if you want column 2 to start at different positions.
I would first start by just removing the table to begin with. It is really only best practice to use a table when actual 'tabular data' is being shown.
<h3 class="title">General Settings:</h3>
<div class="section_box1">
Hide Menu Background: <input type="checkbox" value="value1" name="name1"/><br />
Menu Background: <input type="file" name=""/>
</div>
<div class="section_box2">
Hide Sidebar: <input type="checkbox" value="value2" name="name2"/><br />
Hide Site Title: <input type="checkbox" value="value3" name="name3" />
</div>
See the jsfiddle.
This way you can more freely add classes / wrappers as needed and still be HTML compliant.

Categories