We Keep Coding

post form on any input change it contains the input type hidden which changes dynamically

<form id="pricecal">
<input type="text" onchange="calprice()" class="form-control round-corner-fix datepicker" data-provide="datepicker" placeholder="Check in" value="" required />
<input type="text" onchange="calprice()" class="form-control round-corner-fix datepicker" data-provide="datepicker" value="" placeholder="Check Out" required />
<input type="hidden" onchange="calprice()" id="noroom" value="" name="room" />
<input type="hidden" onchange="calprice()" id="noguest" value="" name="guest" />
</form>
my code perfectly works on input text but not on input type hidden
i tried following ways i dont want to loop for every input
function calprice(){
alert('Textarea Change');
}
$(document).on('change', 'form#pricecal input', function(){
alert('Textarea Change');
});
$("form#pricecal input").bind("change", function() {
alert('Textarea Change');
});

As you have bound event on the elements that can be triggered whenever you update your input's value:
$('input[type="hidden"]').trigger('change');
Put this line just after that line of code which causes the value change.

type=hidden
These fields should not be rendered and provide a means for servers to store state information with a form. This will be passed back to the server when the form is submitted, using the name/value pair defined by the corresponding attributes. This is a work around for the statelessness of HTTP. Another approach is to use HTTP "Cookies".
Refer this link

how to hide required pop-up of input in html

hide pop-up of required of input using javascript jsfiddle
try to submit with empty input and see the pop-up, so i don't need to display that pop-up and i want the required to validate.
any help i don't need to display any warning.
<form>
<input type="text" name="name" required="required" value="" />
<input type="submit" name="submit" value="Submit" />

Since this is a HTML5 Event you can prevent the event from triggering the popup and still provide validation (https://developer.mozilla.org/en-US/docs/Web/Events/invalid). A simple event listener will do the job.
To handle focus include an id to that field like so ...
HTML
<input type="text" id="name" name="name" required="required" value="" />
And handle that focus within the return function ...
JS
document.addEventListener('invalid', (function () {
return function (e) {
e.preventDefault();
document.getElementById("name").focus();
};
})(), true);
EDIT
Check it out
http://jsfiddle.net/rz6np/9/

autocomplete="off"
or
autocomplete="nope"
If autocomplete still works on an <input> despite having autocomplete="off", but you can change off to a random string, like nope.
It appears that Chrome now ignores autocomplete="off" unless it is on the <form>-tag.

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 do I correctly control or do something to placeholder on focus of a forms field?

I have a signup form with 3 fields:
Username
Email
Password
On most browsers when a user clicks on a particular field, the placeholder value displayed is blanked out so the user can type and if they type nothing and come out of the field the placeholder text re-appears. Anyway some browsers e.g. chrome don't hide the placeholder text onfocus so I had to write some javascript to take care of this.
I'm quite new to javascript but to me the code I've written to deal with this doesn't seem right. I have a feeling it could be shorter and better.
For each field I have this inside a document ready function:
$("#field_id").focusin(function() {
$(this)[0].placeholder = "";
});
$("#field_id").focusout(function() {
$(this)[0].placeholder = "Enter email";
});
My html:
<p><input class="signupFields" data-validate="true" id="user_username" name="user[username]" placeholder="Username" size="30" type="text" /></p>
<p><input class="signupFields" data-validate="true" id="user_email" name="user[email]" placeholder="Email" size="30" type="text" /> </p>
<p><input class="signupFields" data-validate="true" id="user_password" name="user[password]" placeholder="Password" size="30" type="password" /> </p>
So imagine that times 3 .. Seems like a lot of code for such a simple requirement. Also I really don't like the fact that I'm trying to mimic javascripts document.getElementById. There must be a way I can do this in a more jQuery like way. Not liking the [0].
Can any body give me an example of a cleaner way of doing this exact same thing?
Kind regards

I'd suggest that you don't need to worry about this, but to remove the placeholder text on focus (and to restore the placeholder on blur) I'd advise the following:
$('input').focus(
function(){
$(this).data('placeholder',this.placeholder).removeAttr('placeholder');
}).blur(
function(){
$(this).attr('placeholder',$(this).data('placeholder')).data('placeholder','');
});​
JS Fiddle demo.
The only reason to use the $(this)[0] notation is to 'break out' from the jQuery-fied $(this) object back to the native DOM node. To avoid doing that, it's easier to just this:
$('input').focus(
function(){
this.dataPlaceholder = this.placeholder;
this.removeAttribute('placeholder');
}).blur(
function(){
this.placeholder = this.dataPlaceholder;
this.removeAttribute('dataPlaceholder');
});​
JS Fiddle demo.
References:
blur() (jQuery).
focus() (jQuery).
data() (jQuery).
focus() (jQuery).
removeAttr() (jQuery).
removeAttribute().

assuming your html is like:
​<input id="username" type="text" placeholder="username"/>
​<input id="email" type="text" placeholder="email"/>
​<input id="password" type="text" placeholder="password"/>
your JS could be:
$("input").focusin(function() {
$(this).data('placeholder',this.placeholder);//store the current placeholder
this.placeholder = "";//no need for $(this)[0]
}).focusout(function() {
this.placeholder = $(this).data('placeholder');//retrieve the stored placeholder
});​
this would target all of them with only one bit of code.
Here's a demo: http://jsfiddle.net/JKirchartz/SGZNQ/

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.