We Keep Coding

addClass function working properly but removeClass function not working on input text field for form?

Creating an Online form and I'd like only the field that the user is focused on to be notfaded so i decided to add some jQuery to my form but the remove class function is not working. addClass works when I click into a field it shows brightly and not faded as it adds the Focused class but as soon as I click away or am no longer focused on that field the Focused class remains.
I've seen some similar posts but the solutions on the other posts don't seem to pertain to my issue.
Below is my form
<form name="contactform" method="post">
<div class="row">
<div class="col-md-12 inputFaded">
<span class="larger"><strong>Name</strong> <span class="textGreen">*</span></span><br><br>
<span>Please provide your full name</span>
<input type="text" maxlength="100" class="form-control discuss" name="projectname">
<br>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" name="nameaction" value="SEND" class="btn btn-lg btn-success btn-block">
</div>
</div>
</form>
Below is my jQuery
$(document).ready(function(){
$('input[type="text"]').on('focus', function() {
$('.inputFaded').addClass('Focused');
});
$('input[type="text"]').off('focus', function() {
$('.inputFaded').removeClass('Focused');
});
});
Any help greatly appreciated!
Thanks,

You are misunderstanding .off()
Description: Remove an event handler.
So it seems that you need to listen focusin and focusout event.
$(document).ready(function(){
$('input[type="text"]').focusin(function() {
$('.inputFaded').addClass('Focused');
});
$('input[type="text"]').focusout(function() {
$('.inputFaded').removeClass('Focused');
});
});
.Focused{
background-color: #FFFFCC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="contactform" method="post">
<div class="row">
<div class="col-md-12 inputFaded">
<span class="larger"><strong>Name</strong> <span class="textGreen">*</span></span><br><br>
<span>Please provide your full name</span>
<input type="text" maxlength="100" class="form-control discuss" name="projectname">
<br>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" name="nameaction" value="SEND" class="btn btn-lg btn-success btn-block">
</div>
</div>
</form>
Updated
$(document).ready(function(){
$('input[type="text"]').focusin(function() {
$(this).addClass('Focused');
});
$('input[type="text"]').focusout(function() {
$(this).removeClass('Focused');
});
});
.Focused{
border-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="contactform" method="post">
<div class="row">
<div class="col-md-12 inputFaded">
<span class="larger"><strong>Name</strong> <span class="textGreen">*</span></span><br><br>
<span>Please provide your full name</span>
<input type="text" maxlength="100" class="form-control discuss" name="projectname">
<br>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" name="nameaction" value="SEND" class="btn btn-lg btn-success btn-block">
</div>
</div>
</form>

The .off function is not used for running a function but for removing a function from an Event tied to an element, as already pointed out by #Phong. Instead use the .focusout() function or .on("focusout", ..)
Please note that if this is also quite simple in Vanilla JS:
// Vanilla JS solution
(function(){
let input = document.querySelector("input[type='text']"),
inputFaded = document.querySelector(".inputFaded");
input.addEventListener('focus', function() {
console.log("focused now!");
inputFaded.classList.add('Focused');
});
input.addEventListener('focusout', function(){
console.log("I will also be run! :)");
inputFaded.classList.remove('Focused');
})
})()
$(document).ready(function(){
$('input[type="text"]').on('focus', function() {
console.log("focused now!");
$('.inputFaded').addClass('Focused');
});
// Removing function from focus event that does not exist as a function to an eventlistener
$('input[type="text"]').off('focus', function() {
console.log("I will never be run? :(");
$('.inputFaded').removeClass('Focused');
});
// adding focusout eventlistener
$('input[type="text"]').on('focusout', function() {
console.log("I will be run! :)");
$('.inputFaded').removeClass('Focused');
});
// alternative way of adding focusout eventlistener
$('input[type="text"]').focusout( function() {
console.log("I will also be run! :)");
$('.inputFaded').removeClass('Focused');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form name="contactform" method="post">
<div class="row">
<div class="col-md-12 inputFaded">
<span class="larger"><strong>Name</strong> <span class="textGreen">*</span></span><br><br>
<span>Please provide your full name</span>
<input type="text" maxlength="100" class="form-control discuss" name="projectname">
<br>
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="submit" name="nameaction" value="SEND" class="btn btn-lg btn-success btn-block">
</div>
</div>
</form>

You can also try like this :
$(document).ready(function(){
$("input").focus(function(){
$('.inputFaded').addClass('Focused');
});
$("input").on('blur', function() {
$('div').removeClass('Focused');
});
});

How can I tell the browser to empty a field by using JQuery and then call the function?

I inserted a form on a html page, which contains several fields the user is supposed to fill ("name", "surname", a textarea, and so on); I then added a button and assigned the id Click to it:
<input type="button" name="button" value="Click" id="cliccami">
I linked the html page to a JQuery file.
By using JQuery I want to add a function clearAll which clears all the fields in the form when the user clicks on the button. I want to use another function main which calls the function clearAll when the button is clicked, as in the following:
function main() {
$("form").on("button", clearAll);
}
How can I write the function clearAll (to empty the fields in the form) by using JQuery?

Inside the function you can target the closest() form of this element to find all the elements to clear them like the following way:
function main() {
$("form").on("click", "#cliccami", clearAll);
}
function clearAll() {
$(this).closest("form").find("input[type=text], textarea").val("");
}
function main() {
$("form").on("click", "#cliccami", clearAll);
}
main();
function clearAll() {
$(this).closest("form").find("input[type=text], textarea").val("");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form>
<div>
<label>First Name:</label>
<input type="text" id="first-name">
</div>
<div>
<label>Last Name:</label>
<input type="text" id="last-name">
</div>
<div>
<label>Comments:</label>
<textarea id="comments"></textarea>
</div>
<input type="button" name="button" value="Click" id="cliccami">
</form>

Use jQuery's .val() function to set the value of a input element. Check the snippet for an example:
function clearAll() {
$(":input[type=text]").val("");
}
function main() {
$("#cliccami").on("click", clearAll);
}
main();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="test">
<input type="button" name="button" value="Click" id="cliccami">

You can bind your function using the onclick attribute. And use reset method to reset the entire form this way.
function main(){
// reset form
$('#my-form')[0].reset();
// do whatever you want
alert('Form cleared!');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<h2>Form</h2>
<form id="my-form">
<div class="form-group">
<label for="first-name">First Name:</label>
<input type="text" class="form-control" id="first-name">
</div>
<div class="form-group">
<label for="last-name">Last Name:</label>
<input type="text" class="form-control" id="last-name">
</div>
<div class="form-group">
<label for="comments">Comments:</label>
<textarea class="form-control" id="comments"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" onclick="main()" class="btn btn-default">Clear All</button>
</form>
</div>

Try this
<form id="form1" action="">
<input type="text">
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
<input type="button" name="button" value="Click" id="cliccami">
</form>
function clearAll() {
$('#form1 input, #form1 textarea, #form1 select').each(function() {
$(this).val('');
});
}
$("#cliccami").on('click',function(){
clearAll();
});

$('#clearit').click(function(){
$(":input[type=text]").val("");
setTimeout(function(){ afteremptyfield(); }, 1000);
})
function afteremptyfield(){
alert("Function trigged after clearing fields")
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="test">
<input type="button" name="button" value="Clear and trigger a function" id="clearit">
This is how it could be done....

.show() doesn't work immediately - jQuery

I have a button click function like this :
$("#submitButton").click(function (e) {
e.preventDefault();
console.log("let's show my div");
$('#mydiv').show();
//and then doing a lot of front end operations and some ajax calls
})
When I click the submit button, I get the console.log message immediately. But .show() method works like 7-8 seconds after that. Can you tell me how I can make .show() work immediately? Thanks.
EDIT :
My HTML code looks like this :
<div class="main">
<form id="myform" enctype="multipart/form-data" class="contact-forms">
<div class="first-line">
<div class="span3 main-row">
<div class="input">
<input type="text" id="id" name="id" placeholder="insert your ID" maxlength="7" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
</div>
</div>
</div>
<div class="first-line">
<div class="span8 main-row">
<div class="input">
<input type="text" id="name" name="name" placeholder="Your name" />
</div>
</div>
</div>
<div id="mydiv" style="display:none">
<label>
Processing, please wait.
</label>
</div>
</form>
</div>

This is example of showing the div , you should hide your div with display none not hidden class , if you use hidden class just remove class to show your div
function ShowDiv(){
$("#mydiv").show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mydiv" style='display:none;'>Hello</div>
<button onclick="ShowDiv()"> ShowMe</button>

Showing 2 text boxes when button click JS

I have implemented a coding to show a text-box when the user clicks a button. I need to modify that coding to view 2 text-boxes when user clicks that same button. I'll put the coding down below. Thanks!
<div class="form-group">
<div class="col-sm-9">
<div id="welcomeDiv" class="answer_list" style="display:none;"> <input type="text" /></div>
<input type="button" name="answer" value="Customize Size" onclick="showDiv()" />
</div>
function showDiv(){
$( "#welcomeDiv" ).show( "slow" );
}

Try this one .
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#input1").hide();
$("#input2").hide();
$("#hide").click(function(){
$("#input1").hide();
$("#input2").hide();
});
$("#show").click(function(){
$("#input1").show();
$("#input2").show();
});
});
</script>
</head>
<body>
<input type="text" id="input1"/>
<input type="text" id="input2"/>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
Hope this help :)

this is exactly same like your code check this out
this is fiddle link
and with code snippet also
<div class="form-group">
<div class="col-sm-9">
<div id="welcomeDiv" class="answer_list"> <input type="text" /></div>
<input type="button" name="answer" value="Customize Size" />
</div>
this is javascript little bit different but you will get it
$("input[type='button']").click(function(){
$("#welcomeDiv").show('slow');
});
i dont like to give style in elements so use css.css
#welcomeDiv{
display:none;
}
$("input[type='button']").click(function(){
$("#welcomeDiv").show('slow');
});
#welcomeDiv{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="col-sm-9">
<div id="welcomeDiv" class="answer_list"> <input type="text" /></div>
<input type="button" name="answer" value="Customize Size" />
</div>

Jquery submit form having issue on click event

I am creating search form, when user click search icon, i need to show textbox, once i entered content, and again clicked same search icon, it needs to display search results. Below is the code i used.
HTML & Javascript
<div class="search_right">
<div class="search-top-container">
<div class="search-top"></div>
<div class="search-form">
<div class="search-form-border"></div>
<div class="search-top-title"><span class="icon"></span>Search</div>
<form id="search_mini_form" action="%%GLOBAL_ShopPath%%/search.php" method="get">
<div class="form-search">
<input id="search" type="text" name="q" value="" class="input-text" style="display:none;" autocomplete="off">
<button type="submit" title="Search" id="but" onclick="tog_input();" >
</button>
</div>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
<script type="text/javascript">
function tog_input(){
if(jQuery("#search").is(':visible'))
{
if(jQuery("#search").val()!=''){ jQuery("#search_mini_form").submit();
}else{
jQuery("#search").animate({ width: 'hide' });
}
}
else
{
jQuery("#search").animate({ width: 'show' });
}
}
</script>
</form>
</div>
<div class="clear"></div>
</div>
Right now issue is, when i clicked search icon, it showing search page instead of textbox, any assistance would be appreciated.

Change the inline code from:
<button type="submit" title="Search" id="but" onclick="tog_input();">Submit</button>
To:
<button type="submit" title="Search" id="but" onclick="tog_input(this, event);">Submit</button>
Avoid this line:
jQuery("#search_mini_form").submit();
Prevent the form submission only when needed.
So:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="search_right">
<div class="search-top-container">
<div class="search-top"></div>
<div class="search-form">
<div class="search-form-border"></div>
<div class="search-top-title"><span class="icon"></span>Search</div>
<form id="search_mini_form" action="%%GLOBAL_ShopPath%%/search.php" method="get">
<div class="form-search">
<input id="search" type="text" name="q" value="" class="input-text" style="display:none;"
autocomplete="off">
<button type="submit" title="Search" id="but" onclick="tog_input(this, event);">Submit
</button>
</div>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
<script type="text/javascript">
function tog_input(obj, e) {
if (jQuery("#search").is(':visible')) {
if (jQuery("#search").val() == '') {
jQuery("#search").animate({width: 'hide'});
e.preventDefault();
}
}
else {
e.preventDefault();
jQuery("#search").animate({width: 'show'});
}
}
</script>
</form>
</div>
<div class="clear"></div>
</div>
</div>

I'd suggest that it is because your button type is submit. If you change it to button type = "button" then it should work, although you may need another button to submit your form.

You need to prevent default behaviour of submit button else it will end up in action page. To achieve it you need to do as -
function tog_input(e){
e.preventDefault();// prevents default action
... other code
}