Form Submit Not Firing - javascript

src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
$(document).ready(function() {
$("#testForm").submit(sendPost)
});
function sendPost() {
alert('Submitted');
}
<form id="testForm">
<input type="text" ID="txtDescription"><br>
<input type="submit" value="Save" />
</form>
Clicking the Submit button does not fire the alert. What am i missing?

The original code had the reference to jquery lib inside the javascript, without script tags. That does not load the external resource. Since jquery doesn't load, the click event doesn't get registered.
One solution to this issue is to reference the external js file in your HTML, with a <script> tag:
HTML Solution
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm">
<input type="text" ID="txtDescription"><br>
<input type="submit" value="Save" />
</form>
and remove the reference from your .js
$(document).ready(function() {
$("#testForm").submit(sendPost)
});
function sendPost() {
alert('Submitted');
}
Jquery Solution
A solution for jquery to load some other js file, if you don't want to put <script src=... in the HTML, is to put the following in your .js. This requires that jquery is already loaded.
$(document).ready(function(){
$('body').append($('<script src="/path/to/script/foo.min.js"></script>'));
});
https://stackoverflow.com/a/42378530/209942

Your code works as is. You have to click on the button to submit it. But looking at the I believe, you want to submit the the form on document ready.
You can do it in following way.
$(document).ready(function() {
$("#testForm").submit(sendPost);
$('#submit').click();
});
function sendPost() {
alert('Submitted');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="testForm">
<input type="text" ID="txtDescription"><br>
<input id="submit" type="submit" value="Save" />
</form>

Related

simple form with preventDefault not working (without any jquery)

I have a simple html form and Javascript. I have been trying to prevent form submission. but it ignores my code e.preventDefault() and continues to submit and refreshes the page anyways.
most solutions I encountered include JQuery. can't this be done without JQuery?
why is this not working? what is the problem?
<html>
<head>
<script>
function onsubmit(e) {
e.preventDefault();
e.stopPropagation();
console.log("submitting...");
return false;
}
</script>
</head>
<body>
<form method="POST" onsubmit="onsubmit">
<input placeholder="email" style="display:block"> </input>
<input placeholder="password" style="display:block"> </input>
<input type="submit" value="login" style="display:block"> </input>
</form>
</body>
</html>
Though I don't know the reason why the inline event listener didn't work, as #teemu suggested in the comment, It worked for me when I discarded the inline onsubmit event listener and rather used addEventListener.
document.addEventListener("DOMContentLoaded", (e)=>{
document.querySelector("form").addEventListener("submit", onsubmit);
}
added this in of the <script>, and it worked

Submit comment form inside an async/await/then Javascript block in WordPress [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 ()

Find out which html form was submitted

Assume I have many html forms in a website. I need to find out which html form was submitted.
$("form").submit(function(event){ }
Using the function above, can i find out which form was submitted?
You should assign an identifiable attribute to the form and use event.target to access that attribute.
In this case, I've assigned name to each form and printed the name on the console when the form is submitted.
$("form").submit(function(event) {
event.preventDefault();
console.log(event.target.name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form1">
<button type="submit">submit</button>
</form>
<form name="form2">
<button type="submit">submit</button>
</form>
<form name="form3">
<button type="submit">submit</button>
</form>
Even though it is recommended to use ID, you can do without it. your event.target provides the reference for the form.
$("form").on("submit", function(event){
event.preventDefault();
var a = $(event.target).children("input[type='text']").val();
console.log(a);
});
JSFiddle
Thanks #31piy for reminding about it.
Have a look into link below to identify submission of different forms.
$(document).ready(function() {
$("#Form1").submit(function(event) {
alert($(this).attr('id'));
event.preventDefault();
});
$("#Form2").submit(function(event) {
alert($(this).attr('id'));
event.preventDefault();
});
$("#other").click(function() {
$("#Form1").submit();
});
$("#other2").click(function() {
$("#Form2").submit();
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
<body>
<form id="Form1" action="destination.html">
<input type="text" value="Hello there">
<input type="submit" value="Go">
<div id="other">
Click to trigger the handler for first form
</div>
</form>
<form id="Form2" action="destination.html">
<input type="text" value="Hello there">
<input type="submit" value="Go">
<div id="other2">
Click to trigger the handler for second form
</div>
</form>
</body>
</html>
Good question.
I usually submit every form to a different route handler. This way I manage to keep some basic principles (Single responsibility principle). Otherwise, you risk your code becoming too complicated to read.
If you insist on having the same route and then differentiate in the backend, I believe the other answers will give you answer your question.

Having the script element on the first line of codes matters?

This form automatically transfers the user to another form. The question i have is that when the script block is placed after the form block the code works. But when I swap them; so that script is above form, then the form doesn't work.
Can anyone tell why?
Works:
<form id="ponyo_form" action="formB.html" method="POST">
<input type="text" name="id" value="10" />
<input type="text" name="transfer_email" value="someone#aol.com" />
</form>
<script type="text/javascript">
document.getElementById("ponyo_form").submit();
</script>
This won't work:
<script type="text/javascript">
document.getElementById("ponyo_form").submit();
</script>
<form id="ponyo_form" action="formB.html" method="POST">
<input type="text" name="id" value="10" />
<input type="text" name="transfer_email" value="someone#aol.com" />
</form>
The reason this doesn't work when you have the code before the form, is that the code is run when as it is parsed along the page. So it is attempting to find a form called ponyo_form, which doesn't yet exist in the DOM.
To fix this, either place it after the form, or wrap it on an onload function.
IE:
window.onload = function()
{
document.getElementById("ponyo_form").submit();
}

Can't get jQuery form submit to work

For some reason, when the form button is clicked, the jQuery script I wrote isn't running, does anyone know why?
<body>
<form id="inputform" action="google.com">
<text id="text">Enter Your Number:</text>
<input id="input" name="input" type="text">
<input id="submitArea" type="submit" value="">
</form>
</body>
$('#inputform').submit(function() {
window.location = "http://mysite.com/";
});
Yes, I imported the jQuery library and everything, I've sourced the external JS file, but I can't figure out why it still isn't working.
You need to prevent the default action from occuring. You can do that by using preventDefault action on the event e. Something like this:
$(function(){
$('#inputform').submit(function(e) {
e.preventDefault();
window.location = "http://mysite.com/";
});
});
Assuming your script is inside document ready, else you need to move the script inside `jQuery(function($){.....});
You need to prevent the default action of the submit button
$('#inputform').submit(function(e) {
window.location = "http://mysite.com/";
return false; // or call e.preventDefault();
});
Ideally you should not do a window.location call from inside a submit button. The data you entered in the Form's text input field wont be automatically posted to the action page if you do so.
<body>
<form id="inputform" action="http://mysite.com/">
<text id="text">Enter Your Number:</text>
<input id="input" name="input" type="text">
<input id="submitArea" type="submit" value="">
</form>

Categories

Resources