We Keep Coding

Way to set maxlength on input based on data in another field of same form in html5?

How can I set the maxlength attribute in my text input field equal to the value the user enters in the number input field in the same form?
<form action="/action_page.php">
<input id="number" type="number" value="20" max="40">
<input type="text" id="username" name="username" maxlength="10"><br><br>
<input type="submit" value="Submit">
</form>
I'm guessing this maybe requires JavaScript?

You can set the maxlength property on the input event.
document.querySelector("#number").addEventListener("input", function(e){
document.querySelector("#username").maxLength = this.value;
});
<form>
<input id="number" type="number" value="20" max="40">
<input type="text" id="username" name="username" maxlength="20"><br><br>
<input type="submit" value="Submit">
</form>

Yes, this requires JavaScript. You would do something like this:
document.querySelector('#number').addEventListener('input', (e) => {
e.target.closest('form').querySelector('[name="username"]').maxLength = e.target.value;
});
JSFiddle: https://jsfiddle.net/63cpv8rk/
Here, we add an event handler for the input event for the element selected by #number. (You should avoid using these ID attributes though... they clutter up the global scope needlessly.)
Then on input, we find the parent form, and then select the input by name. Finally, we set its max length to the value that was just put in our field.

For Validation is it possible to use pattern attribute on key press Event

Here is my code : Codepen
Without any script, Validation Error message show on Form submit
<form>
<input type="text" name="text1" placeholder="min-8, max-16, a-z, A-Z" pattern="^[a-zA-Z]{8,16}$" required>
<input type="submit">
</form>
Can we able to show Validation Error message on key press with small script before form submit....
So for i have tried this, but no use
HTML
<form>
<input type="text" name="text2" class="numberValid" placeholder="min-4, max-4, 0-9" pattern="^[0-9]{4}$" required>
<input type="submit">
</form>
SCRIPT
$('.numberValid').on('keypress', function () {
this.setCustomValidity('');
});
Thanks in advance

You can test input value on every keyup event (fired after the character has been added to input, keypress is fired before...).
Or as pointed out in comment, you may use the more suited input event fired when the value of the input is changed.
$('document').ready(function() {
$('.numberValid').on('input', function() {
re = new RegExp(this.pattern);
str = $(this).val();
$('label').toggle(!re.test(str));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<input type="text" name="text2" class="numberValid" placeholder="min-4, max-4, 0-9" pattern="^[0-9]{4}$" required>
<label for="text2">Please enter 4 digits</label>
<br/>
<input type="submit">
</form>
To display error only on first keypress, just hide the label when DOM is loaded:
$('document').ready(function() {
$('label').hide();
$('.numberValid').on('input', function() {
re = new RegExp(this.pattern);
str = $(this).val();
$('label').toggle(!re.test(str));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<input type="text" name="text2" class="numberValid" placeholder="min-4, max-4, 0-9" pattern="^[0-9]{4}$" required>
<label for="text2">Please enter 4 digits</label>
<br/>
<input type="submit">
</form>

How Do I pass a value in a input box, to another input box

I am trying to pass values between boxes.
So, When a User types inside of the first text box:
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="submit" name="design1" id="butval" value="Choose Design"></input>
Then they click the 'choose design' button, and what they typed in, gets passed to another
input text box on the same page.
this is the second input box i want to pass it to.
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
Any help would be much appreciated
thank you

Live Demo
Instead of a submit type input use a button type input.
HTML
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="button" name="design1" id="butval" value="Choose Design"></input>
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
JS
window.onload = function(){
document.getElementById('butval').onclick = function(){
document.getElementById('billing_last_name').value = document.getElementById('valbox').value;
}
};

First add a clicklistener for the submit button and inside that callback pass the text through the elements
document.getElementById("butval").addEventListener("click", function(event){
var text = document.getElementById("valbox").value;
document.getElementById("billing_last_name").value = text;
event.preventDefault();
return false;
});

this is by far easiest in jquery given
<input type="text" placeholder="Your personal message" id="valbox"></input>
<input type="submit" name="design1" id="butval" value="Choose Design"></input>
<input type="text" class="input-text" name="billing_last_name" id="billing_last_name" placeholder="" value="">
use a simple
$("#butval").click(function(event){
$("#billing_last_name").html("<p>"+$("#valbox").html()+"</p>");
event.preventDefault();
});
but better change type="submit" to type="button" then you can remove the essentially unnecessary line event.preventDefault();

binding on change event to group of input fields in jquery

I have three input fields as below:
<input type="text" name="address" id="address"/>
<input type="text" name="city" id="city"/>
<input type="text" name="country" id="country"/>
How can i add onChange event to all of these fields at once something like this:
$("select the elements with id address,city,country").bind("change", function() {
//do something
});

use , in id selector as #Rory said
OR
add a class to all this and call change function
<input type="text" name="address" id="address" class="className"/>
<input type="text" name="city" id="city" class="className"/>
<input type="text" name="country" id="country" class="className"/>
$('.className').bind("change", function(){
//your stuff
});
HOWEVER
since it is an input field.. i recommend you to use..keyup(), using change you have to click out of the text box to make it fire.
$('.className').keyup(function(){
//your stuff
});

You can use , as you would in CSS to combine selectors. Try this:
$("#address, #city, #country").bind("change", function() {
//do something
});
Alternatively you can add a class to each element and select that.

JQuery form auto submit clicking out side the div

I want to auto-sumbit my form once user clicks out side the div of the form.
I tried the following but it submits within clicking within the div.
<div id="formDiv">
<form id="search">
<input id="target" type="text" value="Field 1" />
<input type="text" value="Field 2" />
</form>
</div>
// auto submit
jQuery('#formDiv').live('blur',function() {
$(this).children('form').submit();
});

Off-hand, the only thing I can suggest it so attach to the click event of the body, then also attach to the div's click event and e.preventDefault() to halt it. Alternatively, you could bind to each form element's focus/blur event with a .delay. If they lose focus from one element and aren't in another, submit the form.
EDIT
See if this is what you're looking for:
Javascript:
var queueSubmit;
$('#sample input').each(function(i,e){
$(this).bind('focus',function(){
clearTimeout(queueSubmit);
});
$(this).bind('blur',function(){
queueSubmit = setTimeout(function(){ $('#sample').submit(); }, 1000);
});
});
$('#sample').bind('submit',function(){
clearTimeout(queueSubmit);
alert('Pseudo-Submitted!');
return false;
});
Sample HTML
<div id="main">
<p> </p>
<div id="main-form">
<form id="sample" method="POST" target="">
<fieldset>
<legend>My Sample Form</legend>
First Name: <input type="text" id="first_name" /><br />
Last Name: <input type="text" id="last_name" /><br />
Telephone: <input type="text" id="telephone" /><br />
<input type="submit" value="Submit" />
</fieldset>
</form>
</div>
<p> </p>
</div>
Working Example Here

I would do this by putting a click handler on the body and seeing if the event target (event.target) is a descendent element of #formDiv:
$('#search').one('focus', function() { // the first time that a field in #search receives focus
var $formDiv = $('#formDiv');
$(document.body).click(function(e) { // bind a click handler to the document body
if (!$formDiv.has(e.target).length) { // if the target element is not within formDiv
$('#search').submit(); // submit the form
}
});
});