We Keep Coding

jQuery trigger event on multiple fields with the same classname

I have multiple input fields that have the same class name, such as:
<input type="text" class="input-name" value="John">
<input type="text" class="input-name" value="Maria">
When someone presses ENTER in any field, the text !!! is automatically appended to the value. This works great.
$(document).on('keypress', '.input-name', function(event)
{
if (event.which != 13)
return;
$(this).val($(this).val() + '!!!');
});
The problem is that I'd like to press a button and change the value of all fields, by simulating the ENTER keypress event and for some reason, it only triggers in the first input!
This only triggers in the first input:
var e = $.Event('keypress', { which: 13 });
$('.input-name').trigger(e);
This also only triggers in the first input:
$('.input-name').each(function(i, input)
{
$(input).trigger(e);
});
You can see the problem in this JSFiddle.

Define jquery Event object inside the each function callback as follows.
$('.input-name').each(function (i, input) {
var e = $.Event('keypress', {
which: 13
});
$(input).trigger(e);
});

I would just make a function that does the work and not deal with event handlers
//function alterInps(inps) {
// inps.val(function () { return this.value + "!!!"; });
//}
function alterInps(inps) {
var re = /!!!$/;
inps.val(function () {
return this.value + (re.test(this.value) ? '' : '!!!');
});
}
$(document).on('keypress', '.input-name', function(event) {
if (event.which != 13) return;
alterInps($(this));
});
$('button').on("click", function () {
alterInps($('.input-name'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="input-name" value="John">
<input type="text" class="input-name" value="Maria">
<button type="buton">All</button>

$('.input-name').on('keypress', function(event)
{
if (event.which != 13)
return;
$(this).val($(this).val() + '!!!');
});
$(document).on('click', '#btn-submit', function()
{
var e = $.Event('keypress', { which: 13 });
//$('.input-name').trigger(e);
$('.input-name').each(function(i, input)
{
$(input).trigger(e);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn-submit">
Click me
</button>
<input type="text" class="input-name" value="Maria">
<input type="text" class="input-name" value="John">

showing the length of a input

How do I enable input2 if enable 1 has input within it (basically re-enabling it), I'm still a beginner and have no idea to do this.
<form id="form1">
<input type="text" id="text1" onkeyup="valid()">
<input type="text" id="text2" disabled="disabled">
<script language="javascript">
function valid() {
var firstTag = document.getElementById("text1").length;
var min = 1;
if (firstTag > min)
//if the text entered is longer than 1 alert to screen
{
//enable the text2 tag
}
}
//once input from text1 is entered launch this function
</script>
</form>

if i understand your question correctly, you want to enable the second input as long as the first input have value in it?
then use dom to change the disabled state of that input
if(firstTag > min)
//if the text entered is longer than 1 alert to screen
{
//enable the text2 tag
document.getElementById("text2").disabled = false;
}

Please try this code :
var text1 = document.getElementById("text1");
text1.onchange = function () {
if (this.value != "" || this.value.length > 0) {
document.getElementById("text2").disabled = false;
} else {
document.getElementById("text2").disabled = true;
}
}
<input type="text" id="text1">
<input type="text" id="text2" disabled="disabled">

I think you should use .value to get the value. And, then test its .length. That is firstTag should be:
var firstTag = document.getElementById("text1").value.length;
And, the complete function should be:
function valid() {
var min = 1;
var firstTag = document.getElementById("text1");
var secondTag = document.getElementById("text2");
if (firstTag.length > min) {
secondTag.disabled = false
} else {
secondTag.disabled = true
}
}
Let me know if that works.

You can use the .disabled property of the second element. It is a boolean property (true/false).
Also note that you need to use .value to retrieve the text of an input element.
Demo:
function valid() {
var text = document.getElementById("text1").value;
var minLength = 1;
document.getElementById("text2").disabled = text.length < minLength;
}
valid(); // run it at least once on start
<input type="text" id="text1" onkeyup="valid()">
<input type="text" id="text2">

I would just change #Korat code event to keyup like this:
<div>
<input type="text" id="in1" onkeyup="enablesecond()";/>
<input type="text" id="in2" disabled="true"/>
</div>
<script>
var text1 = document.getElementById("in1");
text1.onkeyup = function () {
if (this.value != "" || this.value.length > 0) {
document.getElementById("in2").disabled = false;
} else {
document.getElementById("in2").disabled = true;
}
}
</script>

I tried to create my own so that I could automate this for more than just two inputs although the output is always set to null, is it that I cannot give text2's id from text1?
<div id="content">
<form id="form1">
<input type="text" id="text1" onkeyup="valid(this.id,text2)">
<input type="text" id="text2" disabled="disabled">
<script language ="javascript">
function valid(firstID,secondID){
var firstTag = document.getElementById(firstID).value.length;
var min = 0;
if(firstTag > min)
//if the text entered is longer than 1 alert to screen
{
document.getElementById(secondID).disabled = false;
}
if(firstTag == 0){
document.getElementById(secondID).disabled = true;
}
}
//once input from text1 is entered launch this function
</script>
</form>

First, you have to correct your code "document.getElementById("text1").length" to "document.getElementById("text1").value.length".
Second, there are two ways you can remove disabled property.
1) Jquery - $('#text2').prop('disabled', false);
2) Javascript - document.getElementById("text2").disabled = false;
Below is the example using javascript,
function valid() {
var firstTag = document.getElementById("text1").value.length;
var min = 1;
if (firstTag > min) {
document.getElementById("text2").disabled = false;
}
else
{
document.getElementById("text2").disabled = true;
}
}
<input type="text" id="text1" onkeyup="valid()">
<input type="text" id="text2" disabled="disabled">

If I understand you correctly, what you are asking is how to remove the disabled attribute (enable) from the second input when more than 1 character has been entered into the first input field.
You can to use the oninput event. This will call your function every time a new character is added to the first input field. Then you just need to set the second input field's disabled attribute to false.
Here is a working example.
Run this example at Repl.it
<!DOCTYPE html>
<html>
<body>
<!-- Call enableInput2 on input event -->
<input id="input1" oninput="enableInput2()">
<input id="input2" disabled>
<script>
function enableInput2() {
// get the text from the input1 field
var input1 = document.getElementById("input1").value;
if (input1.length > 1) {
// enable input2 by setting disabled attribute to 'false'
document.getElementById("input2").disabled = false;
} else {
// disable input2 once there is 1 or less characters in input1
document.getElementById("input2").disabled = true;
}
}
</script>
</body>
</html>
NOTE: It is better practice to use addEventListener instead of putting event handlers (e.g. onclick, oninput, etc.) directly into HTML.

jquery focus and auto submit after last input is filled

I have two situation with jquery,
I have two text box(name, age), now what i need to do is auto focus the name onload while the age is disabled, once user key in an input on name, it become disabled and switch with age textbox(enable and focus). once the age textbox is filled, the jquery will auto submit it w/o any button
now first things is, I am able to disable and enable the textbox, but when i put document.name.focus() its not working, I mean, the focus is not working.second things is, i manage to do the auto submit using this code
$(document).ready(function(){
$('[name="age"]').blur(function(){
if(this.value != ''){
document.form.submit();
}
});
});
so after the last textbox is filled, it will auto submit, but the problem is, I keep receive this error "Notice: Undefined index: name in C:\location" whenever i run it.
here is my code :
<script>
$(document).ready(function(){
$('[name="age"]').blur(function(){
if(this.value != ''){
document.form.submit();
}
});
});
$(document).ready(function() {
$('[name="name"]').blur(function() {
var that = $('[name="age"]')[0];
if (this.value != '') {
this.focus();
this.disabled = true;
that.disabled = false;
}
});
});
function focusName(){
var count = document.form.name.value.length + 1;
if(count <= 8){
document.form.name.focus();
}else{
document.form.age.focus();
}
}
function focusAge(){
var count = document.form.age.value.length + 1;
if(count <= 10){
document.form.age.focus()
}else{
document.form.submit();
}
}
</script>
<fieldset>
<legend>Information </legend>
<form action="receive.php" method="post" name="form">
name : <input type="text" name="name" onKeyUp="focusName();" maxlength="8"><br>
Age : <input typr="text" name="age" disabled onKeyUp="focusAge();" maxlength="3"><br>
<!--input type="submit"-->
</form>
</fieldset>
please help!!.thanks.

Few tips : add some id on your textbox
Example :
name : <input type="text" id="name" name="name" onKeyUp="focusName();" maxlength="8"><br>
Age : <input typr="text" id="age" name="age" disabled onKeyUp="focusAge();" maxlength="3">
Focus the name onload (with JQuery):
$(document).ready(function(){$("#name").focus();})
Auto submit your form :
$("form :input").focusout(function(){
$(this).each(function(){
if($(this).val()=="" )
{
return false;
}
});
$("form").submit();
});

Onblur and Onfocus in input field that can't be edited

I have an input field like this:
<input class="" type="text" id="Name_11_1" name="Name" value="Your name:">
And want to change it into this:
<input class="" type="text" id="Name_11_1" name="Name" value="Your name:" onblur="this.value = this.value || this.defaultValue;" onfocus="this.value == this.defaultValue && (this.value = '');"Your name:">
The problem is that I CAN'T edit the input field directly and have to use an external JavaScript code.

With jQuery:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function() {
$('#Name_11_1').blur(function() {
$(this).val(YOUR_EXPR);
});
$('#Name_11_1').focus(function() {
$(this).val(YOUR_EXPR);
});
});
</script>

First remove the existing event handlers and then attach your own:
var obj = document.getElementById('Name_11_1');
obj.removeAttribute('onfocus');
obj.removeAttribute('onblur');
obj.addEventListener('blur', function() {
// your js code for blur event
});
obj.addEventListener('focus', function() {
// your js code for focus event
});

If the browser understands the placeholder attribute on input tags, you can use that:
<input id="foo" name="foo" placeholder="Your name">
You can then add JavaScript to provide a fallback for other browsers:
if (!'placeholder' in document.createElement('input')) {
$('#foo').on('focus', function() {
// your code
}).on('blur', function() {
// your code
});
}
UPDATE: forgot that the OP can't edit the input tag directly. In that case, the code snippet can be modified to something like this:
var elem = $('#Name_11_1'),
defaultValue = 'Your name';
if ('placeholder' in document.createElement('input')) {
elem.attr('placeholder', defaultValue);
} else {
elem.on('focus', function() {
// your code
}).on('blur', function() {
// your code
});
}

Adding class to input when default value changed

I have an input field that has a default value added with JavaScript
<input type="text" class="input-text required-entry validate-value-eg" id="city_field" name="city" onfocus="if(this.value=='e.g. Bristol, Yorkshire') this.value='';" onblur="if(this.value=='') this.value='e.g. Bristol, Yorkshire';" value="e.g. Bristol, Yorkshire">
Whenever visitor click on this field the default value will dissipated and restore if not replaced by other value.
What I am trying to achieve is to add a class only if value has been changed from default?
Any help much appreciated,
Thanks
Dom

It is always a better practice to define your events in the script section or a separate .js file.
You don't need to handle that in a .change() event . You can check that in the .blur() event itself..
HTML
<input type="text" class="input-text required-entry validate-value-eg"
id="city_field" name="city" value="e.g. Bristol, Yorkshire">
Pure Javascript
var elem = document.getElementById('city_field');
elem.addEventListener('focus', function() {
if (this.value == 'e.g. Bristol, Yorkshire') {
this.value = '';
}
});
elem.addEventListener('blur', function() {
if (this.value == 'e.g. Bristol, Yorkshire') {
RemoveClass(this, "newClass")
}
else if (this.value == '') {
this.value = 'e.g. Bristol, Yorkshire';
RemoveClass(this, "newClass")
}
else {
this.className += " newClass";
}
});
function RemoveClass(elem, newClass) {
elem.className = elem.className.replace(/(?:^|\s)newClass(?!\S)/g, '')
}​
Javascript Fiddle
But you can achieve this with a loss lesser code by using other javascript frameworks.
This will make your life a lot easier but it is always good if you start out with javascript.
jQuery
$(function() {
var $elem = $('#city_field');
$elem.val('e.g.Bristol, Yorkshire'); // Default value
$elem.on('focus', function() { // Focus event
if (this.value == 'e.g.Bristol, Yorkshire') {
this.value = '';
}
});
$elem.on('blur', function() { // Focus event
if (this.value == 'e.g.Bristol, Yorkshire') {
$(this).removeClass("newClass");
}
else if (this.value == '') {
this.value = 'e.g.Bristol, Yorkshire';
$(this).removeClass("newClass");
}
else {
$(this).addClass("newClass");
}
});
});​
jQuery Fiddle

Add an onchange handler to your input
<input type="text" class="input-text required-entry validate-value-eg"
id="city_field" name="city"
onchange="addClass(this)"
onfocus="if(this.value=='e.g. Bristol, Yorkshire') this.value='';"
onblur="if(this.value=='') this.value='e.g. Bristol, Yorkshire';"
value="e.g. Bristol, Yorkshire">
<script>
function addClass(input) // 'this' in onChange argument is the input element
{
if( input.value=='e.g. Bristol, Yorkshire')
{
$(input).removeClass("not_default_input_class");
$(input).addClass("default_input_class");
}
else
{
$(input).removeClass("default_input_class");
$(input).addClass("not_default_input_class");
}
}
</script>
EDIT: Added use of jQuery to add/remove the CSS classes

<script>
function addClass(input) // 'this' in onChange argument is the input element
{
input.className = input.value==input.defaultValue?
"default_input_class" : "not_default_input_class"
}
</script>