Add another event at runtime - javascript

I have this code:
and I would like to add at runtime by JS something like this:
My idea was doing like this but I dont know how to add AND operator:
form.addEventListener('submitForm', function (e) {
e.preventDefault();
alert('onclick handler called');
}, false);

To not change the HTML itself you can do this
window.addEventListener("load",function() {
let saveBut = document.querySelector('a[title="Save"]');
let form = document.querySelector("[name=thisForm]");
form.addEventListener("submit",function(e) { e.preventDefault(); }); // stop submission by other means than the link
saveBut.onclick=null; // remove the inline event handler
saveBut.addEventListener("click",function(e) {
e.preventDefault(); // stop the link's click
if (validate(e, form)) submitForm(form); // call submitForm if valid
});
});

'submitForm' is referenced as a function in your onclick attribute, but you're trying to use it as an event. It won't work like that, <form> doesn't emit an event called 'submitForm', and it's not being called when you call a submitForm function. <form> does have a submit event.
You should avoid using the onclick attribute (and other on* attributes). Use IDs and addEventHandler to add a click event handler. Then you can just write an entire multi-line function in that handler.
You can also use an <input> or <button> of type=submit and then add an event listener of type submit to the form (if your form is a <form> element). Then you will not need to call any other functions from event listeners. The form will handle that.

Related

Jquery on/off event

So I was given code that looks like
this.$dropdownButton.off('click.fpmenu').on('click.fpmenu', function (evt) {});
where
this.$dropdownButton
Is a valid button element.
However, at the same place if I search for .fpmenu ($('.fpmenu')), I don't get anything.
Is the on/off events that I am trying to attach to $dropdownButton suppose to be a delegate of the click function of fpmenu? If it can't find fpmenu, would it cause the event not to be attached?
The fpmenu is the namespace of the event handler. This enables jQuery to remove specific event handlers, without changing others.
See Event names and namespaces in jQuery's .on() documentation.
Example - click button and see which event handler is called
var button = $('button');
button.on('click.fpmenu', function () { console.log('fpmenu'); }); // add fpmenu named event
button.on('click.somethingElse', function () { console.log('somethingElse'); }); // add somethingElse named event
button.off('click.fpmenu'); // remove fpmenu named event
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click me</button>

How to use the same code for onclick and oninput event

I use the following oninput event in:
document.getElementById('test').onkeydown = function(event) {
I need the same code to be executed if a certain button is clicked.
Rather that writing the code twice I wondered if it is possible to call the same code with an onclick event
If you want to use the same handler for different events you could do this:
function handler(){
.... your code
}
document.getElementById('test').onkeydown = handler;
document.getElementById('test').onkeyup = handler;

how can we over write the keypress event in jquery

Suppose I have a jQuery file where I have defined a key press action. And in my aspx page I want to override that key press action.
How can I achieve that?
$('#item').unbind('keypress');
var input = '#txtId'; //txtid is ur textbox,textarea id
$(input).keypress(function(e) {
e.preventDefault();
});
Imagine you have this scenario:
var handler = function(){ ... }
$('body').on('keypress', ':input', handler);
Then you can remove that specific handler - with no impact on the others - with the following:
$('body').off('keypress', ':input', handler);
To remove ALL keypress handlers just call it without passing the handler
$('body').off('keypress', ':input');
To remove all event handlers from a specific element just use it without arguments
$(':input').off();
Instead if you want simply prevent the default behaviour, just use the preventDefault function
$('body').on('keypress', ':input', function(e){
e.preventDefault();
...
});
In case instead you wat to use your handler just once there's the once function in jQuery that will bind your handler and unbind it at the end of the execution;
Sorry for the long answer but your question wasn't completely clear to me.
Documentation link for jQuery off()

Override jquery onclick event?

I have a button in ASP.NET, that renders to HTML as such:
<input id="btn" type="submit" value="clickme">
If I then add the jquery:
$('#btn').click(function(){return false;});
Every time the button is clicked, nothing will happen (i.e. no postback).
This is fine.
Is there any way in Javascript I can programatically invoke the click (which will cause a postback) whilst also disregarding the jquery-attached, return false function?
You can have the event handler accept additional arguments. When triggering the handler with .trigger you can specify values for these arguments, which will let the handler modify its behavior accordingly.
For example:
$("#btn").click(function(event, submitForm) {
submitForm = submitForm || false;
if (!submitForm) return false;
});
// This will not submit the form
$("#btn").trigger("click");
// But this will
$("#btn").trigger("click", true);
The button itself does nothing by default except submitting the form, so try this:
$('#btn').closest('form').submit();

Click Once For All Elements In Same Class

I am trying to write code that will add another row to a form automatically. It should only do this once for each form input with the class lastName.
The below code works. But it executes more than once. I want the code to only execute once for each form input with the class lastName. I am inexperienced with jquery and javascript, so I am unsure of how to approach this problem.
function AutoAdd() {
$('.lastName').focus(function(e){
$('#add_new',pupils_form).parent().before(pupils_row);
AutoAdd();
});
};
AutoAdd();
You can use the one method:
Attach a handler to an event for the elements. The handler is executed at most once per element.
$('.lastName').one('click', function(e){
$('#add_new',pupils_form).parent().before(pupils_row);
});
Also as you are binding a handler for the inputs you can put the handler outside of the function, note that your function calls itself and runs continuously. If you want to execute the handler on page load you can trigger the event:
$('.lastName').focus(function(e){
$('#add_new',pupils_form).parent().before(pupils_row);
}).focus()
For dynamically generated elements, you should delegate the event, try the following:
$(document).on('focus', '.lastName', function(){
$('#add_new',pupils_form).parent().before(pupils_row);
})
You can use data-* attributes, try the following:
<input type='text' class='lastName' data-run='go'/>
$(document).on('focus', '.lastName', function(){
if ( $(this).data('run') == 'go') {
$('#add_new',pupils_form).parent().before(pupils_row);
$(this).data('run', 'stop')
}
})
you are having an infinite call stack here. your AutoAdd will call itself again and again and ...
To avoid having to run your AutoAdd function on newly created rows, you can use jQuery's on()-function instead of focus():
$('#the-form').on('focus', '.lastName', function () {
$('#add_new',pupils_form).parent().before(pupils_row);
});
on() actually attaches to the form (you'll wanna change the selector #the-form) and listens to events that bubble up from children of said form.

Categories

Resources