Develop Reference

Create a single search box which searches two different sites using javascript

I've made multiple search boxes that search external dictionary sites. Due to the site search syntax, I've had to use JavaScript to construct a url from the text box input. This code works perfectly fine:
function prepare_link_glosbe() {
var url_param_gl = document.getElementById('url_param_gl');
var target_link_gl = document.getElementById('target_link_gl');
if ( ! url_param_gl.value ) {
return false;
}
target_link_gl.href = "https://nb.glosbe.com/en/nb"
target_link_gl.href = target_link_gl.href + '/' + encodeURI(url_param_gl.value);
window.open(target_link_gl.href, '_blank')
}
function prepare_link_dict() {
var url_param_dict = document.getElementById('url_param_dict');
var target_link_dict = document.getElementById('target_link_dict');
if ( ! url_param_dict.value ) {
return false;
}
target_link_dict.href = "https://www.dict.com/engelsk-norsk"
target_link_dict.href = target_link_dict.href + '/' + encodeURI(url_param_dict.value);
window.open(target_link_dict.href, '_blank')
}
<!--Search Glosbe.com-->
<div style="border:0px solid black;padding:8px;width:60em;">
<table border="0" cellpadding="2">
<tr><td>
<input type="text" onfocus="this.value=''" value="Search glosbe.com" name="url_param_gl" id="url_param_gl" size="40"/>
<input type="button" onclick="prepare_link_glosbe()" value="Glosbe (en-no)" />
<a href="https://nb.glosbe.com/en/nb" id="target_link_gl" target="_blank" ></a>
</td></tr></table></div>
<!--Search Dict.com-->
<div style="border:0px solid black;padding:8px;width:60em;">
<table border="0" cellpadding="2">
<tr><td>
<input type="text" onfocus="this.value=''" value="Search dict.com" name="url_param_dict" id="url_param_dict" size="40"/>
<input type="button" onclick="prepare_link_dict()" value="Dict (en-no)" />
<a href="https://www.dict.com/engelsk-norsk" id="target_link_dict" target="_blank" ></a>
</td></tr></table></div>
However, I wish to search both sites using a single input box. I've tried different approaches, including addEventListener, but I'm not fluent enough in either HTML or JavaScript to achieve it. Can anyone point me in the right direction?

First of all, some things that will make your life easier in the long run:
You don't need this.value='', just use the placeholder attribute - it's well supported.
Don't use <table> to create a layout.
Don't use attributes to assign JS event handlers. (so no onclick=)
And now, how to use just one text field for both websites - just remove the second field and move the button somewhere else. Here's an example:
// This is our search input field.
const searchValue = document.getElementById('search_value');
// Here I'm looking for all search buttons and iterating over them
// with for ... of, querySelectorAll accepts valid CSS selectors.
for (let button of document.querySelectorAll('.search_button')) {
// Getting the data-url attribute value from the button.
const url = button.dataset.url;
// Adding a click event handler, instead of relying on onclick=''
button.addEventListener('click', function () {
// Quick string replace...
const targetURL = button.dataset.url.replace('%s', encodeURI(searchValue.value));
// ...and here we open the new tab.
window.open(targetURL, '_blank');
});
}
<div>
<input type="text" placeholder="Search..." id="search_value" />
<button class="search_button" data-url="https://nb.glosbe.com/en/nb/%s">Glosbe (en-no)</button>
<button class="search_button" data-url="https://www.dict.com/engelsk-norsk/%s">Dict (en-no)</button>
</div>
Here's the explanation:
I'm using the HTML data-* attributes (accessible in JS via element.dataset.*) to store the URL, %s is being used as a placeholder for the search value and will be later replaced with the .replace function.
Instead of manually assigning IDs to buttons I've declared a class - this allows you to extend the application infinitely.
I've merged the input fields into just one and read its value in the button event handler.
I've replaced your this.value='' hack with a proper placeholder.
I've removed the table layout, if you wish to add a nicer layout or styling I would suggest to learn more about CSS - also: don't use HTML attributes to style elements (except for class and style). Avoid using ID selectors in CSS as well (it's fine in JS, but in CSS it can cause issues when it comes to importance). Also, you should avoid the style attribute anyway - it will take precedence over most CSS rules except for the rules with !important and causes code duplication.

Xcode HTML document.getElementBy without ID and Name

Hi I'm trying to get a button of a webpage with
document.getElementBy...
The problem is that the button does not have an Id and also a Name.
I tried to use getElementByClass('class') but Xcode says that it's not a function, I also tried to use getElementsByTagName('tag')[0] but it retrieves nil.
this is the button html:
<input type="button" class="check-auth" value="Conferma" size="15" tabindex="4" style="border-radius: 5px;border: 1px solid #aaaaaa;background-color:#009245;color: #ffffff;height: 30px;font-size: 16px;padding-left: 4px;width: 105px;width: 113px;">

You can use querySelector to find an element by its className. Just note that multiple elements can have the same className in the DOM and that querySelector will only get the first. You can also use querySelectorAll.
querySelector/querySelectorAll accepts any CSS selector as its param.
Since your className is check-auth, this should work:
var button = document.querySelector('.check-auth');

why is $(this).data('mycontrol') undefined?

Unfortunately my front end skills are lacking as my role puts me more on the server side / db technologies as opposed to css / js. In any event, I am trying to implement this:
https://github.com/blueimp/jQuery-File-Upload/wiki/Complete-code-example-using-blueimp-jQuery-file-upload-control-in-Asp.Net.
And more specifically I was able to find an asp.net example here:
http://www.webtrendset.com/2011/06/22/complete-code-example-for-using-blueimp-jquery-file-upload-control-in-asp-net/
Basically allowing you to do mass image uploads.
I've set up the front end with the correct css and js files. I had to modify some of the js files to make use of on() instead of live() as live is deprecated. My form loads and looks like the following:
So far so good, however, as soon as I "Add file" or drag and drop a file chrome developer tools tells me the following:
Uncaught TypeError: Cannot read property '_adjustMaxNumberOfFiles' of undefined
It specifies the file as jquery.fileupload-ui.js and more specifically points me to this:
var that = $(this).data('fileupload');
that._adjustMaxNumberOfFiles(-data.files.length);
I alerted that and of course it seems to be undefined...But I don't know enough jquery to understand why it is undefined. My fileupload div markup was as follows:
<div id="fileupload">
<form action="/Handler.ashx" method="POST" enctype="multipart/form-data">
<div class="fileupload-buttonbar">
<label class="fileinput-button">
<span>Add files...</span>
<input id="file" type="file" name="files[]" multiple>
</label>
<button type="submit" class="start">Start upload</button>
<button type="reset" class="cancel">Cancel upload</button>
<button type="button" class="delete">Delete files</button>
</div>
</form>
<div class="fileupload-content">
<table class="files"></table>
<div class="fileupload-progressbar"></div>
</div>
</div>
So what could be causing this to be undefined? This is what _adjustMaxNumberOfFiles does
_adjustMaxNumberOfFiles: function (operand) {
if (typeof this.options.maxNumberOfFiles === 'number') {
this.options.maxNumberOfFiles += operand;
if (this.options.maxNumberOfFiles < 1) {
this._disableFileInputButton();
} else {
this._enableFileInputButton();
}
}
},
I'm using jquery 2.0.3 and jquery ui 1.10.3
Update
I've gotten it down to the point that the example link which I posted (2nd link above) the only difference is the version of jquery they are using, appears to be 1.8.2 and I am using 2.0.3. The difference and problem is this piece of code:
var that = $(this).data('fileupload');
In the example download this returns some strange object:
a.(anonymous function).(anonymous function) {element: e.fn.e.init[1], options: Object, _sequence: Object, _total: 0, _loaded: 0…}
In my version (using 2.0.3) I am getting undefined for this:
var that = $(this).data('fileupload');
Is there another way I can do this one line of code?

After much playing around in the console window I got it with this:
var that = $("#fileupload").data('blueimpUI-fileupload');
So for anyone that is using anything > jQuery 1.8 please change this line:
var that = $(this).data('fileupload');
to this:
var that = $("#fileupload").data('blueimpUI-fileupload');

How are you initializing the plugin? The issue might be your selector. Target the form itself, vs. the wrapping div.
Based on your html...
Try changing: $('#fileupload').fileupload({ /*options*/ });
To: $('#fileupload form').fileupload({ /*options*/ });
Also, you may have to move your .fileupload-content div inside of the form tag as well.

Robot Framework : Error WebDriverException on executing JavaScript

I enter the text into test area and save then I click on Edit button now i have to remove the text from textbox.
I am getting error when i execute the below command for clearing textbox.
`Execute Javascript window.document.getElementByName('resolution').value='';`
HTML:
<span class="textarea-text edit" sfuuid="1832">
<textarea class="input-xlarge wide tleft" name="resolution" cols="" rows="">test</textarea>
<p class="help-block"></p>
</span>

Here you have a textarea tag not a input tag with value attribute. You can clearly see that your textarea. Doesn't have a value attribute. The text "test" is the innerHTML of the element so try setting the innerHTML
LIKE
document.getElementById("").innerHTML=' '

Names are not necessarily unique. Thus, there is no getElementByName method. It is getElementsByName (note the plurality). If you want to just try your operation on the first element found in the DOM with that name, change your code to:
Execute Javascript window.document.getElementsByName('resolution')[0].value='';
Note that it is not necessary to use JavaScript to accomplish this either. Instead, you could do:
Input Text name=resolution ${EMPTY}

is ID of html controls which called by javascript casesensitive or not

i have this control
<input id="btnBackMP" type="button" value="<" onclick="BackGroup('MP') ;"
disabled="disabled" style="background-color: #BF0000; width: 28px;" />
inside backGroup Function i used this Code Line :
document.getElementById('btnback' + Key).disabled = true;
this line works fine on Web Dev but when i published my site on server (iis 7)
this line stop working till i changed it to the following :
document.getElementById('btnBackMP'+ Key).disabled = true;
any one have idea ?
thanks

Have you changed in calling function argument too since before your are passing 'MP' as argument and using as key
<input id="btnBackMP" type="button" value="<" onclick="BackGroup() ;"
disabled="disabled" style="background-color: #BF0000; width: 28px;" />
and why do not you directly change to this line only :-
document.getElementById('btnBackMP').disabled = true;

Element id is case sensitive. The id must be unique but in theory you could use id="elementa" and id="elementA" in the same document to refer on two different nodes.
This is not recommended
Further details on
https://developer.mozilla.org/en-US/docs/DOM/element.id

The id attribute values are case-sensitive by HTML specifications; see e.g. HTML 4.01 on id. They are thus case-sensitive when used in JavaScript too. Note that the document.getElementById method queries the DOM, which must follow HTML conventions here.
So btnbackMP and btnBackMP are distinct id values. Your code seems to have another error too, as pointed out, but this might be just an issue in formulating the question. (I suppose the last code line was meant to have btnBack not btnBackMP.)