Develop Reference

Call javascript function on enter of a text input, without using jquery

Is it possible to call a javascript function on enter of a text input, without using jquery?
<input name = 'text' type = 'text' onEnter('callJavascriptFunction')>
^---it would be preferable for the onEnter to be inside the element like above...

Sure is:
<input name="text" type="text" onkeyup="callJavascriptFunction();">
You can also do it without the inline javascript:
<input id="myTextBox" name="text" type="text">
Then in your js file:
var myTextBox = document.getElementById('myTextBox');
myTextBox.addEventListener('keyup', function(){
//do some stuff
});
Edit: If you're looking for enter press:
<input id="myTextBox" name="text" type="text">
Then in your js file:
var myTextBox = document.getElementById('myTextBox');
myTextBox.addEventListener('keypress', function(){
if(e.keyCode == 13){//keyCode for enter
//do some stuff
}
});

Use the event onchange. You can do this on HTML:
<input onchange="fncDoThings()">
And your JS file can be like this:
function fncDoThings() {
console.log('hello'); //just an example of things to do inside the function
};

clear text box using JS function in a href on click

I have this function:
<script>
function ClearTextBox(textbox_name) {
$(textbox_name).val("")
}
</script>
that removes values from a text input
i am trying to call it using:
Clear
but its not clearing the text box

You should use Unobtrusive JavaScript .
Try this code.
$('a').on('click',function(){
$('#customercompany1').val("");
});

It seems working fine for me.. but the console shows the following error
Uncaught SyntaxError: Unexpected token )
this is due to the javascript:void(); in your href attribute.
so i changed the mark up to
Clear
<input type="text" id="customercompany1" value="test value" />
and the script as
function ClearTextBox(textboxname) {
$(textboxname).val(" ");
return false;
}
Hope this helps....
DEMO HERE

Write your function like this:
function ClearTextBox(myInput) {
var txtBox = document.getElementById(myInput);
txtBox.value = "";
return false;
}
And write your html like this:
Clear
<input type="text" id="customercompany1" />

Need to see your HTML to be sure, but I'm guessing your text box looks like this :
<input type="text" name="customercompany1"/>
and it needs to look like this :
<input type="text" name="customercompany1" id="customercompany1"/>
The '#' jQuery selector matches on the id attribute, not the name attribute.
(This is true if you have used a textarea rather than an input)

How to use *this* in a javascript onlick function and traverse with jquery

I don't know if this is possible but I'm trying to use this in an onclick javascript function in order to traverse in jquery.
HTML
<input type="text" />
<button onclick="javascript:$.addItem(this)">Add</button>
JS
$.addItem= function(e) {
var n = parseFloat($(e).siblings('input').val());
};
Is this even possible or am I missing something?

There is no point in putting the function in the jQuery object, just declare a regular function.
function addItem(e) {
var n = parseFloat($(e).siblings('input').val());
};
Don't use the javascript: protocol in an event handler attribute. That's used when you put code in an href of a link.
<input type="text" />
<button onclick="addItem(this);">Add</button>
Demo: http://jsfiddle.net/Guffa/q8b4e/

you can use both event and this like this:
html
<input type="text" />
<button onclick="javascript:$.addItem(this,event)">Add</button>
JS:
$.addItem= function(elemnt, evnt) {
alert(evnt);
//var n = parseFloat($(e).siblings('input').val());
};
Jsfiddle

javascript getting the value of a text box

I have this text box here...
<input name="search" type="text" maxlength="512" id="search" class="searchField" autocomplete="off" title="" />
and I also have this submit
<input type="submit" name="btnSearch" value="Search" onclick="location.href='http://www.website.com/search/';" id="btnSearch" class="buttonSearch" />
what I am trying to do is add whatever is in the text box in my
onclick="location.href='http://www.website.com/search/';"
so it would look like this..
onclick="location.href='http://www.website.com/search/what ever the user searches';"
how would I go about doing this, I have been googling my little heart out.

Please avoid mixing JavaScript and HTML. You can remove onclick attribute and replace it with this in plain JavaScript somewhere after the DOM has loaded:
document.getElementById('btnSearch').onclick = function() {
var search = document.getElementById('search').value;
var searchEncoded = encodeURIComponent(search);
window.location.url = "http://www.website.com/search/" + searchEncoded;
}
Also remember about escaping the search box, e.g. using encodeURIComponent(). Here is a working jsfiddle example.

This should work:
onclick="location.href='http://www.website.com/search/'+document.getElementById('search').value;"
But I wouldn't ever write that in one of my project as writing script directly on tags is a bad practice.

Here is a working jsfiddle
I moved the event handler out of the button as it is more maintainable. Also I encode the search query so that it gets to the server properly.
var search = document.getElementById('search');
var submit = document.getElementById('btnSearch');
submit.addEventListener('click', function(e) {
var searchValue = encodeURIComponent(search.value); // encode the search query
window.location.href = 'http://www.website.com/search/' + searchValue ;
});

You can add it to the onclick event like so
document.getEelementById("btnSearch").onclick = function(){
location.href='http://www.website.com/search/' + document.getEelementById("search").value;
}
edit: aaaaand too slow... oh well. At least this is not inline.

You would be better off using the < script> tag for this task. Example:
<input name="search" type="text" maxlength="512" id="search" class="searchField" autocomplete="off" title="" />
...
<input type="submit" name="btnSearch" value="Search" id="btnSearch" class="buttonSearch" />
<script type="text/javascript">
var button= document.getElementById('btnSearch');
button.onclick= function(){
var text= document.getElementById('search').value;
location.href='http://www.website.com/search/'+text;
}
</script>
However, you should try to 'clean' a little the text from the textbox so when you append it to the url you get a valid url. You should trim the text, then search for special characters and escape them, etc.

If input2 empty copy value from input1?

This is my first message here so I hope that newbies also get help :)
My problem is following:
let's start with code first....
javascript:
$(document).ready(function(){
if ($("input#datum2").val() == "")
{
$().click(function(){
$("input#datum2").val($("input#datum1").val());
});
}
});
html:
<form >
<input id="datum1" type="text" />
<input id="datum2" type="text" />
</form>
What I want this script to do is that first checks if input field datum2 is empty. If yes, than copy value from input#datum1. This action is suppose to happen each time user clicks (anywhere on page?)...
When user types something in datum1 and clicks somewhere than this value is copied to datum2. The problem is when user edits datum1 or datum2, than this value is again copied to datum2. Obviously this condition
if ($("input#datum2").val() == "")
works only once.
I'm new to javascript and jquery so I would appreciate for any help.
Thanks in advance!
Cheers,
Ile

Sounds like you'll need to bind to a different event. Blur occurs when an input loses focus, which sounds like what you're after.
$(function() {
var $datum2 = $('#datum2');
$('#datum1').blur(function() {
if(!$datum2.val())
$datum2.val($(this).val());
});
});
Couple of things:
1) $(function() { ... is a nice shortcut to $(document).ready
2) In JavaScript, an empty string evals to false, so its a nice shortcut.

I see the way round are the order of the click event and "if ($("#datum2",..."
HTML:
<form id="myform">
<input id="datum1" type="text" />
<input id="datum2" type="text" />
</form>
Javascript:
$(document).ready(function(){
$().click(function(){
if ($("#datum2", $("#myform")).val() == "") {
$("#datum2", $("#myform").val($("#datum1", $("#myform")).val());
}
});
});

$(document).ready(function(){
var $datum2 = $('#datum2');
$('#datum2').hover(function() {
if(!$datum2.val())
$datum2.val($('#datum1').val());
});
});