This question already has answers here:
How can I submit a form using JavaScript?
(10 answers)
Closed 8 years ago.
<form class="myform" action="mail.php">
Your name:<br>
<input type="text" name="myform-name"><br><br>
Your file:<br>
<input type="file" name="myform-file"><br><br>
<button type="submit">Submit</button>
</form>
How do I submit this form using vanilla javascript (not jQuery) directly from the code (without user interaction)?
You can use:
document.getElementsByTagName('form')[0].submit()
Just add a form name in your code:
<form name="myform" class="myform" action="mail.php">
Your name:<br>
<input type="text" name="myform-name"><br>
<button type="submit">Submit</button>
</form>
submit the from from javascript:
<script type="text/javascript">document.myform.submit();</script>
Use this code
document.getElementById("my_form_id").submit();
Docs here
Related
This question already has answers here:
What is the default form HTTP method?
(5 answers)
Closed 4 years ago.
I saw the below code in w3school. I was wondering is this considered a POST request or a GET request. I only changed the action location to go to a java servlet rather than php.
<!DOCTYPE html>
<html>
<body>
<form id="myForm" action="/action">
First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
</body>
</html>
<form>'s default method is GET.
So it is considered as a GET request. You'll see all the parameters are being binded to the URL once the form is submitted.
EDIT (answering this comment):
Easiest way to change the method of the form is to mention it in method attribute in the <form> tag.
<form method='POST' id="myForm">
Or you can use javascript as below,
document.getElementById("myForm").method = "POST";
This question already has answers here:
Why can't I call a function named clear from an onclick attribute?
(3 answers)
Closed 4 years ago.
onsubmit does not execute in the code snippet below when you press the submit button. It should show 'Submitting' in the javascript console when you press Submit.
function submit(v) {
console.log('Submitting');
}
<form action="#" onsubmit="submit()">
<input type=submit />
</form>
It's a name collision. Name your function something other than submit, it worked for me then.
See below:
function a () {
console.log('Submitting');
}
<form action="#" onsubmit="a()">
<input type=submit />
</form>
submit() is a predefined method in javaScript which submits a form. Just rename it to another name.
function submit2(v) {
console.log('Submitting');
}
<form action="#" onsubmit="submit2()">
<input type=submit />
</form>
This question already has answers here:
What is AJAX and how does it work? [duplicate]
(1 answer)
How to submit an HTML form without redirection
(12 answers)
Closed 5 years ago.
I have a very simple html form I have created for a contact page. I would like to know if it is possible to disable/avoid the page redirect that occurs when the form is sent but still allow for the form to be submitted (obviously). I essentially have almost zero knowledge of php at this time and I did not create the php aspect (see form action). Any help here is greatly appreciated.
<form action="http://sonic.dawsoncollege.qc.ca/~dpomerantz/web/contact_me.php" method="post" class="flex flex--column">
<input type="hidden" name="toEmail" value="spencer.miller#me.com"/>
<input type="text" name="name" placeholder="Name*" required><br>
<input type="email" name="email" placeholder="Email*" required><br>
<input type="text" name="phone" placeholder="Phone"><br>
<input type="text" name="message" placeholder="Message*" required><br>
<input type="submit" value="Submit" class="submit">
</form>
Configure the form to post to a hidden iframe, as explained here: How do you post to an iframe?. The redirect will still happen, but it will be within the iframe and thus invisible to the user. It's a bit of a hack, and not the best way to do things, but it does work.
This question already has answers here:
behavior of javascript getElementById() when there are elements with duplicate IDs in HTML DOM?
(5 answers)
Closed 6 years ago.
I run into the bug with my multi form page:
I have two forms:
<form>
<input type="submit" id="single-submit" name="form_1" value="Submit 1"/>
</form>
<form>
<input type="submit" id="single-submit" name="form_2" value="Submit 2"/>
</form>
And this JavaScript to prevent double submit:
$("form").one('submit', function() {
$('#single-submit').prop("disabled", true);
});
I'm trying to get the submit name in php:
if(isset($_POST['form_1']))
{
// form 1 submitted
}
if(isset($_POST['form_2']))
{
// form 2 submitted
}
But JS is preventing this, why?
I can recieve submit name="" from second, third... form. But not from the first form on page.
UPDATE:
Removed double ids, added classes instead:
<form action="example.com/process" method="post" accept-charset="utf-8">
<input type="submit" class="single-submit" name="form_1" value="Submit 1"/>
</form>
<form action="example.com/process" method="post" accept-charset="utf-8">
<input type="submit" class="single-submit" name="form_2" value="Submit 2"/>
</form>
And this JavaScript to prevent double submit:
$("form").one('submit', function() {
$('.single-submit').prop("disabled", true);
});
Moreover now first AND second form does not return submit name.
Also tried on( instead, no luck.
So it seems something still wrong with JS.
Without this JS everything is working as expected.
Use a class instead of an id on this : id="single-submit".
An id must be unique.
This question already has answers here:
submitting a form when a checkbox is checked
(8 answers)
Closed 4 years ago.
I have a very simple question - how do I get a form to submit when I change the status of a checkbox
Here is my code
<form name="formName" id="formName" action="<?php echo $_SERVER['PHP_SELF'];?>" method="get">
<input type ="checkbox" name="categories1" value = "1" onClick="submit();">1</input>
</form>
in addition to submit() I have tried:
this.form.submit()
document.getElementById('formName').submit()
this.parentNode.submit()
but none of these work. When I check or uncheck the box nothing happen
any clues?
Refer to the form name attribute:
document.formName.submit()
This works for me in both FF and IE:
<form name="formName" id="formName" action="" method="get">
<input type ="checkbox" name="categories1" value = "1" onclick="this.form.submit();">1</input>
</form>
found the problem - I had a submit button named submit - see Javascript form submit: Object doesn't support this property or method (IE7) for similar soln.
You can try the following
<form name="formName" id="formName" action="" method="get">
<input type ="checkbox" name="categories1" value = "1" **onchange**="this.form.submit();">1</input>
</form>