I want to submit a form , but before submitting it , I want to invoke a button
that calls a JS function :
<input name="" type="submit" value="SEND"> // <----- submit this later
<button type="button" id="button" onClick="validateForm()">SEND THIS BEFORE</button> // <<-- call this before submitting the form
Is there a way to combine there together ?
Thanks
Try this, Wrap it around a form tag and add an onsubmit attribute.
<form onsubmit="validateForm()">
<input type="submit" value="SEND"/>
</form>
Inside your onclick function you just need to use the .submit() inside the function to send your form whenever you need it to.
You can do various things, such as:
$("#form").on("submit", function(){
// do stuff here
});
Or
$("#button").on("click", function(){
// do stuff here
$("#form").submit();
});
Related
I have an issue while using buttons inside form. I want that button to call function. It does, but with unwanted result that it refresh the page.
My simple code goes like this
<form method="POST">
<button name="data" onclick="getData()">Click</button>
</form>
On clicking the button, the function gets called with page refreshed, which resets all my previous request which affects the current page which was result of the previous request.
What should I do to prevent the page refresh?
Add type="button" to the button.
<button name="data" type="button" onclick="getData()">Click</button>
The default value of type for a button is submit, which self posts the form in your case and makes it look like a refresh.
Let getData() return false. This will fix it.
<form method="POST">
<button name="data" onclick="return getData()">Click</button>
</form>
All you need to do is put a type tag and make the type button.
<button id="btnId" type="button">Hide/Show</button>
That solves the issue
The problem is that it triggers the form submission. If you make the getData function return false then it should stop the form from submitting.
Alternatively, you could also use the preventDefault method of the event object:
function getData(e) {
e.preventDefault();
}
HTML
<form onsubmit="return false;" id="myForm">
</form>
jQuery
$('#myForm').submit(function() {
doSomething();
});
<form method="POST">
<button name="data" onclick="getData()">Click</button>
</form>
instead of using button tag, use input tag. Like this,
<form method="POST">
<input type = "button" name="data" onclick="getData()" value="Click">
</form>
If your button is default "button" make sure you explicity set the type attribute, otherwise the WebForm will treat it as submit by default.
if you use js do like this
<form method="POST">
<button name="data" type="button" id="btnData" onclick="getData()">Click</button>
</form>
**If you use jquery use like this**
<form method="POST">
<button name="data" type="button" id="btnData">Click</button>
</form>
$('#btnData').click(function(e){
e.preventDefault();
// Code goes here
getData(); // your onclick function call here
});
A javascript method to disable the button itself
document.getElementById("ID NAME").disabled = true;
Once all form fields have satisfied your criteria, you can re-enable the button
Using a Jquery will be something like this
$( "#ID NAME" ).prop( "disabled", true);
This one is the best solution:
<form method="post">
<button type="button" name="data" onclick="getData()">Click Me</button>
</form>
Note: My code is very simple.
For any reason in Firefox even though I have return false; and myform.preventDefault(); in the function, it refreshes the page after function runs. And I don't know if this is a good practice, but it works for me, I insert javascript:this.preventDefault(); in the action attribute .
As I said, I tried all the other suggestions and they work fine in all browsers but Firefox, if you have the same issue, try adding the prevent event in the action attribute either javascript:return false; or javascript:this.preventDefault();. Do not try with javascript:void(0); which will break your code. Don't ask me why :-).
I don't think this is an elegant way to do it, but in my case I had no other choice.
Update:
If you received an error... after ajax is processed, then remove the attribute action and in the onsubmit attribute, execute your function followed by the false return:
onsubmit="functionToRun(); return false;"
I don't know why all this trouble with Firefox, but hope this works.
Return function is not working in all the cases.
I tried this:
<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>
It didnt work for me.
I tried to return false inside the function and it worked for me.
function Reset()
{
.
.
.
return false;
}
I was facing the same problem. The problem is with the onclick function. There should not be any problem with the function getData. It worked by making the onclick function return false.
<form method="POST">
<button name="data" onclick="getData(); return false">Click</button>
</form>
I updated on #JNDPNT answer, this way the function (getData()) doesn't have to return false;
<form method="POST">
<button name="data" onclick="getData(); return false;">Click</button>
</form>
A simple issue I found is that if the function that you're trying to call is called submit, the form will be submitted either way.
You will need to rename the function for the page to not be reloaded
Add e.preventDefault(); in the starting of the function to be called when the button is clicked
Example:
const signUp = (e) => {
e.preventDefault()
try {
} catch (error) {
console.log(error.message)
}
}
The button code:
<input
type='submit'
name='submit-btn'
id='submit-btn'
value='Sign Up'
onClick={signUp}
/>
You can use ajax and jquery to solve this problem:
<script>
function getData() {
$.ajax({
url : "/urlpattern",
type : "post",
success : function(data) {
alert("success");
}
});
}
</script>
<form method="POST">
<button name="data" type="button" onclick="getData()">Click</button>
</form>
I have an issue while using buttons inside form. I want that button to call function. It does, but with unwanted result that it refresh the page.
My simple code goes like this
<form method="POST">
<button name="data" onclick="getData()">Click</button>
</form>
On clicking the button, the function gets called with page refreshed, which resets all my previous request which affects the current page which was result of the previous request.
What should I do to prevent the page refresh?
Add type="button" to the button.
<button name="data" type="button" onclick="getData()">Click</button>
The default value of type for a button is submit, which self posts the form in your case and makes it look like a refresh.
Let getData() return false. This will fix it.
<form method="POST">
<button name="data" onclick="return getData()">Click</button>
</form>
All you need to do is put a type tag and make the type button.
<button id="btnId" type="button">Hide/Show</button>
That solves the issue
The problem is that it triggers the form submission. If you make the getData function return false then it should stop the form from submitting.
Alternatively, you could also use the preventDefault method of the event object:
function getData(e) {
e.preventDefault();
}
HTML
<form onsubmit="return false;" id="myForm">
</form>
jQuery
$('#myForm').submit(function() {
doSomething();
});
<form method="POST">
<button name="data" onclick="getData()">Click</button>
</form>
instead of using button tag, use input tag. Like this,
<form method="POST">
<input type = "button" name="data" onclick="getData()" value="Click">
</form>
If your button is default "button" make sure you explicity set the type attribute, otherwise the WebForm will treat it as submit by default.
if you use js do like this
<form method="POST">
<button name="data" type="button" id="btnData" onclick="getData()">Click</button>
</form>
**If you use jquery use like this**
<form method="POST">
<button name="data" type="button" id="btnData">Click</button>
</form>
$('#btnData').click(function(e){
e.preventDefault();
// Code goes here
getData(); // your onclick function call here
});
A javascript method to disable the button itself
document.getElementById("ID NAME").disabled = true;
Once all form fields have satisfied your criteria, you can re-enable the button
Using a Jquery will be something like this
$( "#ID NAME" ).prop( "disabled", true);
This one is the best solution:
<form method="post">
<button type="button" name="data" onclick="getData()">Click Me</button>
</form>
Note: My code is very simple.
For any reason in Firefox even though I have return false; and myform.preventDefault(); in the function, it refreshes the page after function runs. And I don't know if this is a good practice, but it works for me, I insert javascript:this.preventDefault(); in the action attribute .
As I said, I tried all the other suggestions and they work fine in all browsers but Firefox, if you have the same issue, try adding the prevent event in the action attribute either javascript:return false; or javascript:this.preventDefault();. Do not try with javascript:void(0); which will break your code. Don't ask me why :-).
I don't think this is an elegant way to do it, but in my case I had no other choice.
Update:
If you received an error... after ajax is processed, then remove the attribute action and in the onsubmit attribute, execute your function followed by the false return:
onsubmit="functionToRun(); return false;"
I don't know why all this trouble with Firefox, but hope this works.
Return function is not working in all the cases.
I tried this:
<button id="Reset" class="Button-class" onclick="return Reset()">Show result</button>
It didnt work for me.
I tried to return false inside the function and it worked for me.
function Reset()
{
.
.
.
return false;
}
I was facing the same problem. The problem is with the onclick function. There should not be any problem with the function getData. It worked by making the onclick function return false.
<form method="POST">
<button name="data" onclick="getData(); return false">Click</button>
</form>
I updated on #JNDPNT answer, this way the function (getData()) doesn't have to return false;
<form method="POST">
<button name="data" onclick="getData(); return false;">Click</button>
</form>
A simple issue I found is that if the function that you're trying to call is called submit, the form will be submitted either way.
You will need to rename the function for the page to not be reloaded
Add e.preventDefault(); in the starting of the function to be called when the button is clicked
Example:
const signUp = (e) => {
e.preventDefault()
try {
} catch (error) {
console.log(error.message)
}
}
The button code:
<input
type='submit'
name='submit-btn'
id='submit-btn'
value='Sign Up'
onClick={signUp}
/>
You can use ajax and jquery to solve this problem:
<script>
function getData() {
$.ajax({
url : "/urlpattern",
type : "post",
success : function(data) {
alert("success");
}
});
}
</script>
<form method="POST">
<button name="data" type="button" onclick="getData()">Click</button>
</form>
anyone has any ideas how to stop jsp pages from submitting? I'm using java spring 2.0. And I'm using form controller, so when i click the submit button then it goes to the validation method.
here the submit button:
<input type="submit" name="_target" value="Next" onClick="next()"
My plan is, i put the confirmation in my javascript, if confirm is 'OK' then it will do nothing. But at my current situation, it always goes to validae controller immediately.
Thanks for your helps.
just change the input type to anything other than submit or,
you can pass event into your next function such as:
<input type="submit" name="_target" value="Next" onClick="next(event)"
function next(event){
event.preventDefault()
// rest of your code
}
This basically should return true or false from the confirm box and then take it to the validation function. Could you please try it by yourself because I'm not pretty confident about this.
<input type="submit" name="_target" value="Next" onClick="next();return confirm("Are you sure?");">
You have to change the button type from submit to button. Call your validation in onClick(), and if the input is validated, submit the form.
$(document).ready(function(){
$("formid").submit(function(e){
return false;
//or
e.preventDefault();
)};
)};
Also you can use a function in the form:
<form action="some_url" onsubmit="return confirm('Are You Sure?')" ... >
<input type="submit" name="_target" value="Next">
</form>
Some similar if you are using the spring-form.tld tag library.
I need to know which button was just clicked and submit the form with its submitbuttonnextstatusid's value.
<input type="submit" class="ButtonSm" onclick="this.form.submitbuttonid.value='FlpZTFMaYgVeRGgOc0QOFDRhZikBbnV2H2BZ';this.form.dele.value=0;this.form.submitbuttonnextstatusid.value=25269;this.form.save.value=1;this.form.butaction.value=2;" value="Accounting" id="submitbutton">
<input type="submit" class="ButtonSm" onclick="this.form.submitbuttonid.value='F0l7LUhlZxpRGRc8KhBUHDVUZxIsHgwyH2FY';this.form.dele.value=0;this.form.submitbuttonnextstatusid.value=25264;this.form.save.value=1;this.form.butaction.value=3;" value="Awaiting Dictation" id="submitbutton_25">
$("#submitbutton").click(function(){
// post data with id 25269
});
$("#submitbutton_25").click(function(){
// post data with id 25264
});
If you are adding buttons dynamically, use ".on()" instead of ".click()".
Hey I am trying to use a form to submit data via JavaScript but it keeps refreshing the page when I don't want it to.
My form is like this:
<form name="myForm" method="post">
<input type="text" name="name"/>
<input type="submit" name="add" value="Add Resource" onclick="insert(); return false;"/>
</form>
My JS function has:
function insert(e){
e.preventDefault();
var name = document.myForm.name;
console.log(name);
}
I was told prevent default is how you stop the default action of the form but it still happens for me. How do I fix it ?
You're not passing in e though. Instead, it would be better to bind to the form with JavaScript rather than using an attribute:
document.querySelector('[name=myForm]').addEventListener('submit', function (e) {
e.preventDefault();
});
You could also bind to the click event of the submit input