We Keep Coding

Prevent user to click anywhere on page if changed value is not submitted

in my app, the user has multiple inputs, and I use #hostListener for click outside, because I have some complicated inputs (multiple checkboxes where I first need to check everything and after call submits on click outside, IMG-MAP, etc....).
--- TEXT INPUT ---
*add some value...*
-> click outside -> Submit
--- RADIO BUTTON ---
*change option...*
-> click outside -> Submit
...etc
how to in angular 9+ prevent users to click anywhere (menu, another input ...)? If the user change the value and click anywhere or on any other part of the app ( any button, menu item, another input) submit method for changed input needs to be executed instead of that where he clicked.
I try to add event.PreventDefault(), but if we click on the menu or on another button it is not triggered submit for changed value, it is a triggered method for clicked item (menu item...).
#HostListener('document:click', ['$event'])
clickOut(event) {
event.preventDefault(); // if change val in text input and click directlly on radio button option, radio button option i changed and trigered submit for text input, and that is not ok, option in radio butoon can't be changed
this.submit()
}

why not use (blur)?
Another idea can be get the event.target as HTMLElement; and check if is inner to your form to not execute event.PreventDefault()
#ViewChild('myForm',{read:ElementRef}) formElement:ElementRef
#HostListener('document:click', ['$event'])
clickOut(event) {
const clickTarget = event.target as HTMLElement;
if (this.formElement.nativeElement.contains(clickTarget))
{
console("inside myForm")
}
else
{
console("outside myForm")
}
}
NOTE: I don't check the code (I'm in hurry), but I imagine work

Changing type on element is not possible twice?

I'm relying on another plugins javascript that has code for a specific submit event that submits the form after some validation.
I'm not able to change that validation without hacking into that code.
Therefore I've came up with a hack without hacking into that plugin's code.
I'm changing the input type from submit to button type so I can do my own validation without having to take in account for action that is triggered upon submit.
There are two radiobuttons with class .give-gateway. Basically I'm doing this.
HTML (element in form):
<input type="submit" class="give-submit give-btn" id="give-purchase-button"
name="give-purchase" value="Donate Now" data-before-validation-label="Donate
Now">
jQuery:
$('body').on('click', '.give-gateway', check_gateway);
function check_gateway(id) {
//Value from which radiobutton is selected
if (current_gateway == 'swish') {
alert('changing button from ORIGINAL to new. NOW IT SHOULD BE
TYPE BUTTON!!!');
$('#give-purchase-button').prop('id', 'give-purchase-button-
new').prop('type','button');
$('body').on('click touchend', '#give-purchase-button-new', function
(e) {
alert('NEW give purchase button clicked');
//some code...
});
}
else {
alert('changing button from NEW to original. NOW IT SHOULD BE TYPE
SUBMIT!!!');
$('#give-purchase-button-new').attr('id', 'give-purchase-
button').prop('type','submit');
}
}
This works the first time:
From Submit to button
From Button to Submit
From Submit to Button
Step 3 (NOT WORKING (first click on swish gateway work but second time it does not change from submit to button)!? **Why?) **
I've also tried to programmatically add onsubmit to form but the issue there is that other plugins jquery code has a listener for click event on the actual submit - button which means that that code are executed first anyway. I don't want that to happen.
I've figured it out why now. When I click on another gateway the form is loaded with other content. When I go from swish to paypal. It loads content that is dependent of paypal stuff and creates a new submit - button. If I just change from type submit to button it does not affect anything because that change is made before the actual content is loaded (through ajax) and therefore creates a new submit button.

dynamically generated button , invalid form control with name='answer'

Im having a problem attaching an event to a dynamically generated button. However after some research most of the solutions claim this error is usually generated from a form control. However in my case the error "invalid form control with name='answer'" is being generated and triggered when a button i have dynamically generated is pressed :
$("#BoxInner").append($("<button id='dynamicButton' class='btn btn-success' onclick='clickEvent()'>"+ "Button"+"</button>"));
I have appended a button to an existing div and call an onclick function that removed this element when it is clicked like this :
function clickEvent()
{
$(this).remove();
}
After running this in chrome this method works only on the first button added. After the first button is removed as expected it begins to generate the error "clickEvent" and adding a number count on each click and after reading many posts here about the error being attributed to a form i remain unsure how to solve the issue as the button is completely unrelated to the form on my HTML document and subsequently setting the form to not require validation does not solve the issue with the "novalidate" property. But note, if i remove the attached onclick event the error is not triggered.
Any help would be appreciated :)

$("#BoxInner").append($("<button id='dynamicButton' class='btn btn-success' onclick='clickEvent(this)'>"+ "Button"+"</button>")); // pass this to clickEvent function
function clickEvent(obj)
{
$(obj).remove(); // remove button like this
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="BoxInner"></div>

This is because the event listener is created on page load.
You should do something like this
$(wrapper_that_always_exists).on('click', the_freshly_added_element, function() {
...
});
So in your example it would be something like
$('#BoxInner').on('click', '#dynamicButton', function() {
...
});
When you do this, the BoxInner element will always listen for all clicks on any element inside, initially created or not, that has the id dynamicButton

JS Function inside a click for a button is being called twice

Hi I have the following piece of code that is giving me weird behaviour
$("#cont_btn").click(function () {
$("#cont_btn").attr('disabled', 'disabled');
selRowIds = $("#CodeGrid").jqGrid('getGridParam', 'selarrrow');
rowsToJson(selRowIds);
//return false;
});
The button cont_btn is a button on a bootstrap 2 modal. It contains a continue button and a close button.
If I select the close button or click outside the modal to dismiss it, and then re-open the modal the function will get called twice.
I have tried using
.one('click', function() { ... }
and I have put break points on the line of
$("#cont_btn").click(...
click is not getting called twice. During my debugging I'm finding that the script re enters on the line of
$("#cont_btn").attr('disabled', 'disabled');
On the page load I see that the line of
$("#cont_btn").click(function () {
Is hit but the code does not enter the function it will skip to the close button. I presume this is the listener for both buttons being initialized ?
Googling this has suggested checking that the Script isn't called twice and using return false, but nothing has worked.
Any help is appreciated.

The event handler is inside the function that opens the modal, so everytime the modal is opened, the event handler is bound once more.

submit and close modal at same time

We have a form within a modal window.
I have a submit button, which saves to db. And I would like to simultaneously close the modal window.
The function for close is correct, just not my usage lol.
<input type="submit" name="upload_thumbnail" value="Save Thumbnail" id="save_thumb" onclick="$.lightbox().close();" />
The modal window , contains iframe with php / html within it, this form is part of that iframed html code.
Any suggestions ?

To close the dialog when the element with ID save_thumb is clicked:
$('#save_thumb').click(function ()
{
$.lightbox().close();
});
You might want to bind to its parent form's submit event, however, since keyboard events won't trigger the click handler:
$('#my_form_id').submit(function ()
{
$.lightbox().close();
});
Whichever you decide on, make sure to wrap it up in a document ready handler.

Add this javascript to your file and remove the onclick attribute on your button. Make sure the javascript is added inside tags.
$(document).ready(function(){
$('#save_thumb').click(function (){
$.lightbox().close();
});
});

Use the bind function,
$(function() {
$("#save_thumb").bind("click", function() {
$.lightbox().close();
});
});