Develop Reference

Why dont work change event of bootstrap input spinner?

I write a method that called in change event of text input.
When i click on + and - buttons change event dont called but when i change value of input manually change event called.
What is problem?
js
$("#wraper-frequency input[type=text]").change(function (e) {
alert("frequency change");
});
html
<div id="wraper-frequency">
<input id="frequency" class="form-control" type="number" value="0" min="0" max="50" step="1" style="display: none;">
<div class="input-group ">
<div class="input-group-prepend">
<button style="min-width: 2.5rem" class="btn btn-decrement btn-outline-secondary" type="button"><strong>-</strong></button>
</div>
<input type="text" style="text-align: center" class="form-control " placeholder="">
<div class="input-group-append">
<button style="min-width: 2.5rem" class="btn btn-increment btn-outline-secondary" type="button"><strong>+</strong></button>
</div>
</div>
<label style="top: 7px; position: relative; margin-right: 5px;">Hz</label>

You didn't bind the event to any of the buttons. You can trigger the change event of the input element on button click like the following way:
$("#wraper-frequency input[type=text]").change(function (e) {
alert("frequency change");
});
$("button").click(function(){
$("#wraper-frequency input[type=text]").trigger('change')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wraper-frequency">
<input id="output-pressure" disabled001="" class="form-control" type="number" value="0.0" data-decimals="1" min="0" max="50" step="0.1" style="display: none;">
<div class="input-group ">
<div class="input-group-prepend">
<button style="min-width: 2.5rem" class="btn btn-decrement btn-outline-secondary" type="button"><strong>-</strong></button>
</div>
<input type="text" style="text-align: center" class="form-control " placeholder="">
<div class="input-group-append">
<button style="min-width: 2.5rem" class="btn btn-increment btn-outline-secondary" type="button"><strong>+</strong></button>
</div>
</div>
<label style="top: 7px; position: relative; margin-right: 5px;">Bar</label>

As I mentioned in the comments to the original post:
You do not have an input[type=text] field with Id wrapper-frequency.
Also in the text field type, there were spaces. Remove spaces.
If you want the event to be triggered on button click as well, trigger the event manually.
Lastly, a selector combining Id and input[type=text] is not doing any good. Id is anyway unique. If you mean wrapper-frequency and input[ type=text] both selection use comma in between.
Here is the modified code that works:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#wrapper-frequency, input[type=text]").change(function (e) {
alert("frequency change");
});
});
</script>
<div id="wraper-output-pressure">
<input id="output-pressure" disabled001="" class="form-control" type="number" value="0.0" data-decimals="1" min="0"
max="50" step="0.1" style="display: none;">
<div class="input-group ">
<div class="input-group-prepend">
<button style="min-width: 2.5rem" class="btn btn-decrement btn-outline-secondary"
type="button"><strong>-</strong></button>
</div>
<input type="text" style="text-align: center" class="form-control " placeholder="">
<div class="input-group-append">
<button style="min-width: 2.5rem" class="btn btn-increment btn-outline-secondary"
type="button"><strong>+</strong></button>
</div>
</div>
<label style="top: 7px; position: relative; margin-right: 5px;">Bar</label>

You are trying to attach an event listener to an element that doesn't exist in your example.
In your example you are targeting #wraper-frequency. I only see the id's #wraper-output-pressure and #output-pressure in your HTML.

Icon clone element in the wrong place

When I click the + next to the Input 1 a line gets cloned and next to the first line a - appears, which is precise what I want :-)
But when I press the + next to the Input 2 the - icon appears in next to the line of Input 1.
I can't figure out what I'm doing wrong as when you click + next to Input 2 I want the - next to the first line of Input 2
$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span>-</span>');
}).on('click', '.btn-remove', function(e) {
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
.entry {
text-align: left;
margin-bottom: 25px;
margin-top: 25px;
}
.entry input {
height: 50px;
padding: 10px;
}
.entry input:nth-child(2) {
margin-left: 25px;
width: 66%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
<form class="school_form" role="form" autocomplete="off">
<div class="entry input-group">
<input type="text" name="opl_datum" placeholder="Periode Input 1" class='enableOnInput' disabled='disabled'>
<input type="text" name="school" placeholder="Input 1" class='enableOnInput' disabled='disabled'>
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span>+</span>
</button>
</span>
</div>
</form>
</div>
<div class="controls">
<form class="werk_form" role="form" autocomplete="off">
<div class="entry input-group">
<input type="text" name="werk_datum" placeholder="Periode Input 2" class='enableOnInput' disabled='disabled'>
<input type="text" name="werkgever" placeholder="Input 2" class='enableOnInput' disabled='disabled'>
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span>+</span>
</button>
</span>
</div>
</form>
</div>

var controlForm = $('.controls form:first')//here you also select first control even if you are on second controlforms
so replace this with
var controlForm = $(this).closest('.controls').find('form:first')//which is also select closest one
$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $(this).closest('.controls').find('form:first'),//you have to select colsest controls
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span>-</span>');
}).on('click', '.btn-remove', function(e) {
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
.entry {
text-align: left;
margin-bottom: 25px;
margin-top: 25px;
}
.entry input {
height: 50px;
padding: 10px;
}
.entry input:nth-child(2) {
margin-left: 25px;
width: 66%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
<form class="school_form" role="form" autocomplete="off">
<div class="entry input-group">
<input type="text" name="opl_datum" placeholder="Periode Input 1" class='enableOnInput' disabled='disabled'>
<input type="text" name="school" placeholder="Input 1" class='enableOnInput' disabled='disabled'>
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span>+</span>
</button>
</span>
</div>
</form>
</div>
<div class="controls">
<form class="werk_form" role="form" autocomplete="off">
<div class="entry input-group">
<input type="text" name="werk_datum" placeholder="Periode Input 2" class='enableOnInput' disabled='disabled'>
<input type="text" name="werkgever" placeholder="Input 2" class='enableOnInput' disabled='disabled'>
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span>+</span>
</button>
</span>
</div>
</form>
</div>

Not Able to Submit a Form Using jQuery On Click method

Using jQuery Form, for some reason I have to submit a form through jQuery on method like this:
$("#submitImage").on("click", function() {
$('#loaderForm').ajaxForm(function() {
alert("Uploaded SuccessFully");
});
});
but this is not submitting the form! Can you please take a look at this demo and let me know what i am missing or doing wrong here?
$("#uploadFile").change(function() {
$('#image_preview').html("");
var total_file=document.getElementById("uploadFile").files.length;
for(var i=0;i<total_file;i++)
{
$('#image_preview').append("<img src='"+URL.createObjectURL(event.target.files[i])+"'>");
}
});
$("#submitImage").on("click", function() {
$('#loaderForm').ajaxForm(function()
{
console.log("Uploaded SuccessFully");
});
});
input[type=file]{
display: inline;
}
#image_preview{
border: 1px solid black;
padding: 10px;
}
#image_preview img{
width: 200px;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
<div class="container">
<form id="loaderForm" action="uploadFile.php" method="post" enctype="multipart/form-data">
<input type="file" id="uploadFile" name="uploadFile[]" multiple/>
</form>
<br/>
<button type="button" class="btn btn-success" id='submitImage' >Upload Image </button>
<div id="image_preview"></div>
</div>

type of button should be 'submit'
<button type="submit" class="btn btn-success" id='submitImage' >Upload Image </button>

move the submit button inside the <form> tag and its type should by submit
<form id="loaderForm" action="uploadFile.php" method="post" enctype="multipart/form-data">
<input type="file" id="uploadFile" name="uploadFile[]" multiple/>
<input type="submit" class="btn btn-success" id='submitImage' value='Upload Image' />
</form>
Otherwise, you can just call $('#loaderForm').submit(); from within the button click event;
<form id="loaderForm" action="uploadFile.php" method="post" enctype="multipart/form-data">
<input type="file" id="uploadFile" name="uploadFile[]" multiple/>
</form>
<button type="button"
onclick="javascript:function(){ $('#loaderForm').submit(); }"
class="btn btn-success" id='submitImage' >Upload Image
</button>

Checking for empty fields on HTML form

I am trying to create a form in HTML, and also trying to ensure that any field is not left empty.
Here is the HTML for the form
<form role="form" id="companyDetails" name="companyDetails" method="post" action="saveCompanyDetails.jsp" onsubmit="return false;">
<div class="col-lg-6">
<div class="form-group">
<label>Company Name</label>
<input type="text" class="form-control" id="cmpname" name="cmpname">
<p id="cmpnameError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Description</label>
<textarea class="form-control" rows="3" id="desc" name="desc"></textarea>
<p id="descError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Url</label>
<input type="text" class="form-control" name="url" id="url">
<p id="urlError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Email Id</label>
<input type="text" class="form-control" name="emailid" id="emailid">
<p id="emailidError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Address</label>
<textarea class="form-control" rows="3" id="address" name="address"></textarea>
<p id="addressError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<h1>All Links <i class="fa fa-link"></i></h1>
<div class="form-group">
<label>Facebook Link</label>
<input type="text" class="form-control" name="fblink" id="fblink">
<p id="fblinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Twitter Link</label>
<input type="text" class="form-control" name="twlink" id="twlink">
<p id="twlinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
</div>
<!-- /.col-lg-6 (nested) -->
<div class="col-lg-6">
<div class="form-group">
<label>Linkedin Link</label>
<input type="text" class="form-control" name="linkinlink" id="linkinlink">
<p id="linkinlinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Download Link</label>
<input type="text" class="form-control" name="downlink" id="downlink">
<p id="downlinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Live Help Link</label>
<input type="text" class="form-control" name="livehelplink" id="livehelplink">
<p id="livehelpError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Terms & Condition Link</label>
<input type="text" class="form-control" name="tclink" id="tclink">
<p id="tclinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Promotion Link</label>
<input type="text" class="form-control" name="prolink" id="prolink">
<p id="prolinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Sign Up Link</label>
<input type="text" class="form-control" name="signuplink" id="signuplink">
<p id="signuplinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Affiliate Link</label>
<input type="text" class="form-control" name="affiliatelink" id="affiliatelink">
<p id="affiliatelinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<div class="form-group">
<label>Game Link</label>
<input type="text" class="form-control" name="gamelink" id="gamelink">
<p id="gamelinkError" style="display: none; color: red; font-weight: bold;"></p>
</div>
<button type="submit" class="btn btn-default" onclick="submitData()"><i class="fa fa-check"></i>Submit</button>
<button type="reset" class="btn btn-default"><i class="fa fa-refresh"></i>Reset</button>
</div>
</form>
Notice that I have a <p> tag just below every input field, whose ID value is constructed from the ID of its corresponding input field. For eg. the <p> tag below text field cmpname is given ID cmpnameError
Now the JavaScript code for displaying the error message below the text field is given below
function submitData() {
var elements = document.querySelectorAll('#companyDetails input, #companyDetails textarea');
for (var i = 0; i < elements.length; i++) {
if (elements[i].value == "") {
var errorElementId = "#" + elements[i].id + "Error";
// alert("Generated ID is " + errorElementId);
document.getElementById(errorElementId).style.display = '';
document.getElementById(errorElementId).innerHTML = "Please enter a value for this field";
return false;
}
}
document.forms['companyDetails'].submit();
return true;
}
My problem is that the proper error message is not getting displayed on the form when I click submit.
Can anybody please help me regarding this? Thank you very much in advance.
Here is the JSFiddle link- https://jsfiddle.net/v8ooy2e1/

The pound sign is used to select elements with ids using querySelectorAll, but it shouldn't be used with getElementById.
Remove the pound sign here:
var errorElementId = "#" + elements[i].id + "Error";
Should be:
var errorElementId = elements[i].id + "Error";
Working Fiddle

You know, assuming IE 10+, you could skip all this javascript fanciness and just use the "required" attribute:
<input type="text" class="form-control" id="cmpname" name="cmpname" required>
That'll invoke the browser supported form validation.

Why do you have:
var errorElementId = "#" + elements[i].id + "Error";
Leave out the "#" sign.

If you can use jQuery
var isValid = true;
$("#companyDetails").submit(function(event) {
$("input").each(function() {
var element = $(this);
if (element.val() == "") {
isValid = false;
}
})
if (!isValid) {
alert("nopes");
}
});
FIDDLE

Change button type from button to submit

I just dont know how to change my buttons once clicked. All I want is to change this button
<input type="button" onclick="codename()" id="myButton1" value="New" class="btn" name="New" style="height: 60px; width: 90px">
to this button
<input type="submit" value="Save" class="btn2" name="Query" style="height: 60px; width: 90px">
once clicked.I have used the
button to enable a disabled text forms, and it works. So basically my NEW BUTTON will do 2 things: first is to enable disabled forms and button (working) AND second is to change that same button from
<input type="button" onclick="codename()" id="myButton1" value="New" class="btn" name="New" style="height: 60px; width: 90px">` to `<input type="submit" value="Save" class="btn2" name="Query" style="height: 60px; width: 90px">
(not yet existing)
here is my exiting code right now:
<SCRIPT LANGUAGE="JavaScript"><!--
function codename() {
if(document.formname.New)
{
document.formname.Add.disabled=false;
document.sapcode.SapCode.disabled=false;
document.lanecode.LaneCode.disabled=false;
document.soldto.SoldTo.disabled=false;
document.soldaddress.SoldAddress.disabled=false;
document.contactperson1.ContactPerson1.disabled=false;
document.deliveredto.DeliveredTo.disabled=false;
document.deliveredaddress.DeliveredAddress.disabled=false;
document.contactperson.ContactPerson.disabled=false;
}
else
{
document.formname.Add.disabled=true;
document.sapcode.SapCode.disabled=true;
document.lanecode.LaneCode.disabled=true;
document.soldto.SoldTo.disabled=true;
document.soldaddress.SoldAddress.disabled=true;
document.contactperson1.ContactPerson1.disabled=true;
document.deliveredto.DeliveredTo.disabled=true;
document.deliveredaddress.DeliveredAddress.disabled=true;
document.contactperson.ContactPerson.disabled=true;
}
}
//-->
</SCRIPT>
<div id="container">
<div id="header">
<div id="img">
<img src="dimensiondata.jpg" alt="dimension data" width="250" height="60">
</div>
<div id="indexno">
<center>Index No.</center> <input type="text" name="indexNo" size="13">
</div>
<form name="formname">
<input type="button" onclick="codename()" id="myButton1" value="New" class="btn" name="New" style="height: 60px; width: 90px">
<input type="submit" disabled value="Add" class="btn1" name="Add" style="height: 60px; width: 90px">
</form>
</div>

Pass this a reference of event and clicked button to the function like:
<input type="button" onclick="codename(event, this)" id="myButton1" value="New" class="btn" name="New" style="height: 60px; width: 90px">
and try the modifying your function as follows:
function codename(e, elm){
if(elm.type=='button'){
var e = e || window.event;
if(e)
e.preventDefault()
elm.type='submit';
elm.value="Save";
elm.className= 'btn2';
elm.name= "query";
}
//rest of the code
}