Develop Reference

How to get input.value in JavaScript when the "Enter" key is pressed if I have more buttons next to the input tag?

Here I have some code. And I am trying to get the input.value with JavaScript when I press the enter.
If I delete the first button than it is working, but if I leave the code like this, or if I place the first button before the input tag- it is not working.
const todoInput = document.querySelector(".todo-input");
const submit = document.querySelector(".addBtn");
submit.addEventListener("click", () => {
console.log(todoInput.value);
})
<div class="todo-input-container">
<form class="input-form">
<input
type="text"
class="todo-input"
placeholder="Add task..." />
<button class="btn flagBtn inputFlagBtn">
<span>
<i class="far fa-flag"></i>
</span>
</button>
<button class="btn addBtn" type="submit">
<span>
<i class="fas fa-plus-circle"></i>
</span>
</button>
</form>
</div>
Why I can get the todoInput.value when I press the "Enter" key only when I delete the first button from the html?
And what tweak I need to do to make it work with both buttons?

Pressing Enter in the input field only submits the form automatically if there's one submit button.
Your flag button is also a submit button, since that's the default when there no type attribute. If it shouldn't be a submit button, add type="button" to it.
const todoInput = document.querySelector(".todo-input");
const submit = document.querySelector(".addBtn");
submit.addEventListener("click", () => {
console.log(todoInput.value);
})
<div class="todo-input-container">
<form class="input-form">
<input
type="text"
class="todo-input"
placeholder="Add task..." />
<button class="btn flagBtn inputFlagBtn" type="button">
<span>
<i class="far fa-flag"></i>
</span>
</button>
<button class="btn addBtn" type="submit">
<span>
<i class="fas fa-plus-circle"></i>
</span>
</button>
</form>
</div>

You can add a keydown event listener on your Input field, such that when the user clicks into the input element, types something, then hits enter, the event listener should be triggered.
const todoInput = document.querySelector(".todo-input");
const submit = document.querySelector(".addBtn");
submit.addEventListener("click", () => {
console.log(todoInput.value);
});
//jQuery
$("input").on("keydown", function (e) {
if (e.keyCode == 13) { //13 is keyCode for Enter key
e.preventDefault(); //look this up
console.log(todoInput.value);
}
});

html validation on button or hidden filed

wondering if anyone can help. As part of a form, i'm using a selection of buttons to capture satisfaction, rather than radio or dropdown. I'm using a jquery to capture the value of the button and adding it to a hidden field - the field the form is using to submit the information.
All works fine, however, i want to put validation, to make sure an answer is captured - but HTLM5 validation does not support buttons or hidden fields. Is there a was i can use JS to check if a button has been pressed on submit, and if not, toggle the html validator for that field?
Here the code i have so far;
<div class="form-group">
<label class="control-label required input_satisfaction" for="feedbackQuestions[56]">Please rate the venue facilities: <span class="required ">*</span></label>
<input required="required" type="hidden" name="feedbackQuestions[56]" id="feedbackQuestions_56">
<div id="feedbackQuestions_56_group" class="row">
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][0]" value="Excellent">Excellent</button></div>
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][1]" value="Good">Good</button></div>
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][2]" value="Satisfactory">Satisfactory</button></div>
<div class="col-xs-3"><button class="satisfactionBtn btn btn-primary btn-lg btn-block" required="required" name="Questions[56][3]" value="Poor">Poor</button></div>
</div>
<script>
$('#feedbackQuestions_56_group .satisfactionBtn').click(function (e) {
e.preventDefault();
$('#feedbackQuestions_56_group .satisfactionBtn').each(function( index ) {
$( this ).removeClass('active');
});
var thisval = $(this).val();
$('#feedbackQuestions_56').val(thisval);
$(this).addClass('active');
});
</script>
</div>
I know i need to add a trigger to the submit button futher down the page, so i can do a jquery .click() and then prevent the event until i've checked, but not sure how to actually check or how to trigger the validation.

I would actually store it as a global JS variable rather than a hidden field. you can reparse this value to the hidden field through jQuery if you want, but I don't see a use in that. Also divs are selectable in JS as well, so you do not need them to be just one or the other.
var isSelected = false;
$('#feedbackQuestions_56_group .satisfactionBtn').click(function (e) {
e.preventDefault();
$('#feedbackQuestions_56_group .satisfactionBtn').each(function (index) {
$(this).removeClass('active');
});
var thisval = this.id;
console.log("thisval: " + thisval);
$('#feedbackQuestions_56').val(thisval);
$(this).addClass('active');
isSelected = true
});
$('#onSubmit').click(function () {
console.log(isSelected);
//
// Look into ajax post command
//
if (isSelected == true) {
// ajax call here
}
else {
alert("Please select a rating")
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="form-group">
<label class="control-label required input_satisfaction" for="feedbackQuestions[56]">Please rate the venue facilities:
<span class="required ">*</span>
</label>
<div id="feedbackQuestions_56_group" class="row">
<div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block" name="Questions[56][0]" id="Excellent">Excellent
</div>
<div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block" name="Questions[56][1]" id="Good">Good
</div>
<div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block" name="Questions[56][2]" id="Satisfactory">Satisfactory
</div>
<div class="col-xs-3 satisfactionBtn btn btn-primary btn-lg btn-block" name="Questions[56][3]" id="Poor">Poor
</div>
<div class=" btn btn-primary btn-lg btn-block" id="onSubmit">Submit</div>
</div>

Since that hidden field value is filled by code not user, code should validate the value(or no need to validate).
It sounds really strange that the hidden field need to be validated.
Edited
If you really need to validate hidden field, the original way is not working, but you can do it tricky by just add opacity:0 style.
Add such style make it invisible but not hidden, so the validate should work fine as usual.
But just remember you must change the type="hidden" to type="text"

Multiple submit buttons in angular2 form

I am building angular2 form and I would like to have multiple buttons to submit the form, e.g "Save" and "Save and close".
I have tried to use simple buttons with click action on them, but I didn't find anyway to manually mark form as submitted to force form validation.
<form #ticketForm="ngForm" novalidate>
<input type="text" id="customerName" required
name="customerName" [(ngModel)]="ticket.customerName"
#customerName="ngModel">
<div class="tj-form-input-errors"
*ngIf="customerName.errors && (customerName.dirty ||
customerName.touched || ticketForm.submitted)">
<small [hidden]="!customerName.errors.required">
Customer name is required
</small>
</div>
<button type="button" (click)="save(ticketForm)">Save</button>
<button type="button" (click)="saveAndClose(ticketForm)">Save and close</button>
</form>

Assign different id to each button. Then you can obtain the id of the button which triggered submit using document.activeElement.id. like the following :
In your Html :
<form #form="ngForm" (submit)="firstSave(form,$event)">
...
<div class="form-group">
<input type="submit" id="submit-1" value="Submit 1" class="btn btn-sm btn-primary"/>
<input type="submit" id="submit-2" value="Submit 2" class="btn btn-sm btn-success"/>
</div>
</form>
Then in your typescript :
firstSave(form: NgForm, $event: Event) {
var activeButton = document.activeElement.id; // document.activeElement?.id
if (activeButton == "submit-1") {
alert("you have clicked on submit 1");
}
if (activeButton == "submit-2") {
alert("you have clicked on submit 2");
}
}
StackBlitz Here.

You can subscribe to form changes, which I think will fire form validation.
I do something like this:
this.physicalForm.valueChanges
.map((value) => {
return value;
})
.filter((value) => this.physicalForm.valid)
.subscribe((value) => {
do what you need with the values here...
});
Then in your click handler for each button, if this.physicalForm.valid you save or save&update.

i ran into the same situation. In my case i have 2 submit 'Save','Save and Allocate'
Solution
You can simply set the the type of submit button in the payload and do the action accordingly in the backend code.
Sample code
//here formData is my payload for the API call eg: formData.name,formData.email
<button type="submit" class="btn btn-primary md" (click)="formData.save_type='save'">Save</button>
<button type="submit" class="btn btn-primary md" (click)="formData.save_type='allocate'">Save And Allocate</button>

Two forms from one input

I'm wondering how I can make this work, unfortunately my code doesn't work. I want my form to have two buttons; one goes to the other PHP file, and the other goes to another PHP file.
The first button, SUBMIT, is working fine. But the second button, SEE RANK, is not working, nothing happens after clicking it
<section class="small-section bg-gray-lighter" id="start">
<div class="container relative">
<!-- FORMS -->
<form id="format" class="form align-center" action="Algorithms/article.php" method = "GET">
<form id="rank" class="form align-center" action="Algorithms/Main2.php" method = "GET">
<div class="row">
<div class="col-md-8 align-center col-md-offset-2">
<div class="newsletter-label font-alt">
Type the description of your case below
</div>
<div class="mb-20">
<!-- INPUT TEXT FIELD -->
<input placeholder="Start typing here" name = "caseInput" class="newsletter-field form-control input-md round mb-xs-12" type="text" required/>
</form>
</form>
<!-- BUTTONS -->
<button form="format" type="submit" class="btn btn-mod btn-medium btn-round mb-xs-10">
Submit
</button>
<button form="rank" type="submit" class="btn btn-mod btn-medium btn-round mb-xs-10">
See rank
</button>
<!-- END OF BUTTONS -->
</div>
<div class="form-tip">
<i class="fa fa-info-circle"></i> Ex. "The father killed her daughter."
</div>
<div id="subscribe-result"></div>
</div>
</div>
</div>
</section>
And it looks like this:

First, it doesn't make sense to use <form> inside <form>. There are couple of ways to do this:
Method 1
Use 2 forms instead.
<form method="post" action="php_file_1.php" id="form1">
<!-- Your further HTML Code Goes Here... -->
</form>
<form method="post" action="php_file_2.php" id="form2">
<!-- Your further HTML Code Goes Here... -->
</form>
Method 2
Use a single PHP file. But perform different function on each button click.
<form method="post" action="functions.php" id="form">
<!-- Your further HTML Code Goes Here... -->
<input type="submit" name="action_1" id="button1">
<input type="submit" name="action_2" id="button2">
</form>
Then in your functions.php file:
if(isset($_POST['action_1'])){
action1(); // Your Function Name...
}
elseif(isset($_POST['action_2'])){
action2(); // Your second function
}

You cannot have a form inside a form. (This is why your second buton does not work)
So, your solution will be to have 2 'submit' elements with different names in your form. Then, on form submission, detect and process accordingly depending on which button was pressed.
<!-- BUTTONS -->
<input type="submit" name='submitAction1' class="btn..." value='Submit'>
<input type="submit" name='submitAction2' class="btn..." value='See rank'>
if(isset($_POST['submitAction1'])){
// process form 1
} elseif (isset($_POST['submitAction2'])){
// process form 2
}

From XHTML™ 1.0 The Extensible HyperText Markup Language (Second Edition) - B. Element Prohibitions
form must not contain other form elements
Implementation example with a javascript function which changes the form's action:
<html>
<body>
<script>
function mySubmit(wtf) {
if ('article' == wtf ) {
document.forms['myForm'].action = 'Algorithms/article.php';
} else if ('Main2' == wtf ) {
document.forms['myForm'].action = 'Algorithms/Main2.php';
} else
return false;
document.forms['myForm'].submit();
}
</script>
<form name="myForm">
<input type ="button" value="submit article" class="btn btn-mod btn-medium btn-round mb-xs-10" onClick="mySubmit('article')">
<input type ="button" value="submit Main2" class="btn btn-mod btn-medium btn-round mb-xs-10" onClick="mySubmit('Main2')">
</form>
</body>
</html>

Using $(this) with css class selectors in Jquery

I have below HTML to display and download tracks . What i need is to hide Play button , Download button and the share button when user clicks share button(what i really need is to show social media buttons after hiding the default buttons) .
<form action="index.php" method="post">
<div id="53">
Track Name :- <b>Get Low</b>
<br />By :- DJ perera
<br />
<button class="playback btn btn-primary btn-sm weezy"><i class="fa fa-play"></i> Play</button>
<audio src="../members/memberfiles/16/Get Low.mp3">
Your browser does not support HTML5 audio.
</audio>
<button class="btn btn-sm btn-success weezy" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
<button class="sharer btn btn-sm btn-danger weezy" type="button"><span class="fa fa-share-alt"></span> Share</button>
<br />
<input type="hidden" value="Get Low.mp3" name="file_name">
<input type="hidden" value="bWVtYmVyZmlsZXMvMTYvR2V0IExvdy5tcDM=" name="link">
</div>
</form>
<br>
<form action="index.php" method="post">
<div id="52">
Track Name :- <b>Eclips - Hardwell</b>
<br />By :- DJ perera
<br />
<button class="playback btn btn-primary btn-sm weezy"><i class="fa fa-play"></i> Play</button>
<audio src="../members/memberfiles/16/Eclips - Hardwell.mp3">
Your browser does not support HTML5 audio.
</audio>
<button class="btn btn-sm btn-success weezy" type="submit" name="dwn"><i class="fa fa-download"></i> Download MP3</button>
<button class="sharer btn btn-sm btn-danger weezy" type="button"><span class="fa fa-share-alt"></span> Share</button>
<br />
<input type="hidden" value="Eclips - Hardwell.mp3" name="file_name">
<input type="hidden" value="bWVtYmVyZmlsZXMvMTYvRWNsaXBzIC0gSGFyZHdlbGwubXAz" name="link">
</div>
</form>
<br>
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$('.weezy').slideUp();
});
});
</script>
i already have above js code to hide play , download and share buttons when a user clicks share button . The Problem is since im using css class selectors , when user press Share button it hide all the play buttons , download buttons and share buttons from the webpage . what i need to achieve is that when a user click share button i need to hide only buttons that belong into that form only .
i have already tried doing this . but it won't work
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$(this).$('.weezy').slideUp();
});
});
</script>
and
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$(this).find('.weezy').slideUp();
});
});
</script>
and this
<script type="text/javascript">
$(document).ready(function(){
$('.sharer').click(function(){
$('.weezy',this).slideUp();
});
});
</script>
Kindly point out what went wrong since im new to javascript . Thanks

Use .closest() to select the closest parent form element of the clicked element. From there, select the desired element within that form.
Example Here
$('.sharer').on('click', function () {
$(this).closest('form').find('.weezy').slideUp();
});