I'm using a function from here on SO to reset a file input element.
<input type="file" id="image-file" />
JS:
function resetFormElement(e) {
e.wrap('<form>').closest('form').get(0).reset();
e.unwrap();
e.stopPropagation();
e.preventDefault();
}
resetFormElement($('#image-file'));
Resetting it seems to work but it gives the type error for stopPropagation() and preventDefault() in the console
https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation
You function looks like handler for UI event, so it wait that event-object will be passed as arguments
But when you call it manually -- it doesn't. If it is the only way you use the function - just remove redundant calls
function resetFormElement(e) {
e.wrap('<form>').closest('form').get(0).reset();
e.unwrap();
}
Related
I have this in my jsx file:
<input type="submit" onClick={() => this.validateForm()} id="account-submit" value="Sign Up" />
The function validateForm gets called but after that, the default behavior of submit button posting the form is done so a reload of the page is done. How can I trigger only the onClick function and prevent the submit from happening to prevent reload?
EDIT - Added this based on answer
validateForm: function (e) {
e.preventDefault();
}
e is undefined
You can use e.preventDefault(). You can change your input element as:
<input type="submit" onClick={this.validateForm} id="account-submit" value="Sign Up" />
And in the validateForm function:
validateForm = e => {
e.preventDefault();
// your code here
}
Update:
If you use the arrow function in the validateForm like my example, I believe it will work fine.
If you want to use the function(e) like your added code, you should change a few things. In your input tag:
<input type="submit" onClick={e => this.validateForm(e)} id="account-submit" value="Sign Up" />
In your validateForm function:
validateForm = function(e) {
console.log('Hello world');
console.log(e);
}
The code above works fine for me. You should really understand the different when you use arrow function (provide in ES6) and normal function (provide in older ES). If you don't know what the arrow function is, it's time to extend your knowledge.
Good luck and code fun!
I am just explaining what #delig29 just said.
When you make an <input type="submit" onClick={this.onSubmitForm} /> The onClick function for the submit type button fires an event and passes it to the onClick method which is this.onSubmitForm.
When you define this function which is going to be something like this
onSubmitForm = (e) => { // Here I am passing e(event) as a #param
// This method call of the event **preventDefault** will
// trigger an event which will disable the browsers default behavior
// to reload the page on hitting form submit
e.preventDefault();
/**
** Do Whatever You Want Here With Your Code
**/
}
I have the following code to attach an event listener to the form submission. The function I want to call is 'callback'.
Here is the thing: I don't understand how I am supposed to pass arguments to the function (should it be the 'event' argument?)
if(form.addEventListener){
form.addEventListener('submit', interrupt, false);
}else if(form.attachEvent){
form.attachEvent('onsubmit', interrupt);
}
function interrupt(event){
//deal with form submission here
}
//OR (???)
interrupt = function(event){
//deal with form submission here
}
I know this question might seem basic but I really don't understand how it should work...
Run this example and look for console of browser. When bind dynamic event, the event is injected. For this, the function call must receive the first parameter
var input = document.getElementById('ipTest');
if(input.addEventListener){
input.addEventListener('click', interrupt, false);
}else if(input.attachEvent){
input.attachEvent('onclick', interrupt);
}
function interrupt(event){
console.log("Event: " + event);
}
<input type="button" value="Test" id="ipTest"/>
Currently I have this code (which works just fine):
<form>
<input type="text" />
<a id="btn">add</a>
</form>
$(document).ready(function () {
$('form').submit(foo);
$('#btn').click(foo);
});
function foo() {
//do some stuff
}
I am currently binding the foo function to both the form submission, and the anchor click. But, I actually prefer not to have the form, although it seems to be the easiest way to bind the enter key on the textbox to the foo function.
What is the easiest way to achieve both bindings in one single statement, without the form, and without binding the textbox to a keypress and checking the keycode == 13? Is there a built in event I can bind to for the enter key on the textbox?
To explain with some pseudo code, this is roughly what I would like it to look like:
//get rid of the form
<input type="text" class="submit"/>
add
$(document).ready(function () {
//and only have one binding statement
$('.submit').bind('click enterPressed', foo);
});
function foo() {
//do some stuff
}
There's no ready-made event called enterPressed or any event for that matter that just responds to the enter key. The short answer is, therefore, there's no way to achieve what you've asked. The long answer is below, if you're open to creating a custom event, enterPressed.
You can define a custom event called enterPressed on the input element, and then you would have to prevent the input element from responding to any click events:
$(function() {
$('input.submit').on('keypress', function(e) {
e.which !== 13 || $(this).trigger( 'enterPressed' );
})
.on('click',function(e) { e.stopImmediatePropagation(); });
$('.submit').on('click enterPressed', foo);
function foo() {
console.log( 'foo called' );
}
});
WORKING JS FIDDLE DEMO
For your enterPressed event you can do this. Trigger your custom event:
$('#element').keyup(function(event) {
if(event.which === 13) $('#element').trigger('enterPressed');
});
You can use .on() to bind a function to multiple events including the custom one:
$('#element').on('click enterPressed', function() {
...
});
Not sure about the code. But it should give you something to look up.
On my application only inline handlers works.
This is part of my Javascript function
function onDeviceReady() {
alert('ready');
document.querySelector('#idCpf').onkeypress = alert('keypress');
document.getElementById("idCpf").onclick=alert("click");
}
And this is my part of my html code
<input type="tel" autocomplete="on" id="idCpf" onblur="alert('onblur')" placeholder="Seu CPF" required>
On onDeviceReady function only the first alert works, and onkeypress and onclick show me an alert when the function onDeviceReady without pressing, click or blur the input. But my code only works when I use inline handlers, like on input type.... onblur="alert('onblur')".
What is my problem?
document.querySelector('#idCpf').onkeypress = alert('keypress');
calls the alert('keypress'); and assigns the return value of alert('keypress'); as event handler.
alert('keypress'); is executed immediately and not when the event is triggered.
To assign event handler you must do,
document.querySelector('#idCpf').onkeypress = function () { alert('keypress') };
document.getElementById("idCpf").onclick= function () { alert("click") };
I have a form that contains input:
<input onchange="checkDomain(true); return false;" type="text" id="dsearch" value="" name="domain" maxlength="30"/>
Which works just fine in Opera, Chrome and IE - but Firefox and Safari are having problems with calling the function checkDomain(). I added a line into the function for debugging:
function checkDomain(check)
{
console.log('checkDomain() called!');
// do rest of the stuff...
}
So, Chrome/Opera/IE calls the function with no problem after you enter text and click somewhere else - but Firefox/Safari doesn't. Anyone have a clue?
I cannot remember where I read it, but you should use .keydown()/.keyup()/.keypress() (whatever suits your needs) instead of onchange. At least for input[type=text].
you can use .blur() and .focus for their respective purposes too.
Seeing this in your question: "after you enter text and click somewhere else", makes me conclude you need the .blur() function.
$("input[type=text]").blur(function(){
console.log('checkDomain() called!')
});
maybe onblur is best for this:
<input onblur="checkDomain(true); return false;" type="text" id="dsearch" value="" name="domain" maxlength="30"/>
This problem happens when you change the behavior of your input keypress and key down.
You need to manually call the onchange trigger to fire it.
As an example consider you have a jQuery function for your inputs which do some stuff when user clicks on keyboard.
You need to call input.trigger("onchange"); to make sure the onchange is fired after keypress and keydown
/**
* Keyboard Manager
*/
(function($) {
$.fn.inputManager = function(options) {
};
options = $.extend(defaults, options);
// The key down event only use to manage key board language changes
var keyDown = function(e) {
//Do something
};
var keyPress = function(e) {
//Do something
};
return this.each(function() {
var input = $(this);
//The Firefox dose not trigger the input onchange when you change keypress and key down
//functions. So manually call it!
input.keypress(function(e) {
keyPress(e);
input.trigger("onchange");
});
input.keydown(function(e) {
keyDown(e);
input.trigger("onchange");
});
});
};
})(jQuery);