We Keep Coding

JS input validation submit disabled for separate instances

I need each instance of input and submit to operate independently. What is the best way to handle multiple instances where each submit is connected to it's own set of inputs?
Since they are unrelated, would data-attributes be the best solution?
$(document).ready(function() {
validate();
$('input').on('keyup', validate);
});
function validate() {
var inputsWithValues = 0;
var myInputs = $("input:not([type='submit'])");
myInputs.each(function(e) {
if ($(this).val()) {
inputsWithValues += 1;
}
});
if (inputsWithValues == myInputs.length) {
$("input[type=submit]").prop("disabled", false);
} else {
$("input[type=submit]").prop("disabled", true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item1">
<div><input type="text" name="name" autocomplete="off" required/></div>
<input type="submit" value="Submit 1" />
</div>
<div class="item2">
<div><input type="text" name="name" autocomplete="off" required/></div>
<div><input type="text" name="name" autocomplete="off" required/></div>
<input type="submit" value="Submit 2" />
</div>

I think your intuition about using data attributes works great here.
var allButtons = document.querySelectorAll("input[type=submit]");
allButtons.forEach(button => {
button.addEventListener("click", () => {
var inputSet = button.getAttribute("data-input-set");
var inputs = document.querySelectorAll("input[type='text'][data-input-set='" + inputSet + "']");
});
});
In the following code, when an input button is pressed, it will fetch all the inputs with the corresponding "input-set" tag.

Preferred way
I think best solution would be use form -tag as it is created for just this use case HTML Forms.
<form id="form-1">
<input type="text"/>
<input type="submit>
</form>
<form id="form-2">
<input type="text"/>
<input type="submit>
</form>
You can also bind custom Form on submit event handlers and collect form data this way.
$('#form-1').on('submit', function(event){
event.preventDefault(); // Prevent sending form as defaulted by browser
/* Do something with form */
});
Possible but more bolt on method
Alternative methods to this would be to create your own function's for collecting all relevant data from inputs and merge some resonable data object.
I would most likely do this with giving desired class -attribute all inputs I would like to collect at once eg. <input type="text" class="submit-1" /> and so on. Get all elements with given class, loop through all them and save values into object.
This requires much more work tho and form -tag gives you some nice validation out of the box which you this way have to do yourself.

how to save values from a form into variables

I want to save values from inputs in the form into variables Like this example.
<form action="test3" method="POST">
Activity name: <input type="text" name="fname" id='nm'><br>
input1: <input type="text" name="input1" id='in1'><br>
input2: <input type="text" name="input2" id='in2'><br>
output1: <input type="text" name="output1" id='out1'><br>
output2: <input type="text" name="output2" id='out2'><br>
<input type="submit" value="Submit">
</form>
var valname=document.getElementById("nm").value;
var valin1=document.getElementById("in1").value;
var valin2=document.getElementById("in2").value;
var valout1=document.getElementById("out1").value;
var valout2=document.getElementById("out2").value;
Now, how can i get value into a general variable like : var valeur=valin1;

You could use FormData
var form = document.querySelector('form');
var data = new FormData(form);
Best off adding an ID to the form though and getById as if you had multiple forms on a page, this wouldn't solve it.
Mozilla API Docs

Change the URL with a GET method

is there a way to submit some selected fields to the URL with a GET method ?
by clicking on a button, I want to put a string on the URL, but using a GET method.
expected result:
test.html?test=11,13,21,34&somewords=1,2,3&demo=2

A simple form would most likely do
<form action="test.html" method="GET">
<input type="text" name="test">
<input type="text" name="somewords">
<input type="text" name="2">
<input type="submit">
</form>

Yes! Example :
function submit() {
var test = document.getElementById('test').value;
var demo = document.getElementById('demo').value;
var somewords = document.getElementById('somewords').value;
var url = 'test.html?test=' +test + '&somewords=' + somewords + '&demo=' + demo;
console.log(url); // test.html?test=1,2,3,4&somewords=noting&demo=2
// Code for get request
}
HTML
<input type="text" value="1,2,3,4" id="test">
<input type="text" value="noting" id="somewords">
<input type="text" value="noting" id="dummy">
<input type="text" value="2" id="demo">
<button onclick="submit()">Submit</button>
Live example : https://jsbin.com/cayude/edit?html,js,console,output
Hope this helps. Thanks !

If you are only interested in changing the displayed URL, use History#pushState.
history.pushState(null, null, formatURL(query));
If you actually want to navigate to a different page,
window.location.href = formatURL(query);
Assuming formatURL is a small helper utility that formats a querystring URL like what you've provided.

Why is not my HTML form sending the data to my JS file?

I am working on a simple ASP.NET project. I have HTML and a JS file. I am trying to send the values of the form inputs to the JS file, but it seems to be broken for some reason.
My form looks like:
<div class="set-the-clock">
<form name="settheclock">
<span>Hours: </span><input type="text" id="fhours" value=""><br>
<span>Minutes: </span><input type="text" id="fminutes" value=""><br>
<span>Seconds: </span><input type="text" id="fseconds" value=""><br>
<input type="button" id="send" value="Enter">
</form>
and my JS is:
var setHour = document.getElementById("fhours").value;
var setMinute = document.getElementById("fminutes").value;
var setSecond = document.getElementById("fseconds").value;
and the function that meant to use it:
function setTheClockByButton() {
setTheClock(setHour, setMinute, setSecond);
alert(setHour);
}
If I put a number to the value in the HTML form it works fine(like this)
<span>Hours: </span><input type="text" id="fhours" value="3"><br>
but it not accepting any data from the keyboard.
And of course I have the onclick function associated to the form:
document.getElementById("send").onclick = setTheClockByButton;
(otherwise it'd make no sense).

Move those assignment statements inside the function:
function setTheClockByButton() {
var setHour = document.getElementById("fhours").value;
var setMinute = document.getElementById("fminutes").value;
var setSecond = document.getElementById("fseconds").value;
setTheClock(setHour, setMinute, setSecond);
alert(setHour);
}
Now each time the button is clicked (and note that I'm assuming that part works, since you say it does), the values of the input fields will be fetched so that the clock update function is working with up-to-date values.

You need an onclick event:
<div class="set-the-clock">
<form name="settheclock">
<span>Hours: </span><input type="text" id="fhours" value=""><br>
<span>Minutes: </span><input type="text" id="fminutes" value=""><br>
<span>Seconds: </span><input type="text" id="fseconds" value=""><br>
<input type="button" id="send" value="Enter" onclick="setTheClockByButton()">
</form>
</div>
<script>
function setTheClockByButton() {
var setHour = document.getElementById("fhours").value;
var setMinute = document.getElementById("fminutes").value;
var setSecond = document.getElementById("fseconds").value;
alert(setHour);
}
</script>

Pass an input box value through to a var in the js doc to be used

Is it possible to pass the value of an input from a form into a var to be used in a function.
for example:
<input type="text" id="userID" name="userID" placeholder="Enter user ID" style="width:200px;" />
<input type="submit" value="search" />
So the userID would be passed into :
var userId = null;
I am looking to use this as a way for a user to input their userID in to the flickr api call.
$.getJSON('http://api.flickr.com/services/rest/?method=flickr.photos.search&getSizes&api_key=feb7e93d9a90e9a734787bea9be81440&user_id='+userID+'&has_geo=1&extras=geo&format=json&jsoncallback=?', mapImages);
I had a look around and came across
var userId = document.getElementById("userID").value;
This does not seem to be working though.
I have tried:
<form type="post" onsubmit="loadImages(); return false;">
<input type="text" id="userID" name="userID" placeholder="Load user images" />
<input type="submit" value="Get Flickr images!" />
</form>
Using the function:
function loadImages()
{
var userId = document.getElementById("userID").value;
}
Is this along the right track or totally off?

getElementById is case-sensitive.
In your HTML you use "userID" and in your JavaScript "userId".