We Keep Coding

How to prevent my Form from submitting with Enter Key in Vue.js?

I always try $event in Vue.js but it never worked for me.
This is my Register Form html script :
<form #submit.prevent="RegisterUser($event)" name="register-form" novalidate>
<div class="accordion" role="tablist">
<AccountCredentials />
</div>
</form>
My Register function :
async RegisterUser(e) {
console.log('event', e.keyCode); // got undefined
if (e.keyCode !== 13) { // I wanna execute this code while it's not enter key
if (this.v_isAllRegisterStepsValid() === true) {
// REGISTER USER IF FORM IS VALID
await store.dispatch('auth/UserRegister');
if (this.is_user_registered === false) {
this.mx_setModalOptions('Register Failed', this.register_msg, true); // show modal
}
}
else { // SHOW ERROR MESSAGE IF FORM IS NOT VALID
this.v_showStepsValidationError();
} // end else
}
},
When I hit the Enter button, my Form submits.
e.keyCode got undefined How can I prevent submit with Enter button ?

Tried out your code and seeing what $event actually contains... (you can do that too, by console logging e in your RegisterUser function). It does not contain keycode or key, nothing that really distinguishes if you have pressed enter or a button. There is a property called submitter, that though if you press enter and have a submit button present, it will always return the button element... Hmm.
So what I figured you could do is to actually make the submit button a regular button with setting type='button', call the same function that you would on submit. By the way, no need to add $event as the parameter, that comes along automatically :)
Seems you have a child component as your form, so I assume you have the submit button there? If so, you need to either move the submit button to the parent (I would do that). You can use slot if needed. If you want to keep button in child, then you would need to $emit the event to the parent... Anyway, the solution below has the submit button in the parent:
<form #submit.prevent="RegisterUser">
<AccountCredentials />
<button type="button" #click="RegisterUser">Submit</button>
</form>
And in the function we check if the type of the event is click (the button) or submit (the enter press):
RegisterUser(e) {
if (e.type === 'submit') {
console.log('enter has been pressed!');
// do stuff!
}
else if (e.type === 'click') {
console.log('button clicked!');
// do stuff!
} else {
console.log('Sorry, I dont know what happened!');
}
},

Prevent form from being submitted - jquery

I want to check if there's at least one checkbox that checked in a form after the submit button is clicked, if no, the the user should get message and the form SHOULDN'T be submit, so I wrote this code:
jQuery(document).ready(function ($) {
$('#price_quote_create_invoice').click(function () {
$('.price-quotes-table input[type="checkbox"]').each(function () {
if ( $(this).is(':checked') ){
$('#post').submit();
return false;
} else {
alert("You didn't chose any checkbox!");
return false;
}
}) ;
});
});
However, after I press ok on the alert box, the form does submit.
Any idea why this is happening?

Your code is almost right.
You return false on a click event but what you really want to do is to stop the submit event.
Change like this.
$('#yourFormId').submit(function(){
if (!$(this).find('input[type="checkbox"]:checked').length) {
alert("You didn't chose any checkbox!");
return false;
}
});

alert('You didn't chose any checkbox!');
You have an additional comma in your alert..

You can use event.preventDefault() to do this. event is the first argument of your click function. Reference

MVC - Issue with users double-clicking Submit button

I have a number of pages in my MVC app where the user clicks a Submit button to post a form. Sometimes users will click Submit and since nothing happens immediately, click it again. Therefore, the form submits twice. To prevent this, I have the following JavaScript code:
// When the user submits the form, disable the Save button so there is no chance
// the form can get double posted.
$('#form').submit(function () {
$(this).find('input[type=submit]').prop('disabled', true);
return true;
});
This code disables the Submit button so the user cannot click twice. This works fine. However, if there are client side validation errors on the form, the Submit button gets disabled but the form is never posted, and now the user cannot post the form. Is there a change I can make to the JS code to detect if there were client side validation errors, and, if so, I either don't disable the Submit button, or reenable it?

If you are using jQuery Validate, you can check to see if the form is valid before disabling the button:
$('#form').submit(function () {
if ($(this).valid()) {
$(this).find('input[type=submit]').prop('disabled', true);
}
});

You can try something like this:
<button id="subButton" /> <!-- do not use type="submit" because some browsers will automatically send the form -->
Javascript:
$('#subButton').click(function (e) {
e.preventDefault(); //prevent browser's default behaviour to submit the form
$(this).prop('disabled', true);
doValidation();
});
var pTimeout;
function doValidation() {
ajaxLoader.show(); //lock the screen with ajaxLoader
var form = $('#registerForm');
var isPending = form.validate().pendingRequest !== 0; // find out if there are any pending remote requests ([Remote] attribute on model)
if (isPending) {
if (typeof pTimeout !== "undefined") {
clearTimeout(pTimeout);
}
pTimeout = setTimeout(doValidation, 200); //do the validation again until there are no pending validation requests
}
var isValid = form.valid(); //have to validate the form itself (because form.Valid() won't work on [Remote] attributes, thats why we need the code above
if (!isPending) {
ajaxLoader.hide();
if (isValid) {
$('#registerForm').submit(); //if there are no pending changes and the form is valid, you can send it
}
else {
$('#subButton').prop('disabled', false); //else we reenable the submit button
}
}};

Switch it around.
$("input[type='submit']").on("click", function (event) {
event.preventDefault();
$(this).prop("disabled", true);
// perform error checking
if (noErrors) {
$("#form").submit();
}
else {
$(this).prop("disabled", false);
}
});

jquery preventDefault on alert, if alert = ok, then send

I am trying to create an alert, to insure that the user is submitting the correct information and if 'Ok' is clicked rather than cancel, the link is clicked and <a> sent. I have nearly achieved it, the alert activates, however does not activate if ok is clicked. Unfortunately, I am not a js wizard, yet..
EDIT :
click => preventDefault => alert (yes, no) if yes(send) if no dont.
<script>
jQuery(document).ready(function($){
$("input.btn-default").click(function(e){
e.preventDefault();
var answer=confirm('Are you sure that you want to do this?');
if(answer == true){
///not sure how to remove the prevent default and send link?!
}
else{
return;
}
});
});
</script>

Try the following code using return false; if the user cancel confirm dialog and window.open( $(this).att('href') ); to open the link when he user click OK :
$("input.btn-default").click(function(e)
{
e.preventDefault();
if( confirm('Are you sure that you want to do this?') )
{
window.open( $(this).att('href') );
}
else
{
return false;
}
});
Hope this helps.

confirm() is modal, so you just need to check for answer:
jQuery(document).ready(function ($) {
$("input.btn-default").click(function (e) {
var answer = confirm('Are you sure that you want to do this?');
if (!answer) {
e.preventDefault();
}
});
});

Confirm box Twig, Symfony and Javascript

When a submit button is pushed, I want to give the user an alert to make sure they want to delete something.
So far, I have this to do so
In the Twig file
{{ form_start(form, {'attr': {'id': 'delete_form'}}) }}
And in the Javascript file
window.onload = function() {
confirmDelete();
};
function confirmDelete(){
var el = document.getElementById('delete_form');
if (el) {
el.addEventListener('submit', function () {
return confirm('Are you sure you want to delete this question?');
}, false);
}
else {
console.log("No form found");
}}
But now, when the cancel button of the alert is clicked, the data is still being deleted.
What am I doing wrong?

You are not preventing the form from being submited.
And in your confirm delete you will have to trigger submit event if the user clicks yes else do nothing.
// listen to the submit event
$('#delete_form').on('submit', function(e) {
// prevent form from being submitted
e.preventDefault();
confirmDelete();
});
function confirmDelete() {
var result = confirm('Are you sure you want to delete this question?');
// I do not know what result returns but in case that yes is true
if (result === true) {
$('#delete_form').submit();
}
}