Resetting HTML form upon submission - javascript

I'm using EmailJS (emailjs.com) for form submission and while I'm able to get it to send properly, it actually stops sending when I utilize the reset() method. This is my code that works:
<div class="topForm">
<form id="myform" onsubmit="emailjs.sendForm('mailjet', 'city_request', this); return false;" method="post">
<div class="form-group">
<input type="email" class="email" id="userEmail" placeholder="Enter email" name="userEmail">
<button type="submit" id="userEmailButton" class="btn btn-primary">Sign up</button>
</div>
</form>
</div>
With the above, I'm able to view the submitted information in the log section of EmailJS. My problem is when I do this:
<form id="myform" onsubmit="emailjs.sendForm('mailjet', 'city_request', this).reset(); return false;" method="post">
Adding .reset() will clear out the form upon submission, but won't send it to EmailJS. Additionally, I tried to use JavaScript in one file like so:
function myFunction() {
var form = document.getElementById('myform');
form.reset();
}
But apparently it doesn't work either. Does anyone know whats going on? I've been trying to get the form to work concurrently with the reset() method but no luck at all.

With Robert C's comment I was able to get it to reset and submit properly to EmailJS by doing the following:
<form id="myform" onsubmit="emailjs.sendForm('mailjet', 'city_request', this).then(reset()); return false;" method="post">
using .then() and placing reset() within the parentheses.

According to their documentation (https://www.emailjs.com/docs/api-reference/emailjs-send/) you can use a promise for the send() method - but it is not clear if the same is possible with sendForm() method. You should try. If sendForm can be used with a promise - place the reset() there. If not - you will have to use the send() method and prepare yourself the JSON object (3-rd argument) from the form elements.

Related

JS function within external js file cannot be called - Uncaught reference error

I have a small form that should run a js function when the submit button is clicked. Unfortunately, I keep getting an error in the console whenever the submit button is being clicked, that the function is not defined. The script file containing the function, is being integrated at the very bottom within the body tag and the external js script file
function test() {
alert("this is a test");
}
<form name="form" class="text-center" novalidate onsubmit="return test()" method="POST">
<p>enter your name</p>
<input type="text" name="name" id="name">
<button type="submit" class="btn">Submit</button>
</form>
The keyword "return" in your onsubmit means that the value expected to be returned is "false" or "true". It expects a boolean value to decide if the form will submit or not. If you only want to trigger the alert then you must do so without return, as in;
onsubmit="test()"
This has been extensively answered here - stackoverflow

How to make the function called by #submit work?

<!--html-->
<div id="vvv">
<form action="#">
<input required type="text">
<input type="submit" #submit="func">
</form>
</div>
// js
vvv = new Vue({
el: '#vvv',
methods: {
func(){
console.log(11111111111111)
}
}
})
How to make the function called by #submit work?
I need use the default submit action to inspect if all required fields have been filled. And after that, i wanna call my own submit function which set by #submit to post form data.
But, i find the function set by #submit is not be allowed to call.
What's wrong with my code? Or, if this action really not be allowed? And how can i realize my requirement?
Try calling the function from form tag
<!--html-->
<div id="vvv">
<form action="#" #submit.prevent="func" >
<input required type="text">
<button type="submit" >Submit</button>
</form>
</div>
If you're trying to do some custom validations, Vue makes it easy to track the state in real time. In the example I threw together below, you can see how a few different fields are simply validated to not be empty.
This is something you would build on, of course, to make more advanced validations, but hopefully it illustrates the concept. Then, you can use whatever method on whatever element you want to submit your form data!
https://codepen.io/barneychampaign/pen/JjKxymg

Submit same form with two action?

I have a form to submit and send data to 2 pages via POST.
I have tried the code with javascript. One form submit is working but other submit is not working
<form id="add">
<input type="text" name="test">
<input type="submit" onclick="return Submit();">
</form>
javascript
function SubmitForm()
{
document.forms['add'].action='filecreate.php';
document.forms['add'].submit();
document.forms['add'].action='filecreate.fr.php';
document.forms['add'].submit();
return true;
}
The first submission is not working but 2nd submission is working.
Since you appear to send the exact same data to two different handlers, you can flip the coin - and say that you just submit one form, and process them both in filecreate.php.
As you are sending a form, you cannot send two separate forms in the same HTTP request - so you can either do them both through asynchronous methods, or process them both backend after the submission of one form.
Since you haven't shown any PHP code, I'm making some assumptions and writing some pseudo-code, but it should be enough to get you started.
So first off, set a static action-property to your form.
<form id="add" action="filecreate.php">
<input type="text" name="test">
<input type="submit">
</form>
If you are sending it over POST, then you need to specify the method as well,
<form id="add" action="filecreate.php" method="POST">
Then, in PHP, you can get both files executed if you include it to the other. Meaning, in your filecreate.php, you include the filecreate.fr.php. Once you do that, the contents of that file will be executed as well.
<?php
// Once you require the file, it will be executed in place
require "filecreate.fr.php";
// .. handle the rest of your normal execution here.
That said, if you are doing the very similar thing multiple times, just with different data, you may want to create functions for it instead - going with the DRY principle ("Don't Repeat Yourself"), you can probably create a function that handles the structure and processing, then send the data separately through that function.
Try this :
<form id="add">
<input type="text" name="test">
<input type="button" onclick="return SubmitForm();">
</form>
function SubmitForm()
{
if(document.forms['add'].onsubmit())
{
document.forms['add'].action='filecreate.php';
document.forms['add'].submit();
document.forms['add'].action='filecreate.fr.php';
document.forms['add'].submit();
}
return true;
}

onsubmit not being called on an HTML form

I have the following form as part of my webpage:
<form id="collabAccess" onsubmit="submitCollabForm()" >
<div id="row-1">
<div class="two-col" id="email"><input type="text" placeholder="Enter email addresses separated by commas"/></div>
<div id="collabSelect" class="collab two-col styled-select">
<select id="collabaccess">
<option>Can Read</option>
<option>Can Write</option>
<option>Can Read & Write </option>
<option>Administrator </option>
</select>
</div>
</div>
<div id="message">
<textarea id="personalMessage" cols="154" rows="10" placeholder="Optional: include a personal message"></textarea>
</div>
<div id="submit-wrapper"><input type="submit" value="Add Collaborators" id="addCollaborators" disabled='disabled' class="small-btn disabled"/></div>
</form>
The function submitCollabForm() is as follows:
function submitCollabForm() {
console.log('in submitCollabForm');
var valid = validateEmails();
if (valid == false) {
var email = document.getElementById('email');
email.addClass('error');
}
}
where validateEmails() is just another js function for validating that the email addresses int he form have the correct format.
However, it looks like onsubmit is not being called at all. Even if I change things to onsubmit="console.log('xyz'), no console statement is being output. I've also checked for javascript errors in the console, but I am getting nothing.
Is there any reason why onsubmit is not working properly?
Your validation function needs to return false to stop the form from submitting. It's better to have
onsubmit="return submitCollabForm()"
See With form validation: why onsubmit="return functionname()" instead of onsubmit="functionname()"? for details.
The onsubmit handler is not called, because the form cannot be submitted by any normal means, i.e. the submit event cannot be caused. There is only one submit control, and it is declared as disabled.
if you feel all code is correct still it's not working then,
Simple steps to do,
1) create one script tag in the same page where your form is, create one function and set one alert and test it. If it is working then try following steps.
2) Try to check the path of your javascript file.
3) if path is correct, then change the name of your javascript function sometimes your name tag conflicts with your function name, and submit points to it, so your call is not reaching at your function. It happened with me. so I posted it here, hope it will be helpful to someone.

Prevent form from refreshing the page

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

Categories

Resources