We Keep Coding

how to change default input tooltip text that shows in required input

There is a tooltip when my mouse is over the textbox : "please fill out this field" is there a way too change this text ?
if you hover on this field you can see the massage :
<input type="text" name="yourname" required/>

This could be easily done using the title HTML attribute.
title Attribute
The title attribute belongs to the Global Attribute. It allows to specify extra information about an element. This information is shown as a tooptip text when the mouse moves over the element.
<input type="text" name="yourname" required title="You changed it !!"/>
If its something related to the text showed after validation. For that you could use the function setCustomValidity along with an event Handler .
Here we would use the event Handler oninvalid.
Your code could be written as :
<input type="text" name="yourname" required oninvalid="this.setCustomValidity('Yo! You changed it')" oniput="this.setCustomValidity('Yo! You changed it')" title="test"/>

you can add a title on your input
<input title="test" type="text" name="yourname" required/>

Javascript - Why is input value missing a character?

I am trying to get this script to autofill another field while the original field is being filled in. But the second field loses the last character of its value. Any ideas why?
Here is the code...
<input type="text" class="first" placeholder="type here">
<input type="text" class="second" placeholder="here it is the reuslt">
$(".first").on('keydown',function(){
$(".second").val($(this).val());
});
http://jsfiddle.net/fmdwv/1/

The keydown event fires before the value is updated, so when you read it, you get the value before it has been changed by the key being pressed.
Use the input event instead (that will also fire after a paste).
$(".first").on('input', function() {
$(".second").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="first" placeholder="type here">
<input type="text" class="second" placeholder="here it is the reuslt">

The onkeydown event occurs when the user is pressing a key
The onkeyup event occurs when the user releases a key
The onkeypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC) in all browsers. To detect only whether the user has pressed a key, use the onkeydown event instead, because it works for all keys.
in your case onkeydown it execute function first .so on execution values inside input is not updated with pressed key value so it fires before value inserted
checkout this example
$(".first").on('keyup',function(){
$(".second").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="first" placeholder="type here">
<input type="text" class="second" placeholder="here it is the reuslt">

AJAX script trigger firing on 2 separate input fields

I"m new to AJAX requests and having these fire when a form input field is modified. I've managed to get this working well with a date input field, but have just added a 2nd form to the page which also has a date input field and now the script is firing when both fields are modified. I need to disable this so it doesn't fire on the 2nd input field.
Here's the first input field:
<td id="57944"><input type="text" id="985124" class="form-control datepicker" autocomplete="off" placeholder="Ship Date" data-date-format="dd/mm/yyyy" name="dateShipped" value=""></td>
which fires this script when the date field is modified:
$(document).ready(function() {
$(".form-control.datepicker").change(function(){
I've just added this 2nd input field:
<td><input type="text" class="form-control datepicker" name="dateReceived" id="dateSigned" data-date-format="dd/mm/yyyy" placeholder="Date Signed"></td>
which is also firing the same script. I can see that both have:
class="form-control datepicker"
which is presumably the reason the script is firing for both, but I'm not sure how to change the 2nd input so that it won't fire the script (or change the $(".form-control.datepicker").change(function(){ part of the script so that it only fires when the first input is modified).

you can have a look at the eq selector .form-control.datepicker:eq(0)
that will only select the first element.

You can also try with name selector
$("input[name='dateShipped']").
change(function(){});

If you are using event's for same class the event will trigger for both, either you can use
$(".form-control.datepicker:eq(0)").change(function(){});
or
$(".form-control.datepicker:first-child").change(function(){});

I would recommend adding a class to the date fields for which you want to trigger the event. Then, make your class selector more specific when you wire up the event. This will make your code more scalable than using :eq() since you won't have to figure out which index is which control when you go to add more inputs.
<td id="57944"><input type="text" id="985124" class="form-control datepicker fire-event" autocomplete="off" placeholder="Ship Date" data-date-format="dd/mm/yyyy" name="dateShipped" value=""></td>
$(document).ready(function() {
$(".form-control.datepicker.fire-event").change(function(event){
// handle event
});
});
Conversely, you could use the .not() selector function if you would rather add a specific class to items you don't want firing a change event:
<td id="57944"><input type="text" id="985124" class="form-control datepicker no-change-event" autocomplete="off" placeholder="Ship Date" data-date-format="dd/mm/yyyy" name="dateShipped" value=""></td>
$(document).ready(function() {
$(".form-control.datepicker").not(".no-change-event").change(function(event){
// handle event
});
});

Refresh value in text field with JavaScript/jquery

I have a function that calculate price for a product. I'm not JavaScript developer so my knowledge is very limited.
By changing the value in the text field script calculate price for product.
<input type="text" value="" name="options[22]" class="input-text"
onfocus="opConfig.reloadPrice()">
Problem is that the script triggers only if the following is done:
insert value into the textfield
click somewhere outside the textfield
click back into the text field
All I need is a button saying refresh that by clicking it will have functionality of step 2 and step above.
I'm not sure if I explained it properly so if there is any more information required to resolve this issue please let me know.
Here is the link to the site.
http://www.floorstodoors.mldemo.co.uk/spotlight/oak-value-lacquered-3-strip.html
The field im trying to amend/add refresh button is Enter Square Metre

You'd add your event to a button, and retrieve a reference to your input by assigning an ID:
<input type="text" value="" name="options[22]" id="price" class="input-text" />
<input type="button" value="Refresh" onclick="reloadPrice();" />
function reloadPrice() {
var price = "0.00"; // set your price here
// get a ref to your element and assign value
var elem = document.getElementById("price");
elem.value = price;
}

I'm not sure I fully understand you, but is this what you need?
<input type="text" value="" name="options[22]" class="input-text">
<input type="button" onclick="opConfig.reloadPrice()" value="Refresh" />
A button with an click-event listener, so that when you click the refresh-button the opConfig.reloadPrice() method gets executed.
Edit based on comment:
I'm not sure what JavaScript library you are using, but you have these two lines in you code that seems to add event-listeners to the input with id qty.
$('qty').observe('focus',function(){
$('qty').setValue($('qty').getValue().replace(/[^0-9]/g,''));
});
$('qty').observe('focus',this.getFromQties.bind(this))
They are listening for the focus event, thus only triggers when your input field gains focus.
If you modify those to listen for the keyup event instead, I believe it will work better. Without being familiar with the framework, I guess the only thing to change would be this:
$('qty').observe('keyup',function(){
$('qty').setValue($('qty').getValue().replace(/[^0-9]/g,''));
});
$('qty').observe('keyup',this.getFromQties.bind(this))

Use onchange or onblur instead of onfocus!

use onchange. This will activate anytime the value changes:
<input type="text" value="" name="options[22]" class="input-text" onchange="opConfig.reloadPrice()">

First: this is JavaScript and not Java - so you have to be a javascript and not a java developer.
to solve your problem you can make a new button with a onclick attribute and execute your function there which you have in your onfocus attribute in the text-field.
or you can take another event - like onchange or onblur for instance..
<input type="text" onchange="..yourfunctionhere...">
http://www.w3schools.com/js/js_events.asp

All I need is a button saying refresh that by clicking it will have functionality
For that you need a button with onclick listener,
do the below things.
<input type="button" value="Refresh" onclick="opConfig.reloadPrice();" />
<input type="text" value="" name="options[22]" class="input-text"/>

How to skip fields using javascript?

I have a form like this:
<form name="mine">
<input type=text name=one>
<input type=text name=two>
<input type=text name=three>
</form>
When user types a value in 'one', I sometimes want to skip the field 'two', depending on what he typed. For example, if user types '123' and uses Tab to move to next field, I want to skip it and go to field three.
I tried to use OnBlur and OnEnter, without success.
Try 1:
<form name="mine">
<input type=text name=one onBlur="if (document.mine.one.value='123') document.three.focus();>
<input type=text name=two>
<input type=text name=three>
</form>
Try 2:
<form name="mine">
<input type=text name=one>
<input type=text name=two onEnter="if (document.mine.one.value='123') document.three.focus();>
<input type=text name=three>
</form>
but none of these works. Looks like the browser doesn't allow you to mess with focus while the focus is changing.
BTW, all this tried with Firefox on Linux.

Try to attach tabindex attribute to your elements and then programmaticaly (in javaScript change it):
<INPUT tabindex="3" type="submit" name="mySubmit">

You could use the onfocus event on field two, which will be called when it receives focus. At that point, field 1's value should be updated and you can perform your check then.

If you used the method you describe, and they worked, the focus would also change when the user clicks on the field, instead of tabbing to it. I can guarantee you that this would result in a frustrated user. (Why exactly it doesn't work is beyond me.)
Instead, as said before, change the tabindex of the appropriate fields as soon as the content of field one changes.

<form name="mine">
<input type="text" name="one" onkeypress="if (mine.one.value == '123') mine.three.focus();" />
<input type="text" name="two">
<input type="text" name="three">
</form>

Try onkeypress instead of onblur. Also, on the onfocus of field two is where you should be sending to three. I'm assuming you don't want them typing in two if one is 123 so you can just check that on two's onfocus and send on to three.