I have the following block inside my render() (which is a Bootstrap Button: https://react-bootstrap.github.io/components.html#buttons-options):
<Button type="simpleQuery" onClick={this.handleEntailmentRequest.bind(this)}>
Query
</Button>
and the following function:
handleEntailmentRequest() {
console.log("handle request ");
}
Whenever I click on the button I can see that the "handle request" question appears in the console log, but suddenly disappears. My understanding is that something is causing the page to refresh. Any opinons where I am going wrong?
The default button action is to submit the form.
If you don't need that - you need to prevent that:
handleEntailmentRequest(e) {
e.preventDefault();
console.log("handle request ");
}
References:
MDN - Event.preventDefault()
The full solution for the issue of the page reloading will be:
<Button type="simpleQuery" onClick={(e) => {this.handleEntailmentRequest(e)}}>
Query
</Button>
handleEntailmentRequest(e){
e.preventDefault();
//do something...
}
You can prevent the default behavior as suggested by zerkms or
Just add type="button" in button tag.
Eg: this.showSomething('all')}>All
Yes! That did worked!
If your react-app gets refreshed unexpectedly then, you should pass (e) as an event argument and then use e.preventDefault() in the function body which will prevent happen the default behavior of the onClick event.
After adding the attribute type="button" in React solved my issue.
Related
Any idea why the once modifier doesn't work on form submitting in Svelte?
In the following example:
<form action="./" on:submit|preventDefault|once={() => alert('You submitted the form')}>
<button type="submit">Save</button>
</form>
when I submit the form first time - I see the alert, but after that, when I submit - the page refreshes - as a normal form submitting.
(I tried with the button on:click - on:click|preventDefault|once... - but got same result.)
Looks like the 'once' is working, but after running and being removed the default submit behaviour of the form seems to be active again.
Couldn't find any information if disabling this listener is possible any other way than by adding a submit listener with preventDefault.
But this way, when adding a second listener only preventing the default, you can see that 'once' is only executed once -> REPL
<script>
function submitOnce() {
console.log('this logs once')
// put logic here you want to execute once
}
function handleSubmit() {
// console.log('this logs with every submit')
// this prevents default submit behaviour
}
</script>
<form on:submit|preventDefault={handleSubmit} on:submit|once={submitOnce}>
<button>Submit</button>
</form>
can simply be replaced by on:submit|preventDefault={() => {}}
I have come across this issue where on occasions the post is happening twice using IE.
Here is what I have in my document ready.
$(document).ready(function() {
$("#myForm").submit(function () {
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
e.stopImmediatePropagation();
});
Validatit();
});
The validation that is called from within that.
function Validatit() {
var form = $("#myForm")
$.validator.unobtrusive.parse(form);
}
Last but not least the button.
<button id="submit" onclick="submitIt();">Submit items</button>
The submit submitIt just calls an ajax.
Originally, I had type="submit" on the button which I removed and then added e.preventDefault on my document ready. That does not seem to work.
Do you see anything that maybe causing posting it twice. Again on occasions.
On the back end I have MVC plain old style with entity framework.
You're using an HTML5 button element. This button has a default behavior of submit, as stated in the W3 specification as seen here: W3C HTML5 Button
So you need to specify its type explicitly with type="button"
<button type="button" id="submit" onclick="submitIt();">Submit items</button>
then you don't even need the e.preventDefault. (where the code was faulty to begin with, you need to pass the e as a parameter to the anonymous function callback)
$("#myForm").submit(function (e) {
I have a form which is made like this:
<form id= 'lol' name = 'whyyyyy'>
<input name='dumbo'>
<input name='idiot'>
<input type='submit' value='I have no idea why its like this' onclick='document.lol.submit()'>
</form>
Now, I want to prevent the actual sending of the form, but so far all attempts failed.
My current code looks like this:
$(document).ready(function(){
$('form[name="whyyyyy"]').submit(function(e){
e.preventDefault();
alert(1);
return false;
});
})
but the inline submit command bypasses as it seems the jQuery function.
Can someone shred light into it?
EDIT:
The form CANNOT be changed, I don't have permission to change.
the on click code should trigger the submit function, it some complex validation wall of code in it. So I have to cache the submit action that it triggers, but I can't do that at moment.
the submit function should be triggered on send but it does not get triggered.
Here is an example of the code in jfiddle. As you can see it gets past by jQuery...
http://jsfiddle.net/StCPp/4/
if you don't need a submit button, why don't you use a regular button instead
<input type="button" />
<input type='button' value='i have no idea why he done it like this' onclick='document.getElementById('lol').submit()'>
Just use a normal button instead of a submit.
If you want to bypass a submit button you can make the class of the button cancel.
<input type='submit' class='cancel' value='i have no idea why he done it like this' onclick='document.lol.submit()'>
In your add-on JavaScript, remove the inline onclick event and replace it with whatever you desire. Problem solved.
You could also completely remove his button and replace it with one of your choice.
Remove the document.lol.submit function. This way, you can do whatever you want.
// Magic line
delete document.lol.submit;
// Or
$('form[name="whyyyyy"] input[type=submit]').attr('onclick', '');
$(document).ready(function(){
$('form[name="whyyyyy"]').submit(function(e){
e.preventDefault();
alert(1);
return false;
});
});
Ok so if I got this right you could remove the inline event handler onclick and add your custom handler (where you do the validation and all necessary steps):
$(document).ready(function() {
var $submit_button = $('input[type=submit]');
$submit_button.removeAttr('onclick');
$submit_button.click(function() {
//TODO: implement your custom handler
//execute validation etc.
});
});
Remove the onclick
$('input[type=submit]').attr('onclick','')
Then add the click event to function ready
$('input[type=submit]').on('click',function(){
//do your event
});
You aren't necessarily required to use jquery to implement this. You could use standard javascript.
$(document).ready(function(){
document.whyyyyy.submit = function(e){
alert(1);
return false;
};
});
This example works, but you might be hitting a jquery bug.
I have code in the below format in my JSP.
sumbit
On pressing the link my form gets submitted. However, I need to block the default a href behaviour and just need to call the submit function.The submit function submits the form
I have tried catching the click event on a HREF by jQuery and then firing e.preventDefault(). Following the same, I have picked up the HREF attribute, and then done an eval() to fire the function.
However, I have not been able to stop the default HREF functionality, and a new page is always saved in browser cache.
I also don't have the freedom to manually go in and change the code. Please suggest.
UPDATE
The issue with the code is:
submit
is one of the example of HREF being used in JSP. There may be different type of functions being called, using the above format:
I had used the below jQuery:
$("a[href^=\'javascript\']").live('click',function(e)
{
e.preventdefault();
eval($(this).attr('href'));
return false;
});
However, this does not stop the default HREF functionality. What am I missing?
As you mentioned in your question, you cannot manually change the markup.
So, I think, this is what you really want.
<form id='myform' action=''>
</form>
submit
JS:
function submit() {
document.getElementById('myform').submit();
}
jQuery(function() {
$('a').click(function() {
var href = $(this).attr('href').replace('javascript:','');
console.log(href);
alert('hi');
eval(href);
return false;
});
});
Demo
Update:
You can avoid eval(href), by using window[href]();
See this Demo
Try:
sumbit
Probably a simple noob error but I cannot figure it out. I have a submit button and after the user clicks it I want it to disappear and be replaced with "Thanks for submitting your info".
Here's what I have:
<script>
$(document).ready(function() {
$('#emailsubmit').onClick(function() {
$(this).replaceWith('<p>Thanks for signing up!</p>');
)};
)};
</script>
<input id="emailsubmit" name="submit" type="submit" value="Send " />
Looks ok to me, but on click, nothing happens. Any advice would be greatly appreciated.
The name of the function is click, not onClick, and you have a couple of syntax errors to boot.
$(document).ready(function() {
$('#emailsubmit').click(function() {
$(this).replaceWith('<p>Thanks for signing up!</p>');
});
});
You best use click instead of onClick
You're confusing inline, DOM-zero events (onClick) with jQuery's alias event methods.
jQuery has a click method (short for on('click...) but no onClick() method. This would throw an error, meaning you should always consult your browser console before anything else.
$('#emailsubmit').on('click', function() {...
The method is named click not onClick.
Also, removing the submit button will keep the form from being posted. Hide it instead:
$(this).hide().after('<p>Thanks for signing up!</p>');