Develop Reference

Trigger change or input when javascript changes input value

I'm working in a little project with JQuery, and i having a problem removing error classes from html elements.
I'm using $('selector').on('input') to get the event and remove the input class, my problem is when the field is generated with JavaScript;
Example
$('#one').on('input',function(){
$('#two').val( $('#one').val() );
});
$(':input').on('input', function ()
{
if ($(this).hasClass('example'))
{
$(this).removeClass('example');
}
});
.example
{
color: orange;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Normal Case</h2>
<input type="text" class="example">
<h2>Problem</h2>
<label for="one">#ONE</label>
<input type="text" class="example" id="one">
<br/>
<label for="two">#TWO</label>
<input type="text" class="example" readonly="readonly" id="two">
In this case, i change #two value when #one changes, #one remove .example but #two dont
I need to remove .example class from #two input
EDIT: I want to do it in a generic way because i have a LOT of this cases in my project
Is some way to trigger that kind of changes?
Thanks so much!

Maybe the code I wrote below help you. It's not perfect but it's a good point of start.
I added a custom attribute that I called data-group for the inputs that are of the same "group".
I also modified the listener for input in a way that from a single listener function, you will have all inputs listening.
Check if this helps you.
$('.example').on('input',function(){
var value = this.value;
var groupName = $(this).attr('data-group');
var groupElems = $("[data-group='"+groupName+"']");
groupElems.removeClass('example');
groupElems.val(value);
});
.example
{
color: orange;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Problem</h2>
<label for="one">#ONE</label>
<input type="text" class="example" data-group="group1" id="one">
<br/>
<label for="two">#TWO</label>
<input type="text" class="example" data-group="group1" readonly="readonly" id="two">
<h2>Problem</h2>
<label for="three">#THREE</label>
<input type="text" class="example" data-group="group2" id="three">
<br/>
<label for="four">#FOUR</label>
<input type="text" class="example" data-group="group2" readonly="readonly" id="four">
<h2>Problem</h2>
<label for="five">#FIVE</label>
<input type="text" class="example" data-group="group3" id="five">
<br/>
<label for="six">#SIX</label>
<input type="text" class="example" data-group="group3" readonly="readonly" id="six">

Inside the true branch of your if statement, use the .nextAll() method, along with a selector to find the next input following this. That way, when the first input has the class removed, the next input that follows it will have its class removed as well.
Also, change your input event setup so that it is set to work on input elements of a certain class in the first place and give the first of each set of inputs that class.
$('#one').on('input',function(){
$('#two').val( $('#one').val() );
});
// Only when an input with the "input" class gets input
$('input.input').on('input', function () {
if ($(this).hasClass('input')) {
$(this).removeClass('input');
// Find the next input sibling that follows "this"
$(this).nextAll("input").removeClass("input");
}
});
.input {
color: orange;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Normal Case</h2>
<input type="text" class="input">
<h2>Problem</h2>
<label for="one">#ONE</label>
<input type="text" class="input" id="one">
<br>
<label for="two">#TWO</label>
<input type="text" class="input" readonly="readonly" id="two">

You can check, if the current field is #one using .is() :
$(':input').on('input', function () {
if(($(this).is("#one"))) {
if ($('#two').hasClass('example'))
{
$('#two').removeClass('example');
}
}
if ($(this).hasClass('example'))
{
$(this).removeClass('example');
}
});

How can I add a default text in my HTML input text

How can I add a default text in my HTML text just like in the image below
Right now this is my html codes:
<input type="text" class="form-control input-sm" name="guardian_officeno" placeholder="Office #" required pattern="[0-9].\d{8}|\d{11}" title="Only Numbers are accepted and must be 10 or 11 numbers"></td>
</div>
EDIT:
How can I add text that cannot be erased

As per the recent update of your question, you need to add readonly attribute to your input tag. If you are trying to disable part input, which is not possible, refer to last section of my answer.
<input type="text" value="SOME_DEFAULT_VALUE" readonly>
Adding readonly will prevent users to change the text in your input box.
Note: Don't rely on readonly as it can be easily overridden using
dev tools. Make sure you do have server side checks for the same.
Before you updated your question
Add value attribute to your input tag if you want some default text in the input box
<input type="text" value="Default Val">
If you are talking about the prefix i.e country specific STD code like +63, then you can do is split up your input tags, and set a default value in the first tag and let your user write the number in the other tag.

Edit, with the tag value:
https://www.w3schools.com/tags/att_input_value.asp
<input type="text" class="form-control input-sm" name="guardian_officeno" placeholder="Office #" required pattern="[0-9].\d{8}|\d{11}" title="Only Numbers are accepted and must be 10 or 11 numbers" value="default text"></td>
</div>

you mean you want to add a default text in "input" tag?
you need to add "value" attribute in there!
<input type="text" class="form-control input-sm" name="guardian_officeno" placeholder="Office #" required pattern="[0-9].\d{8}|\d{11}" title="Only Numbers are accepted and must be 10 or 11 numbers" value="put your default text right here"></td>

input tag not support for before attribute in css, but you can using wrapper by other tags. look for example below:
html + css
<div class="input-row">
Phone number:<span id="phoneNumber"><input type="text" name="phoneNumber" value="" placeholder="1234567890"></span>
</div>
<style>
.input-row {
display: inline-block;
line-height: 1;
}
span#phoneNumber::before {
content: '+63';
display: inline-block;
border: 1px solid #ccc;
padding: 1px;
line-height: 20px;
margin: 0px;
}
input[name='phoneNumber']{
line-height: 18px;
border: 1px solid #ccc;
margin: 0px;
padding: 2px;
}
</style>

Using bootstrap, wrapping input text element in label causes input text to bold and not take up full width

I am trying to wrap my text input with a label. I have some pickers on my form, and wrapping them in a label enables me to click on the label and activate the picker. However, when I try this with the text box it breaks the form. If I choose not to wrap the text boxes, the spacing between the label and the text box is different than the wrapped elements.
This doesn't work:
<div class="form-group">
<label>
Title:
<input type="text" class="form-control" data-bind="value: title" />
</label>
</div>
This works:
<div class="form-group">
<label>
Date:
<div class="input-group">
<input type="text" class="form-control" placeholder="mm/dd/yy" data-provide="datepicker" data-bind="value :date" id="Date" />
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</label>
</div>
Also, the text inside the text inputs should not be bold.

You want to update your css, changing your label's to either display as block, or set their width to 100%. Then you also want to have input's inside labels set to a font-weight of normal.
label {
display:block;
}
label input {
font-weight:normal
}
https://jsfiddle.net/partypete25/95ygubwx/

As an alternative, don't need to wrap elements for activation, you can just use the for attribute:
<label for="title">Title</label>
<input id="title" type="text" class="form-control" data-bind="value: title" />
If you don't want this, then you need to understand cascading styles.

You don't need to wrap input inside label. for attribute of label element is doing the same thing you want to achieve.The correct way to create form control in bootstrap is:
<div class="form-group">
<label for="title">Title:</label>
<input type="text" class="form-control" data-bind="value: title" id="title" />
</div>
Why input not taking full-width and text being bold: Following is the label css applied by bootstrap library.
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
}
In your case, if you wrap input inside label, input is inhering the font-weight: 700 px; from it's parent(label) and hence bold.
And the parent label's max-width: 100% is restricting the input width. If it could have width: 100% than, input would take full width. There is difference between max-width and width.

Input field appear after selecting a check box. HTML

I have a Twitter Bootstrap form that has 6 vertical check boxes. I need to have an input form field each time they select a checkbox. It could be in the form of a popup or maybe something that appears out to the right of the checkbox. I figure this is some kind of javascript function but I have no idea how to do so. Any suggestions would be greatly appreciated. Each textbox if selected should have a field that pops up asking them for how many years experience they have in this certain field. This will info will be collected via $_POST variables. So each checkbox popup should have its own unique name so i can post it.
<div class="form-group">
<label class="col-md-4 control-label" for="positionsought">Position Sought</label>
<div class="col-md-4">
<div class="checkbox">
<label for="positionsought-0">
<input type="checkbox" name="positionsought" id="positionsought-0" value="Cutting">
Cutting
</label>
</div>
<div class="checkbox">
<label for="positionsought-1">
<input type="checkbox" name="positionsought" id="positionsought-1" value="Sewing">
Sewing
</label>
</div>
<div class="checkbox">
<label for="positionsought-2">
<input type="checkbox" name="positionsought" id="positionsought-2" value="Upholstery">
Upholstery
</label>
</div>
<div class="checkbox">
<label for="positionsought-3">
<input type="checkbox" name="positionsought" id="positionsought-3" value="Frame Department">
Frame Department
</label>
</div>
<div class="checkbox">
<label for="positionsought-4">
<input type="checkbox" name="positionsought" id="positionsought-4" value="Mill Room">
Mill Room
</label>
</div>
<div class="checkbox">
<label for="positionsought-5">
<input type="checkbox" name="positionsought" id="positionsought-5" value="Cushion">
Cushion
</label>
</div>
<div class="checkbox">
<label for="positionsought-6">
<input type="checkbox" name="positionsought" id="positionsought-6" value="Any">
Any
</label>
</div>
</div>
</div>

Although you already have found an answer, I believe that this would work better for your situation since you say you will have 6 checkboxes. This dynamically creates input fields for each checkbox by their names and removes them when the checkbox is unchecked.
First add this function to each checkbox onclick="dynInput(this);"
<input type="checkbox" name="check1" onclick="dynInput(this);" />
and add this to wherever you would like the inputs to display.
<p id="insertinputs"></p>
Then simply add this javascript function to your head.
<script type="text/javascript">
function dynInput(cbox) {
if (cbox.checked) {
var input = document.createElement("input");
input.type = "text";
var div = document.createElement("div");
div.id = cbox.name;
div.innerHTML = "Text to display for " + cbox.name;
div.appendChild(input);
document.getElementById("insertinputs").appendChild(div);
} else {
document.getElementById(cbox.name).remove();
}
}
</script>
JsFiddle here: http://jsfiddle.net/brL6gy7r/

You can use JavaScript here to do the job. When the checkbox is clicked and checked (because you can also check out.) a dialog will pop-up with all input-fields you want. You can change the dialog part to your desires. but this part is your main function:
$(document).ready(function () {
$('#chkBox').click(function () {
if ($(this).is(':checked')) {
// create input field
} else {
// if checkbox is not checked.. dont show input field
}
});
});
For a full demo on how to do this with a dialog, click this link and observe
http://jsfiddle.net/Runman44/5vy1m233/
Notice that you will need jQuery (and jQuery UI if you want to use the dialog like me)

There is a zero-JavaScript version that is dead simple and works in all major browsers. It takes advantage of the :checked pseudo-class and the adjacency selector. It works with an arbitrary number of checkboxes.
HTML:
<input type="checkbox" />
<input type="text" />
CSS:
input[type=text] {
visibility:hidden;
}
input[type=checkbox]:checked + input[type=text] {
visibility:visible;
}
here is the live demo
If you prefer, you can use display:none and display:inline rather than the visibility property.
The example I've provided assumes that the text field immediately follows the checkbox in the markup, but some variant of sibling/child selectors can be used to select it no matter where it is, as long as it is either a sibling or child (direct or indirect) of the checkbox.

How to simulate input disabled?

I would like simulate input disabled. I would like don't have change value in input, but this value should be send with POST with FORM.
<input class="dis" type="text" disabled="disabled" value="111">
<input class="no" type="text">
<input class="dis" type="text" disabled="disabled" value="333">
​
http://jsfiddle.net/hC4WP/
I can use also CSS and jQuery, but how?

Use the readonly attribute instead of disabled.
However, this will not result in the field being grayed out. To achieve this, use the following CSS:
input[readonly] { color: #aaa; }
(you might have to change the color a bit to look more like the original disabled color)

Use readonly instead of disabled

Solution with tabindex.
Create a .disabled class.
CSS:
.disabled {
pointer-events:none; /* No cursor */
background-color: #eee; /* Gray background */
}
JS:
$(".disabled").attr("tabindex", "-1");
HTML:
<input type="text" class="disabled" />