We Keep Coding

Disable or enable only the current button

With a PHP for each cycle, I'm bringing articles from the database. In those articles, we have a comment section with a form. I want to check with jQuery if there is something written on the input before the comment is sent.
As the articles are being brought with a PHP cycle, I want to check only the article in which it is being written a comment, but jQuery checks all the articles and only enables or disables the first or top result being brought from the database. I want jQuery to check only on the article with a written comment.
Here's what I'm doing:
$(document).ready(function() {
$(".comment-submit").attr("disabled", true);
$("#group-post-comment-input").keyup(function() {
if ($(this).val().length != 0) {
$(".comment-submit").attr("disabled", false);
} else {
$(".comment-submit").attr("disabled", true);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="comment.php" method="POST">
<input autocomplete="off" type="text" placeholder="Add a comment" id="group-post-comment-input">
<button class="comment-submit">
Comment
</button>
</form>
<br>
<form action="comment.php" method="POST">
<input autocomplete="off" type="text" placeholder="Add a comment" id="group-post-comment-input">
<button class="comment-submit">
Comment
</button>
</form>
<br>
<form action="comment.php" method="POST">
<input autocomplete="off" type="text" placeholder="Add a comment" id="group-post-comment-input">
<button class="comment-submit">
Comment
</button>
</form>
As you can see on the snippet above, the buttons only get enabled when text is written on the first input only. I want the buttons to get enabled when text is written on their dependent input. If input 2 has text on it, enable button 2, and so on and so on.
How can I do that?

Since IDs must be unique to the DOM tree, you might consider using a class instead.
$(function() {
$(".group-post-comment-input").on('keyup', function() {
let $button = $(this).next('.comment-submit');
let disabled = !this.value;
$button.prop('disabled', disabled);
});
});
form {
margin: 0 0 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="comment.php" method="POST">
<input autocomplete="off" type="text" placeholder="Add a comment" class="group-post-comment-input">
<button class="comment-submit" disabled>Comment</button>
</form>
<form action="comment.php" method="POST">
<input autocomplete="off" type="text" placeholder="Add a comment" class="group-post-comment-input">
<button class="comment-submit" disabled>Comment</button>
</form>
<form action="comment.php" method="POST">
<input autocomplete="off" type="text" placeholder="Add a comment" class="group-post-comment-input">
<button class="comment-submit" disabled>Comment</button>
</form>
In my demonstration, I use jQuery's next() to traverse from the input on which the "keyup" event is fired to its associated button.
.next( [selector ] )
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
Another method is to traverse up to the form element with closest() and back down to the button with find(). This might be useful if you expect your HTML structure to change in a way that could break the next() traversal.
let $button = $(this).closest('form').find('.comment-submit');
I also recommend using prop() instead of attr() to enable and disable inputs.

ID must be unique,
but you need to use a name for sending information to your PHP server
document.querySelectorAll('button.comment-submit').forEach( bt => bt.disabled = true )
document.querySelectorAll('input[name="group-post-comment-input"]').forEach( inEl =>
inEl.oninput = e =>inEl.nextElementSibling.disabled = (inEl.value.trim().length === 0) )
<form action="comment.php" method="POST">
<input autocomplete="off" type="text" placeholder="Add a comment" name="group-post-comment-input">
<button class="comment-submit"> Comment </button>
</form>
<br>
<form action="comment.php" method="POST">
<input autocomplete="off" type="text" placeholder="Add a comment" name="group-post-comment-input">
<button class="comment-submit"> Comment </button>
</form>
<br>
<form action="comment.php" method="POST">
<input autocomplete="off" type="text" placeholder="Add a comment" name="group-post-comment-input">
<button class="comment-submit"> Comment </button>
</form>

extract value from field in javascript

I'm trying to get the output to be what the user types in to the input field but it says "undefined" when I press submit. Why is this and how do I fix it, Thanks
function myFunction() {
document.getElementById("output").innerHTML = document.getElementById("input").value;
}
<form id="input" action="/action_page.php">
input: <input type="text" name="input"><br><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<p id="output"></p>
I got it, i had 2 things with the same id

You need to add an id to your input field and not the form. Or you need to create a new id for the input field.
function myFunction() {
document.getElementById("output").innerHTML = document.getElementById("input").value;
}
<form action="/action_page.php">
input: <input type="text" name="input" id="input"><br><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<p id="output"></p>
You could also use selectors #input > [type=text] like this:
function myFunction() {
document.getElementById("output").innerHTML = document.querySelector("#input > [type=text]").value;
}
<form id="input" action="/action_page.php">
input: <input type="text" name="input"><br><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<p id="output"></p>

you are trying to get the value of element whose id is input as per the javascript code:
document.getElementById("input").value
Now the form has this id, so it is giving you undefined.
Assign another id to your input type="text" and use it in document.getElementById("input").value , your code will work fine

How to get a specific form elements using jQuery

I have a multiple forms in a page and i would like to get the elements of a specific form. For example:
<form class="form" id="1">
<input type="text" name="message" value="message">
<button type="submit" value="submit">Submit</button>
</form>
<form class="form" id="2">
<input type="text" name="message" value="message">
<button type="submit" value="submit">Submit</button>
</form>
How to get the value of message of form id=2...... Thanks in advance

Just use attribute selectors
$('form[id=2]') // get the form with id = 2
.find('input[name=message]') // locate the input element with attribute name = message
.attr("value"); // get the attribute = value

You really shouldn't use raw numbers for ids, let's rename those to form_1 and form_2, then your jquery selector would be:
$("#form_2 [name='message']").val();

Simply query the input from the id of the form you'd like
console.log($('#2 input').val());
//more specific
console.log($('#2 input[name="message"]').val());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form" id="1">
<input type="text" name="message" value="message">
<button type="submit" value="submit">Submit</button>
</form>
<form class="form" id="2">
<input type="text" name="message" value="message">
<button type="submit" value="submit">Submit</button>
</form>

You can use jQuery, or you can use basic JavaScript to return the message value. With basic JS, you would have to give your form a name, but then could return the message value.
Code:
function getValue() {
var message = document.forms["form_name"]["message"].value;
}
You would then have to return the function when the form is submitted
<form class="form" name="form_name" onsubmit="return getValue()">

Adding to input field a value with javascript

I have a Javascript code that should update a form input value, but it does not work.
Here is the code:
<script>
function up2(mul)
{
var passcode = parseInt(document.getElementById("passcode").value);
var nou = mul;
var resultat = passcode+nou;
document.login.passcode.value = resultat;
}
function formSubmit()
{
document.getElementById("login").submit();
}
</script>
And the html:
<body OnLoad="document.login.passcode.focus();">
<h1>FORM</h1>
<hr>
<form name="login" method="post" action="login.php">
<input type="number" name="passcode">
<input type="submit" value="Entra">
</form>
<center>
<button onclick="up2('1')">1</button>
<button onclick="up2('2')">2</button>
<button onclick="up2('3')">3</button><br>
<button onclick="up2('4')">4</button>
<button onclick="up2('5')">5</button>
<button onclick="up2('6')">6</button><br>
<button onclick="up2('7')">7</button>
<button onclick="up2('8')">8</button>
<button onclick="up2('9')">9</button><br>
<button onclick="up2('0')">0</button>
<br><br>
<button onclick="formSubmit()">ENTRA</button>
</center>
</body>
When the Javascript was only document.login.passcode.value = mul; it changed the input value with the number pressed (it didn't add the new number to the one that's in the field). Now I want to make a passcode login, and it should add the number pressed to the field.
If there's a way to do it with jQuery it would be ok.

You are using getElementById() but haven't ID attributes on your HTML elements
<input type="number" name="passcode">
should be
<input type="number" id="passcode" name="passcode">
FYI, you have the same error on your <form> tag.

Why does this code not add another field when clicking on the `add another field` input button?

Why does the following code not add another text input field when clicking on the add another field input button?
<html>
<head>
<script>
function add_field()
{
var elem = document.createElement("input");
elem.setAttribute('type','text');
elem.setAttribute('name','user');
document.body.insertBefore(elem, document.getElementById('su'));
}
</script>
</head>
<body>
<form name="input" method="get">
Put input here:<br>
<input type="text" name="user">
<input type="button" onclick="add_field()" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
</body>
</html>

According to the MDN reference page, you need to call parent.insertBefore(newElem, referenceElem). In your example, I suppose that <form> is the parent, not <body>. Changing the last line of your function to this:
var target = document.getElementById('su');
target.parentNode.insertBefore(elem, target);
will make it work.

jQuery solution here
<form name="input" method="get">
Put input here:<br>
<input id='ap' type="text" name="user">
<input id="addField" type="button" value="Add another field"><br>
<input id="su" type="submit" value="Submit"><br>
</form>
JavaScript
$('#addField').click(function(e)
{
$('<input type="text" />').insertBefore('#su')
});​​