We Keep Coding

how to assign the "Enter key" to an onclick event?

here i have number input bar with a tag assigned as button , i have an onclick function . how can i make the oncklick to be executed when the user press enter ? ( at this point the user will input a number in the box and press the button with the mouse - how can i make it so the user will input the number and press Enter and the same onclick function will be executed ? )
many thanks in advance.
i tried some codes but they wont work
enter code here
<div id="foot1">
<form action="" method="" name="vform">
<input type ="number" min="0" max="10000000"
placeholder="PEEM it!" value="" id="footbar" />
<div id="foot2">
<li class="foot" alt="foot" title="FOOT (ft)" onclick="runfoot()"></li>
</div>
</div>

You can use the keydown event or similar (keyup, keypress):
document.addEventListener('keydown', function(event) {
const ENTERKEY = 13;
if (event.keyCode === ENTERKEY) {
runfoot()
}
});
https://developer.mozilla.org/en-US/docs/Web/Events/keydown

Just use jQuery's click:
$(document).on("keydown", e => {
if (e.key == "Enter") {
$(".foot").click();
}
});

You can try this:
<div id="foot1">
<form action="" method="" name="vform" onsubmit="return false">
<input
type="number"
min="0"
max="10000000"
placeholder="PEEM it!"
value=""
id="footbar"
/>
<div id="foot2">
<li class="foot" alt="foot" title="FOOT (ft)" onclick="runfoot()">
</li>
</div>
</form>
</div>
<script>
document
.getElementById('footbar')
.addEventListener('keyup', function(event) {
const key = 13;
if (event.keyCode == key) {
runfoot();
}
});
</script>

How to submit a form only if all the required attr fields are filled using bootstrap?

I have to submit the form only if all the input fields which has the required="required" attribute.
My form:
<form method="post" action="/actions.php/" data-js-validate="true" data-js-highlight-state-msg="true" data-js-show-valid-msg="true">
<input type="text" name="amount[]" required="required" placeholder="Amount" class="inputChangeVal" data-js-input-type="number" />
<input type="text" name="grade[]" required="required" placeholder="Amount" class="inputChangeVal" data-js-input-type="number" />
<button class="btn" type="submit" name="confirm" >Pay Now</button>
</form>
I wanted to submit the form after showing a message box.
As you see my form action is another php file.
so I prevent the default behavior and then send the form if the continue button is clicked.
I use bootsrap for that.
Bootstrap model :
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Proccess Payment</h4>
</div>
<div class="modal-body">
<p>
"Your about to make a online payment. Click 'Edit' to review the data before proceeding or click 'Continue' to confirm the details for payment."
</p>
<button class="btn btn-default" data-dismiss="modal">Edit</button>
<button class="btn btn-primary" id="continuebtn">Continue</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and the jQuery for that:
<script>
jQuery( document ).ready(function() {
/* for boot strap model */
jQuery('#payBtn').on('click',function(e){
e.preventDefault();
jQuery('#myModal').modal('toggle');
});
jQuery('#continuebtn').on('click',function(){
jQuery('form').submit();
});
});
</script>
but this one sends the from if I click the button Continue button.
No matter the input fields are filled or not..
What I want is the form should be submitted only if the fileds required="required" are filled..
how can I do this?

first of all add a id attribute on your submit button with the name of 'payBtn'.
after that
replace the following jquery with your current js
<script>
jQuery( document ).ready(function() {
jQuery('#payBtn').on('click',function(e){
e.preventDefault();
var empty = false;
jQuery('input:text').each(function(){
if(jQuery(this).val()==''){
console.log('error');
empty = false;
} else empty = true;
});
if(empty)
jQuery('#myModal').modal('toggle');
else
console.log('your error message');
});
jQuery('#continuebtn').on('click',function(){
jQuery('form').submit();
});
});

$('form').on('submit', function(event){
event.preventDefault();
event.stopPropagination();
var check = true;
$('*[requiered]').each(function(){
// run other filter functions here
if($(this).val().trim().length < 1){
check = false;
}
´ });
if(!check){
alert('something is missing');
} else {
// all is fine
$(this).submit();
}
})
something like this?

You can add some conditions in your jQuery function :
jQuery('#continuebtn').on('click',function(){
if($("#myInput").val() != "")
{
jQuery('form').submit();
}
});
This way, you can do specific actions for each input.
But there is another method which consist to check all inputs containing "required" attribute at once
var missingFieldCounter = 0; // we count the number of field missing
jQuery('#continuebtn').on('click',function(){
$(':input[required]').each(function() // for each input that contains "required" attribute
{
if($(this).val() == "") // if the required input is not filled
{
missingFieldCounter+=1;
$(this).after("<b>You have to fill this field</b>"); // we print a message after the input
}
});
if(missingFieldCounter == 0) // if the counter has never been incremented (every field is filled)
{
jQuery('form').submit();
}
});
See the fiddle Here

here is a working sample
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test-Projekt</title>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=10">
<link href="favicon.ico" rel="Shortcut icon">
</head>
<body>
<form action="" method="GET">
<div>
<label>required input</label>
</div>
<div>
<input type="text" name="myInput" required>
</div>
<div>
<button id="btn_submit" type="submit">Submit Form</button>
</div>
</form>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous">
</script>
<script type="application/javascript">
$(document).ready(function(){
$('#btn_submit').on('click', function(event){
event.preventDefault();
event.stopPropagation();
var formElement = $(this).parents('form');
formElement.find('input:required').each(function(){
var minLength = 1;
var value = $(this).val();
var checked = true;
if(value.trim().length < minLength) {
console.log('length is not ok');
checked = false;
}
if(!checked){
console.log($(this).attr('name') + ' is not correctly filled!');
} else {
console.log('all is ok');
formElement.submit();
}
});
});
});
</script>
</html>
by the way. if you use html 5 the and you don't do anything, every input filed with the required property will be checked by modern browsers automaticly. that's the reason because i don't use it if don't have to filter fields for special chars.

If $('#formid').submit() doesn't show the missing fields like when we click on submit button, then what about creating a hidden submit button and simulating a click?
If you put something like the following inside your form:
<input id="send" type="submit" style="display: none"/>
Now the JavaScript part:
$(document).ready(function(){
$('#continuebtn').on('click', function(event){
$('#send').trigger('click');
})
});
You'll see that when you click on your #continuebtn you'll get the missing fields.
The browser already knows where are the missing fields. It's much more productive to reuse it instead of writing jquery calls and reinvent the wheel.
I believe that this is not the best solution but it works with very little modification of our code base.

You can easily make a field required by including required within the input type.
My example:
<div class="contact-form-value">
<input required type="text" name="PhoneNumber" id="phonenumber">
</div>

Onkeypress function not working on bootstrap input box

I've been trying to code a function that goes to a different page when the user hits the enter key into a certain input box. Here's the code:
<div class="container">
<div class="row">
<form>
<div id="search" onkeypress="enter(event)" >
<div class="input-group col-md-offset-8 col-md-3">
<input type="text" class="form-control">
<div class="input-group-btn">
<i class="glyphicon glyphicon-search"></i>
</div>
</div>
</div>
</form>
</div>
</div>
<script>
function enter(event){
if (event.keyCode == 13){
document.location.href = "newpage.com";
}
}
</script>
Thanks in advance!

What's happening is simple, you have a "form" tag, so when you hit enter, "onkeypress" is firing the event and the function "enter" that you created is handling that event, but having a "form" tag it just submitting a form.
To avoid that, just remove the "form" tag or just replace it for the following:
<form onsubmit="event.preventDefault();">
Also, you have to add the protocol if you want to redirect to a different page, like:
document.location.href = "http://newpage.com";
I hope it helps :)

detect the submit event when click enter key

If I have one form with actually different inputs for two submit requests. When I click on any submit button I can know what action to do.
but I need to detect in which input I'm when click Enter keyboard key.
<form class="main-form">
<div class="form_one">
<input class="form_one_input" type="text" id="form_one_input"/>
<button type="submit" class="form_one_button">Submit form one</button>
</div>
<div class="form_two">
<input class="form_two_input" type="text" id="form_two_input"/>
<button type="submit" class="form_two_button">Submit form two</button>
</div>
</form>
https://jsfiddle.net/m6433obp/

To detect which input you are in use the keyup event handler as:
$('.form_one').bind('keyup', function(e) {
if(e.keyCode === 13) {
alert($(this).attr('class'));
}
})
$('.form_two').bind('keyup', function(e) {
if(e.keyCode === 13) {
alert($(this).attr('class'));
}
})
check demo for this here

I am not really sure that I understand your question correctly. But I think that since you are using two submit buttons in the same form, you should give unique names to the buttons, so that on the server side you know that on hitting enter which input got submitted.
<form class="main-form">
<div class="form_one">
<input class="form_one_input" type="text" id="form_one_input"/>
<button type="submit" name="first_button" class="form_one_button">Submit form one</button>
</div>
<div class="form_two">
<input class="form_two_input" type="text" id="form_two_input"/>
<button type="submit" name="second_button" class="form_two_button">Submit form two</button>
</div>
</form>
And the code to check:
if (isset($_POST['first_button'])) {
} else if (isset($_POST['second_button'])) {
} else {
//no button pressed
}
Hope this is what you were looking for.

generate alert on button click based on input type hidden

I have html that has tile view and each tile has some info with button. I want to check the value of an input hidden field and if the value is not in array defined raise an alert.
html
<div class="box" style="width:30%%">
<div class="boxInner">
<form id="form_myws" method="POST">
<input type="hidden" name="state" value="%s">
<div class="titleBox">
<input type="submit" value="submit" name="ws_butt" id="submit" />
</div>
</form>
</div>
</div>
javascript
<script type="text/javascript">
$('#submit').click(function(){
var state_list=["AVAILABLE","IMPAIRED","INOPERABLE",];
var curr_state=$(this).find("input[type='hidden'][name='state']");
console.log(curr_state.val());
if (jQuery.inArray(curr_state.val(),state_list)<0){
alert("submission is allowed only with AVAILABLE,IMPAIRED,INOPERABLE states.");
}
});
It is not generating any alert. How to achieve that?

var curr_state=$(this).find("input[type='hidden'][name='state']");
change it to
var curr_state=$(this).closest('form').find("input[type='hidden'][name='state']");
also add
return false;
inside if statement so it won't submit form.

If you want to subvert submit you need to do:
$('#submit').click(function(e){
// this:
e.preventDefault();
// more code
// .. or better
return false;
});
You can contain these responses in if --> then constructs but you need to do one or the other to prevent a form from submitting. If you're not using a form, don't use submit!
You can also access the hidden input value like this:
$('#form_myws > input[name="state"]').val();
Working snippet:
var val = $('#form_myws > input[name="state"]').val();
$('body').append(val);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form_myws">
<input type="hidden" name="state" value="%s">
<div class="titleBox">
<input type="submit" value="submit" name="ws_butt" id="submit" />
</div>
</form>

in your case:
var curr_state=$(this).find("input[type='hidden'][name='state']");
$(this) get the button element you selected , you can't find any childen nodes via find() So you should select the hidden input correctly like:
var curr_state=$($(this).parent()[0]).prev()[0];
or like this:
var curr_state=$($(this).parent()[0]).siblings('[name="state"]')[0];