Submitting a form with a button using JS/Jquery - javascript

I'm new with JS and I have a very simple question.
I want to submit a form with a button which located outside of it.
The form header looks like this:
<form action="http://www.google.com" method="get" id="myform">
The button looks like this:
<input type="button" value="Click Me" id="send">
The JS file is:
document.getElementById("send").onclick = function() {
document.getElementById("myform").submit();
};
And it is not working. When I clicked the button nothing happens.
Any idea? Jquery will be also fine for me instead of vanilla JS.
Appreciate your help.
Thanks

<script type="text/javascript">
$(document).ready(function(){
$("#send").on("click",function () {
$('#myform').submit();
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
hope this will help you.since your showing google page on button click.

I Prefer using JQuery to submit a form.
There are other posts on stackoverflow covering the topic of submitting a form using JQuery. You can check out this one Submit form using jquery
If I may add something that might come in handy if you have validators on the form, for required fields for example. You could add a check before you submit the form to see if all the fields are valid. Your button click method may look something like this:
function SubmitButtonClick(){
var form = $('#myForm');
form.validate();
if(!form.valid())
return false;
else
form.submit();
})
Obviously you should just remember to add the method to the button's onclick like so:
<input type="button" value="Click Me" id="send" onclick="SubmitButtonClick()" />

You can try get the id of the form. And you call it from wherver you want.
Try:
$(".button").click( function() {
$('#myform').submit();
});

try this:
window.onload = function(){
document.getElementById("send").onclick = function() {
document.getElementById("myform").submit();
};}
or
document.getElementById("send").onclick = function() {
document.getElementById("myform").submit();}
after
<input type="button" value="Click Me" id="send">

Related

Cloned form submit not working with jQuery [duplicate]

Can anyone tell me what is going wrong with this code? I tried to submit a form with JavaScript, but an error ".submit is not a function" shown. See below for more details of the code:
<form action="product.php" method="get" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input onclick="submitAction()" id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
I also tried this:
<script type="text/javascript">
function submitAction()
{
document.forms["frmProduct"].submit();
}
</script>
Both show me the same error :(
submit is not a function
means that you named your submit button or some other element submit. Rename the button to btnSubmit and your call will magically work.
When you name the button submit, you override the submit() function on the form.
Make sure that there is no another form with the same name and make sure that there is no name="submit" or id="submit" in the form.
If you have no opportunity to change name="submit" you can also submit form this way:
function submitForm(form) {
const submitFormFunction = Object.getPrototypeOf(form).submit;
submitFormFunction.call(form);
}
<form action="product.php" method="post" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
document.getElementById("submit_value").onclick = submitAction;
function submitAction()
{
document.getElementById("frmProduct").submit();
return false;
}
</script>
EDIT: I accidentally swapped the id's around
I had the same issue when i was creating a MVC application using with master pages.
Tried looking for element with 'submit' as names as mentioned above but it wasn't the case.
For my case it created multiple tags on my page so there were some issues referencing the correct form.
To work around this i'll let the button handle which form object to use:
onclick="return SubmitForm(this.form)"
and with the js:
function SubmitForm(frm) {
frm.submit();
}
form.submit() will not work if the form does not have a <button type="submit">submit</button>. form element belongs to HTMLFormElement interface, therefore, we can call from prototype directly, this method will always work for any form element.
HTMLFormElement.prototype.submit.call(form)
This topic has a lot of answers already, but the one that worked best (and simplest - one line!) for me was a modification of the comment made by Neil E. Pearson from Apr 21 2013:
If you're stuck with your submit button being #submit, you can get around it by stealing another form instance's submit() method.
My modification to his method, and what worked for me:
document.createElement('form').submit.call(document.getElementById(frmProduct));
I had same issue and resolved my issue just remove name="submit" from submit button.
<button name='submit' value='Submit Payment' ></button>
Change To
<button value='Submit Payment' ></button>
remove name attribute hope it will work
Sorry to answer late but for those who are still facing the same error. To get rid of this error:
<form method="POST">
<input type="text"/>
<input type="submit" id="submit-form" value="Submit Form" style="display: none;"/>
</form>
<!-- Other element that will submit the form -->
<button onclick="submitTheForm()">Submit the form</button>
<script>
function submitTheForm(){
document.getElementById("submit-form").click();
}
</script>
Explanation:
The javascript function submitTheForm() is accessing the submit input element and calling the click event on it which results in the form submission.
This solution is lifetime and almost 100% compatible in all browsers.
giving a form element a name of submit will simple shadow the submit property .
make sure you don't have a form element with the name submit and you should be able to access the submit function just fine .
In fact, the solution is very easy...
Original:
<form action="product.php" method="get" name="frmProduct" id="frmProduct"
enctype="multipart/form-data">
<input onclick="submitAction()" id="submit_value" type="button"
name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
Solution:
<form action="product.php" method="get" name="frmProduct" id="frmProduct"
enctype="multipart/form-data">
</form>
<!-- Place the button here -->
<input onclick="submitAction()" id="submit_value" type="button"
name="submit_value" value="">
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
Possible solutions -
1.Make sure that you don't have any other element with name/id as submit.
2.Try to call the function as onClick = "return submitAction();"
3.document.getElementById("form-name").submit();
You should use this code :
$(document).on("ready", function () {
document.frmProduct.submit();
});
What I used is
var enviar = document.getElementById("enviar");
enviar.type = "submit";
Just because everything else didn´t work.
Solution for me was to set the "form" attribute of button
<form id="form_id_name"><button name="btnSubmit" form="form_id_name" /></form>
or is js:
YOURFORMOBJ.getElementsByTagName("button")[0].setAttribute("form", "form_id_name");
YOURFORMOBJ.submit();
I faced this issues also but i made a quick fix using
const form = document.getElementById('create_user_form');
function onSubmit(event) {
console.log(event.target[0].value);
console.log(form.submit); // 👉️ input#submit
// ✅ Works
HTMLFormElement.prototype.submit.call(form);
}
form.addEventListener('submit', onSubmit);
Even though accessing the submit property on the form element points to the submit input element and not the method, we can still submit the form by accessing the submit property on the HTMLFormElement interface.
I was facing the same problem that my submit() wasn't working. In my case, I'd an id="submit" on the input tag having type="submit", I removed the id, and it started working.
You can try
<form action="product.php" method="get" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input onclick="submitAction(this)" id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction(element)
{
element.form.submit();
}
</script>
Don't you have more than one form with the same name ?
Use getElementById:
document.getElementById ('frmProduct').submit ()

Troubleshoot Automatic PHP form submission [duplicate]

Can anyone tell me what is going wrong with this code? I tried to submit a form with JavaScript, but an error ".submit is not a function" shown. See below for more details of the code:
<form action="product.php" method="get" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input onclick="submitAction()" id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
I also tried this:
<script type="text/javascript">
function submitAction()
{
document.forms["frmProduct"].submit();
}
</script>
Both show me the same error :(
submit is not a function
means that you named your submit button or some other element submit. Rename the button to btnSubmit and your call will magically work.
When you name the button submit, you override the submit() function on the form.
Make sure that there is no another form with the same name and make sure that there is no name="submit" or id="submit" in the form.
If you have no opportunity to change name="submit" you can also submit form this way:
function submitForm(form) {
const submitFormFunction = Object.getPrototypeOf(form).submit;
submitFormFunction.call(form);
}
<form action="product.php" method="post" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
document.getElementById("submit_value").onclick = submitAction;
function submitAction()
{
document.getElementById("frmProduct").submit();
return false;
}
</script>
EDIT: I accidentally swapped the id's around
I had the same issue when i was creating a MVC application using with master pages.
Tried looking for element with 'submit' as names as mentioned above but it wasn't the case.
For my case it created multiple tags on my page so there were some issues referencing the correct form.
To work around this i'll let the button handle which form object to use:
onclick="return SubmitForm(this.form)"
and with the js:
function SubmitForm(frm) {
frm.submit();
}
form.submit() will not work if the form does not have a <button type="submit">submit</button>. form element belongs to HTMLFormElement interface, therefore, we can call from prototype directly, this method will always work for any form element.
HTMLFormElement.prototype.submit.call(form)
This topic has a lot of answers already, but the one that worked best (and simplest - one line!) for me was a modification of the comment made by Neil E. Pearson from Apr 21 2013:
If you're stuck with your submit button being #submit, you can get around it by stealing another form instance's submit() method.
My modification to his method, and what worked for me:
document.createElement('form').submit.call(document.getElementById(frmProduct));
I had same issue and resolved my issue just remove name="submit" from submit button.
<button name='submit' value='Submit Payment' ></button>
Change To
<button value='Submit Payment' ></button>
remove name attribute hope it will work
Sorry to answer late but for those who are still facing the same error. To get rid of this error:
<form method="POST">
<input type="text"/>
<input type="submit" id="submit-form" value="Submit Form" style="display: none;"/>
</form>
<!-- Other element that will submit the form -->
<button onclick="submitTheForm()">Submit the form</button>
<script>
function submitTheForm(){
document.getElementById("submit-form").click();
}
</script>
Explanation:
The javascript function submitTheForm() is accessing the submit input element and calling the click event on it which results in the form submission.
This solution is lifetime and almost 100% compatible in all browsers.
giving a form element a name of submit will simple shadow the submit property .
make sure you don't have a form element with the name submit and you should be able to access the submit function just fine .
In fact, the solution is very easy...
Original:
<form action="product.php" method="get" name="frmProduct" id="frmProduct"
enctype="multipart/form-data">
<input onclick="submitAction()" id="submit_value" type="button"
name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
Solution:
<form action="product.php" method="get" name="frmProduct" id="frmProduct"
enctype="multipart/form-data">
</form>
<!-- Place the button here -->
<input onclick="submitAction()" id="submit_value" type="button"
name="submit_value" value="">
<script type="text/javascript">
function submitAction()
{
document.frmProduct.submit();
}
</script>
Possible solutions -
1.Make sure that you don't have any other element with name/id as submit.
2.Try to call the function as onClick = "return submitAction();"
3.document.getElementById("form-name").submit();
You should use this code :
$(document).on("ready", function () {
document.frmProduct.submit();
});
What I used is
var enviar = document.getElementById("enviar");
enviar.type = "submit";
Just because everything else didn´t work.
Solution for me was to set the "form" attribute of button
<form id="form_id_name"><button name="btnSubmit" form="form_id_name" /></form>
or is js:
YOURFORMOBJ.getElementsByTagName("button")[0].setAttribute("form", "form_id_name");
YOURFORMOBJ.submit();
I faced this issues also but i made a quick fix using
const form = document.getElementById('create_user_form');
function onSubmit(event) {
console.log(event.target[0].value);
console.log(form.submit); // 👉️ input#submit
// ✅ Works
HTMLFormElement.prototype.submit.call(form);
}
form.addEventListener('submit', onSubmit);
Even though accessing the submit property on the form element points to the submit input element and not the method, we can still submit the form by accessing the submit property on the HTMLFormElement interface.
I was facing the same problem that my submit() wasn't working. In my case, I'd an id="submit" on the input tag having type="submit", I removed the id, and it started working.
You can try
<form action="product.php" method="get" name="frmProduct" id="frmProduct" enctype="multipart/form-data">
<input onclick="submitAction(this)" id="submit_value" type="button" name="submit_value" value="">
</form>
<script type="text/javascript">
function submitAction(element)
{
element.form.submit();
}
</script>
Don't you have more than one form with the same name ?
Use getElementById:
document.getElementById ('frmProduct').submit ()

Javascript disable button after click, but form doesn't submit

I have a code that disables the button after one click perfectly, but the problem is, is the form doesn't submit then. How do I disabled the button after one click and still have the form submit.
Code
<input id="submitbtn" name="submit" type="submit" value="Submit for Payment" />
<script type="text/javascript">
$(function(){
$('#submitbtn').one('click', function() {
$(this).attr('disabled','disabled');
});
});
</script>
Try this:
$('form').submit(function() {
$(this).find("button[type='submit']").prop('disabled',true);
});
Deferring the button disabling code until after the form submit event fires might be your best option. You can do this a few ways. If you only have one button that you want to disable, add a submit event listener to the form and disable it in the callback. Another simple approach is to use setTimeout which runs after 0 milliseconds.
setTimeout( () => $(this).attr('disabled','disabled') , 0);
Also, if you're using a version of jQuery that supports .prop(), I'd recommend using that instead of attr. Example: $(this).prop('disabled', true).
$(function(){
$('#submitbtn').on('click', function() {
$(this).prop('disabled', true);
$("#formID").submit();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="submitbtn" name="submit" type="submit" value="Submit for Payment" />
Add the onsubmit attribute to your form and put the code to disable the button there, so you disable the button but the first submit has already happened:
<form onsubmit="myFunction();">
<script type="text/javascript">
function myFunction(){
$('#submitbtn').attr('disabled','disabled');
// my submit code here
}
</script>

Form fields value get reset without page load

Following is my code in which i am trying to accomplish, when user clicks on the submit button then my javascript function sets all the value to null in the textfields of the form whose id='contact_form' without loading the page . Kindly let me know how can i modify the following code to accomplish the functionality i've been trying to do.
Thanks!!
<script type='text/javascript'>
$(document).ready(function(){
$('#love').click(function(e) {
document.contact_form.name.value = '';
alert('aloha!!');
//stop the form from being submitted (not working fine)
e.preventDefault();
}
}
</script>
<form name='abc' action='' id='abc' >
<input type="submit" id='love' />
</form>
I have also tried the following function it worked fine but its not preventing from the page load
<script type='text/javascript'>
function js(){
document.contact_form.name.value = '';
//stop the form from being submitted (NOT WORKING!!)
preventDefault();
}
}
</script>
If you try onsubmit="return false;" in the form tag your form will not be submitted. Unfortunately it will NEVER be submit. Unless you are not planning to submit it via AJAX you have to modify your onsubmit event like this:
<form onsubmit="return callFunction()">
function callFunction() {
if(condition)
return true;
else
return false;
}
$("#abc").submit( function() {
// do everything you want.
return false; //will prevent the reload.
});
To have a function execute when the form submits you have to do something like this;
<form onsubmit="return validate();">
your form here
</form>
Then you can have your check in a function called 'validate()' (or whatever you want to call it)
Make sure the validate() function returns true is the form is allowed to submit, or returns false if the page is not allowed to submit.
Also put id's and names on your input elements, that way you can access them much easier.
Assuming you have an HTML like this :
<form>
<input type="text" id="text" />
<input type="submit" id='submit' value="clear above field without reloading" />
</form>
And you want the text field value to clear when a user submits without reloading using jQuery, then following script will be your remedy :
$(function(){
$('#submit').click(function(){
$('#text').value('');
})
});
A form can be submitted in many ways, not only by clicking on a submit buttons. You should really watch for submit events, and cancel them with preventDefault (instead of click events that might trigger the submit). See #user1359163's answer.
But you problem seem to be document.contact_form.name.value. There is no property contact_form on the document object, so this will raise an error. The preventDefault is not executed, your form gets submitted and you never see the error. Set your debugger to "Stop on errors"!
You might want something like document.forms["contact"], but I don't know your HTML. An id selector for the input element would be the better choice.

INPUT type Image with onclick doesn't work with JS

Newbie coder here. I'm making a rating website, and am trying to make it so that when user click "Yes" as an image, it invoke a JS which display an Ajax loader gif and then shows the results. Problem is that onclick here doesn't seem to trigger the function:
<form action="" method="get" id="myform">
<script>
$(document).ready(function(){
$("#myform").submit(function(){
$('#chart1').hide();
$('.ajax-load').show();
var data = $("#myform").serialize();
submitRating(data, false, function(){});
setTimeout($('.ajax-load').hide(),1000);
$('#chart1').show();
return false;
});
});
</script>
<div id="chart1"><div>
<input type="image" src="images/yes.png" name="yes" value="0" onclick="$('#myform').submit();"/>
</form>
Instead of $('#myform').submit(), if I try an alert(), it works, so I'm puzzled as to why this doesn't work.
Thanks!!
try using: .trigger("submit")
more info: http://api.jquery.com/trigger/
And if that doesnt work the only thing I can think of is having a blank action attribute in your form tag...
It might have to do with the fact that type=image has a default behavior of submitting when clicked. This could cause interference with your submit() function.

Categories