We Keep Coding

Hide/Show button + not valid HTML

First Question: On W3 HTML Validator I get the following error:
Attribute value not allowed on element input at this point.
But, in my code, I am using the 'value' to change images so how could I fix this?
Second question: I need the image to remain the same even when I refresh. I am new to Javascript, but I know I need to utilise cookies or local storage in some way. Can someone help with this?
$(document).ready(function() {
$("#button").on("click", function() {
$("#collapse").slideToggle("slow");
if ($(this).val() == "Hide") {
$(this).val("Show");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d35f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
} else {
$(this).val("Hide");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="image" value="Hide" id="button" src="https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1"></button>
<div id="collapse">
Hello
</div>

If you just want to make the HTML valid, the simplest tweak would be to use a class or data attribute instead.
$(document).ready(function() {
$("#button").on("click", function() {
$("#collapse").slideToggle("slow");
if ($(this).data('status') == "Hide") {
$(this).data('status', "Show");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d35f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
} else {
$(this).data('status', "Hide");
$(this).attr("src","https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="image" data-status="Hide" id="button" src="https://www.gravatar.com/avatar/2e83e2d00f0b889da7d5905c7bf574c2?s=32&d=identicon&r=PG&f=1"></button>
<div id="collapse">
Hello
</div>
To persist the value, retrieve the status on pageload and run the handler
const initialStatus = localStorage.imageStatus || 'Hide';
$('#button').data('status', initialStatus);
$('#button').click();
and set it after a change
localStorage.imageStatus = $('#button').data('status');

redirect to another page if (text area (input) === "something") when a button is clicked

This is the way I approached it. Please help:
Search
<script type="text/javascript">
var criteria = document.getElementById("search").val().toLowerCase();
if (criteria == "crosshatching") {
document.getElementById("searchBtn").onclick = function() {
window.location.href = "https://www.youtube.com/watch?v=117AN3MQuVs";
}
}
</script>

There was no scope for the variable criteria inside the function.
Also .val() is for jQuery, instead use Javascript's .value.
I've modified your code.
Please check the working code below :
document.getElementById("searchBtn").onclick = function() {
var criteria = document.getElementById("search").value.toLowerCase();
if (criteria == "crosshatching") {
alert("Matching");
window.location.href = "https://www.youtube.com/watch?v=117AN3MQuVs";
} else {
alert("NOT Matching");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="search" id="search"></textarea>
<button id="searchBtn">Search</button>

You need to check the value of your input inside the event handler. In addition, as pointed out in the comments, use value instead of val().
document.getElementById('searchBtn').addEventListener('click', function() {
var criteria = document.getElementById('search').value.toLowerCase();
if (criteria === "crosshatching") {
console.log('You would be redirected here!')
location.href = 'https://www.youtube.com/watch?v=117AN3MQuVs'
} else {
console.log('No redirect. You wrote: ' + criteria)
}
})
<input id="search" type="text"/>
<button id="searchBtn">Search</button>

jQuery .ready is not working

Can anyone tell me why this code wouldn't work? I have an input and I'm trying to check weather or not the input is "start". So I do... how ever nothing is working - not even the .ready but I'm new so I have no idea what the problem is.
HTML
<form id="inputForm" onsubmit="return false;">
<input id="input" type="text" size="30" autofocus="autofocus" maxlength="100" autocomplete="off"/>
</form>
JS:
var input = "";
$(document).ready(function() {
$("#inputForm").submit(function() {
input = $("#input").val().toUpperCase();
if (input === "START") {
alert("worked");
}
$("#command_input").val("");
})
});

I suspect that you haven't included jQuery in your webpage. You can import it by adding
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Before the script tag for your code. (https://code.jquery.com/jquery has more jQuery CDNs too)
You really don't need jQuery to do this though. Here's the plain JS equivalent code working here:
var input = "";
document.body.onload = function() {
document.getElementById("inputForm").addEventListener("submit", function() {
input = document.getElementById("input").value.toUpperCase();
if (input === "START") {
alert("worked");
}
document.getElementById("command_input").value = "";
});
};

After looking at the code here: https://jsfiddle.net/cu7tn64o/1/
It seems to work fine! As the other commenters have mentioned, this is likely because you have not included jQuery in your html file like so:
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
https://code.jquery.com/

First include the jquery file using script tag in your html file.
Submit the form using jquery or in the below case I have submitted using a button. Onsubmit the value is taken from the input field and compared.
var input = "";
$(document).ready(function() {
$("#inputForm").submit(function() {
input = $("#input-value").val().toUpperCase();
if (input === "START") {
alert("worked");
}
else
{
alert("sorry");
}
$("#command_input").val("");
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="inputForm" onsubmit="return false;">
<input id="input-value" type="text" size="30" autofocus="autofocus" maxlength="100" autocomplete="off"/>
<input type="submit" name="submit" value="submit" />
</form>

If you return false from the event handler, things ought to work.
var input = "";
$(document).ready(function() {
$("#inputForm").submit(function() {
input = $("#input-value").val().toUpperCase();
if (input === "START") {
alert("worked");
} else {
alert("sorry");
}
$("#command_input").val("");
// You have to return false HERE to prevent the default action of a
// form -- send a request to a server, that is
return false;
});
});

Regex/other method to read user email address on input and hide/show a div respectively

I am trying to read the user email address on input and if it is hotmail.com or yahoo.com then then I will hide the div element. However I am still struggling to get the hotmail.com string to be found and matched.
Here is my code below..
javascript:
$().ready(function () {
var userEmail = document.getElementById("Username");
var paymentBox = document.getElementById("divPaymentMethod");
$(userEmail).blur(function () {
if ($(userEmail).val() != "") {
var Name = $(userEmail).val();
if (Name.indexOf("#hotmail.com") > -1) {
$(paymentBox).hide();
}
else {
$(paymentBox).show();
}
}
});
html:

Your code seems correct as long as you are checking only "...#hotmail.com".
If you are using this .aspx page inside any master page then id of the username will be changed to like "ctl_something..Username".
And it is accessed by asp.net code through Username.ClientID.
So I think you are mistaking on that ID part.
Hope this helps.

this will help you to find out #hotmail.com and #yahoo.com
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sub").click(function(){
var v=$("#em").val();
if(v.search("#hotmail.com")!=-1 || v.search("#yahoo.com")!=-1)
{
alert();
}
});
});
</script>
<input type="text" id="em">
<button id="sub">submit</button>

this provide you real-time checking
<script type="text/javascript">
$(document).ready(function () {
$("#em").focusout(function(){
var v=$("#em").val();
if(v.search("#hotmail.com")!=-1 || v.search("#yahoo.com")!=-1)
{
alert();
}
});
});
</script>
<input type="text" id="em">

Disable/Enable submit button and running this javascript every 1 second onload

I need to disable the submit button when the required fields are not filled. But the script is not working. If anybody can help, thanks in advance.
Html :
<input type="submit" value="Submit" name="sub1" id="submit1">
Javascript :
<script language="JavaScript">
function form_valid() {
var u1=document.getElementById("#user1").value;
var p1=document.getElementById("#pass1").value;
var p2=document.getElementById("#pass2").value;
var s1=document.getElementById("#school1").value;
if ((u1 == null)&&(p1 != p2)&&(s1 == null))
{
document.getElementById("#submit1").disabled = true;
document.getElementById("#submit1").setAttribute("disabled","disabled");
}
else
{
document.getElementById("#submit1").disabled = false;
document.getElementById("#submit1").removeAttribute("disabled");
}
}
function form_run() {
window.setInterval(function(){form_valid();}, 1000);
}
</script>
Body tag (HTML) :
<body bgcolor="#d6ebff" onload="form_run();">

var u1=document.getElementById("#user1").value;
Dont use #, you have many times in your code
var u1=document.getElementById("user1").value;