Develop Reference

cannot redirect with submit button within <form></form> tags [duplicate]

This question already has answers here:
Clicking a button within a form causes page refresh
(11 answers)
Closed 11 months ago.
here is my js code
function fn(){
alert('fn is being called');
window.location ="www.google.com";
}
and here is my HTML. I can redirect when the HTML code
<div id="form">
<button onclick="fn()">Submit</button>
</div>
but not when I include form tags like this
<div id="form">
<form>
<button onclick="fn()">Submit</button>
</form>
</div>
Why is this happening and what do I do to allow rediect with form tags?

snippet updated to take care of event being depreciated
function fn(event){
event.preventDefault();
alert('fn is being called');
window.location ="https://www.stackoverflow.com";
}
<form onsubmit="fn(event)">
<button type="submit">Submit</button>
</form>

Maybe an alternative could be to use submit event on the <form>, but you probably run into security issues:
document.forms.form01.addEventListener('submit', e => {
e.preventDefault();
window.location = 'https://www.google.com';
});
<form name="form01">
<button>Submit</button>
</form>

Submit form using <a> tag after confirm [duplicate]

This question already has answers here:
submit event does not fire if submit initiated programmatically
(2 answers)
Closed 5 years ago.
I am trying to submit a form through a tag. I have tried triggering document.myform.submit(), this.form.submit(), parentNode.submit() etc. but none of this is working! Using a submit button or remove confirm() the code works fine. But I want to use both of them. Need some help.
<form method="post" onsubmit="return confirmm('Delete this record?');">
<a href="" class="deleteThisRecord" type="submit" onclick="$(this).closest('form').submit();" name="delete">
Delete This Record
</a>
<input type="hidden" name="id" value="<{$listData[I]['id']}>">
</form>
function confirmm($confirmText = 'Delete?') {
var dicision = confirm($confirmText);
if (dicision) {
return true;
} else {
return false;
}
return false;
}

Give an id attribute to a form, and call submite to this id reference document, getById('yourIdName').submit();

Why doesn't onClick activate function? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
I'm trying to write a simple code in JavaScript where selecting a button calls a prompt function, but the prompt never pops.
This is the HTML:
<div id="btnDiv">
<button type="submit" id="btn" onclick="submit"> send info </button>
</div>
And this is the JavaScript code:
document.getElementById("btn").onclick = function(){
prompt("Thank you");
}
What am I doing wrong?

Make sure that the JS code is loaded after the HTML content, you can use onLoad event:
window.onload=function(){
document.getElementById("btn").onclick = function(){
prompt("Thank you");
}
};

Cannot programmatically submit form [duplicate]

This question already has answers here:
"Submit is not a function" error in JavaScript
(19 answers)
Closed 8 years ago.
Cannot get my form to submit programmatically, despite trying several ways. Tried pure JS, also tried jQuery. No success.
I have this form tag :
<form action="https://docs.google.com/forms/d/13zex8ZsEsnZz3A8uB4jU4oDb5wZfaqqq2Pq2CGlIe6M/formResponse" method="POST" id="ss-form" target="_self" onsubmit="" name="eForm">
<!--My Form Stuff-->
<input type="submit" name="submit" value="Submit" id="ss-submit">
</form>
Here is what i've tried :
/*jQuery*/
$('#ss-form').submit();
/*Javascript*/
document.getElementById('ss-form').submit();
document.eForm.submit();
None of them work. Not sure why, but I am assuming it has something to do with me trying to submit a google form. If I physically click the submit everything works fine.
Any and all help is greatly apprecaiated.

The problem is that you have a field (HTMLInputElement) with name submit in the form. That's why document.getElementById('ss-form').submit is not a function but an object.
So, you get the following error:
TypeError: object is not a function
The solution is to remove that element. We should be careful to verify if browser thinks it's an element and not a function:
if (typeof document.getElementById('ss-form').submit === "object") {
document.getElementById('ss-form').submit.remove();
}
document.getElementById('ss-form').submit();

Why won't my js form submit work? [duplicate]

This question already has answers here:
Property 'submit' of object #<HTMLFormElement> is not a function
(3 answers)
Closed 9 years ago.
I have an iframe and a form. I want to submit the form into the iframe. This works, but the JS won't submit the form. I want the form to submit on page load or just when the script is rendered by the browser. I have already tried about 10 different JavaScript variants and successfully submitted the form with a button. Any thoughts?
<iframe src="http://domain.com" name="i0"></iframe>
<form action="http://domain.com/" target="i0" id="f0" method="POST">
<input type="hidden" name="secret" value="4cda562cd5dafa1882c9f18dc0dc5dba">
<input type="hidden" name="id" value="39">
</form>
<script type='text/javascript'>
document.getElementById('f0').submit();
</script>

<input type="submit" name="submit">
this is what's causing your issue, change its name to something else. because now this
document.getElementById('f0').submit();
is trying to access that input, and giving the error:
TypeError: document.getElementById(...).submit is not a function
You should have posted all your form code here, we could have found it faster :)

Maybe it is because your iframe hasn't fully loaded yet, so you need to wait for it:
<script type='text/javascript'>
document.getElementsByName('iframe')[0].onload = function(){
document.getElementById('f0').submit();
}
</script>

I see, you cant' use name="submit" here because you are overwritting FORM submit method, change it, e.g:
<input type="submit" name="bsubmit">