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>

How to get the search box value in <p> tag - HTML,JS

Am new to javascript i foud this one in w3schools.com - Entering pincode in search box will show in <p> tag !! How to do ? any help appreciated. Thanks in advance
HTML :
<form class="form1" role="search" method="get" action="search-pincode.html">
<input class="pincode1" type="number" placeholder="Enter Postcode" id="user-pincode">
<button class="submit" type="submit" formaction="search-pincode.html" onclick="myFunction()">Check</button>
</form>
JS SCRIPT :
<script>
function myFunction() {
var x = document.getElementById("user-pincode").value;
document.getElementById("user-pincode-show").innerHTML = x;
}
</script>
OUTPUT : search-pincode.html
<h1 class="search-h1-contact">
Yes, we install CCTV in <p id="user-pincode-show"></p>
</h1>

For one, you will not see the result long enough because after clicking the button, you are being redirected to search-pincode.html. Try changing type="submit" to type="button"
function myFunction() {
var x = document.getElementById("user-pincode").value;
document.getElementById("user-pincode-show").innerHTML = x;
}
<form class="form1" role="search" method="get" action="search-pincode.html">
<input type="number" placeholder="Enter Postcode" id="user-pincode">
<button type="button" onclick="myFunction()">Check</button>
</form>
<h1 class="search-h1-contact">
Yes, we install CCTV in
<p id="user-pincode-show"></p>
</h1>
If what you are planning is to pass the value of the input to search-pincode.html, and user-pincode-show is inside it, then using JavaScript is not proper way to do it

If you want to avoid redirecting on form submition you can declare an event listener using EventTarget.addEventListener() to handle the click event and call e.preventDefault in the function handler..
Also notice that there is no need to add formaction="search-pincode.html" in the button element because the form has the attribute action="search-pincode.html"
And last thing: With in the h1 element you can better use a span element instead of p.
<h1>Yes, we install CCTV in <span id="user-pincode-show"></span></h1>
Code example:
document
.querySelector('button.submit')
.addEventListener('click', function (e) {
e.preventDefault();
var x = document.querySelector('#user-pincode');
document.querySelector('#user-pincode-show').innerHTML = x.value;
});
<form class="form1" role="search" method="get" action="search-pincode.html">
<input class="pincode1" type="number" placeholder="Enter Postcode" id="user-pincode">
<button class="submit" type="submit">Check</button>
</form>
<h1>Yes, we install CCTV in <span id="user-pincode-show"></span></h1>

function myFunction() {
var x = document.getElementById("user-pincode");
document.getElementById('user-pincode-show').innerHTML = x.value;
}
<form class="form1" role="search" method="get" action="search-pincode.html">
<input type="number" placeholder="Enter Postcode" id="user-pincode">
<button type="button" onclick="myFunction()">Check</button>
</form>
<h1 class="search-h1-contact">
Yes, we install CCTV in
<p id="user-pincode-show"></p></h1>

Unable to submit form on keypress

i want to submit a form with and enter key stroke when the user enters a username and password.I get an alert coming back from my function when the enter key is pressed.But after that it doesnt submit the form. What am i doing wrong?
<form id="myForm" action="#" onsubmit="return false;" >
<div>
<input type="text" id="username" />
</div>
<div>
<input type="password" id="password" />
</div>
<div>
<button type="submit" id="btnLogin" onclick="myFunction(0)">Log in</button>
</div>
<script type="text/javascript">
function myFunction(e) {
if ((e && e.keyCode == 13) || e == 0) {
alert("The form was submitted"); // this alert gets called,but my form doesnt get submitted
document.forms.myForm.submit();
}
}

You can use like this.(Use jquery)
1.Change Input type submit to button
2.Change the code for submitting form
3.Write a keyPress event for the form
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" action="test.html" >
<div>
<input type="text" id="username" />
</div>
<div>
<input type="password" id="password" />
</div>
<div>
<button type="button" id="btnLogin" onclick="myFunction(0)">Log in</button>
</div>
</form>
<script type="text/javascript">
function myFunction() {
alert("form submitted");
document.getElementById("myForm").submit();
}
$('#myForm').on('keydown', function (e) {
if (e.which === 13) {
myFunction();
}
});
</script>

1) Remove return false from the form onsubmit event.
2) Remove onclick event from the button.
3) Using JS, bind a submit event to the form and do what you need in the event handler, as below:
var loginForm = document.getElementById('myForm');
loginForm && loginForm.addEventListener('submit', myFunction);
function myFunction(event) {
event.preventDefault();
alert("form is about to be submitted...");
loginForm.submit();
}
<form id="myForm">
<div>
<input type="text" id="username" />
</div>
<div>
<input type="password" id="password" />
</div>
<div>
<button type="submit" id="btnLogin">Log in</button>
</div>
</form>
Even better, remove all the JS and keep only the form as in my answer. It would submit the form on enter as that's the default behaviour when there is a button/input with type submit!

You can try this without checking keyCode. You can enter key from any input fields or button inside the form.
function myFunction(e) {
var username = e.target.querySelector('#username');
var password = e.target.querySelector('#password');
if(username.value && password.value){
alert("The form was submitted");
return true;
}
return false;
}
<form id="myForm" action="#" onsubmit="return myFunction(event)">
<div>
<input type="text" id="username" />
</div>
<div>
<input type="password" id="password" />
</div>
<div>
<button type="submit" id="btnLogin">Log in</button>
</div>
</form>

I dont think you really need javascript for this as realistically pressing enter inside a form will usually submit the form.
Notice in the example below that all we are really doing is targeting
the submit event for the form and this also includes hitting the enter
key.
However to satisfy your question
Using jQuery you could try binding the keypress event to the button click submit event.
Something like this:
$("#btnLogin").blur();
$('#btnLogin').focus().click();
p.s. remember to close your <form> tag with </form>
Example
$('#myForm').submit(function() {
var confirmSubmit = confirm("Submit the form?");
if(confirmSubmit)
{
$("#btnLogin").blur();
$('#btnLogin').focus().click();
}
else
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" action="yourPage.html">
<div>
<input type="text" id="username" />
</div>
<div>
<input type="password" id="password" />
</div>
<div>
<button type="submit" id="btnLogin">Log in</button>
</div>
</form>

Issue with form validation Javascript

I am using Bootstrap and I have two identical forms. I am trying to add form submission to Google Search results and it works but when I include two of the same form it doesn't work because of the id being the same on both. How can I fix this? The ID needs to be the same because google looks for the "G". The reason I have two forms is because I have it displayed differently on mobile. Using media queries. Below is my code thanks.
<form name="globalSearch" class="navbar-form" role="search" form action="" onsubmit="return validateSearch()">
<div class="input-group add-on">
<input type="hidden" name="cx" value="" />
<input type="hidden" name="cof" value="FORID:11;NB:1" />
<input type="hidden" name="ie" value="UTF-8" />
<input class="form-control" placeholder="Search entire site..." id="q" name="q" type="text">
<div class="input-group-btn">
<button class="btn btn-default btnSubmit" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
function validateSearch() {
if (globalSearch.q.value.length == 0) {
document.getElementById("q").value = "Enter a Value";
document.getElementById("q").style.color = "red";
return false;
}
}

You probably want to change the placeholder, so the user don't have to delete the text than type in a query. Please view updated function.
function validateSearch() {
var q = document.getElementById('q');
if (q.value.length == 0) {
q.setAttribute('placeholder', 'Enter search term')
q.style.borderColor = "red";
return false;
}
}

Two elements can not share same ID.
Either use CSS styling to make different looks in mobile, either hide one of forms from webserver (PHP/etc) side either dont use getElementById - instead, use jQuery:
<form name="globalSearch" ... >
<input name="q" data-input-type="desktop" id="q">
..
</form>
<script>
function validateSearch() {
var field = $("input[data-input-type="desktop"]');
field.val("Enter value here...");
field.css("color","red");
}
</script>

Make logon screen visible/invisible javascript

I'm trying to make my logon screen appear and dissappear when a certain button is being pressed but my code doesn't seem to work and always gives a problem
document.getElementById('logon').style.visibility='hidden';
function showlogon(){
document.getElementById('logon').style.visibility="visible";
}
this is my javascript code it must be standard be hidden
<div id="logon">
<form name="login" method="post">
Username:<input name="username" type="text" size="14"/><br>
Password:<input name="password" type="password" size="14"/><br>
<input type="submit" value="Login"/>
</form>
</div>
this is the form that must be hidden by default

This works for me:
<div id="logon" style="display: none;">
<form name="login" method="post">
Username:<input name="username" type="text" size="14"/><br>
Password:<input name="password" type="password" size="14"/><br>
<input type="submit" value="Login"/>
</form>
</div>
<div id="button"><button onClick="show()">Show Screen</button></div>
<script>
function show() {
document.getElementById('logon').style.display = 'block'; // Show the #logon div
document.getElementById('button').innerHTML = '<button onClick="hide()">Hide Screen</button>';
}
function hide() {
document.getElementById('logon').style.display = 'none'; // Hide the #logon div
document.getElementById('button').innerHTML = '<button onClick="show()">Show Screen</button>';
}
</script>

Here is a small simple utility method for what you want to do:
JSFiddle: http://jsfiddle.net/W8XPR/
function get(id) {
return document.getElementById(id);
};
function toggle(id) {
el = get(id);
el.style.display='none'==el.style.display?'':"none";
};