Form reset with jQuery - Portfolio Page

1

Hi all,

Here is a link to my pen: https://codepen.io/Fern444/pen/dOvOmj

I’m having some trouble getting my contact form for my portfolio page to work. Basically, when someone fills out the form and clicks submit, the email pops up with all the values listed, but minus any information the user wrote in.

I can kind of see where I’m going wrong, as I have my jQuery set to reset the form values to 0 when the submit button is clicked, however, I can’t for the life of me figure out how to fix it. Do I have to set up my jQuery so that each contact form value is cleared? Still very new to jQuery.

Any help would be greatly appreciated.

Thanks,
Fern

2

So the form is doing the mail action at the same time the button is resetting the form.

You can break out the mailto: action into a function that also includes the reset.
<form id="some_form"onsubmit="getActionReset(this)" method="post" enctype="text/plain">
Then getActionReset would look like
// launch the mailer and then reset the form function getActionReset(form){ form.action = 'mailto:nobody@example.com'; form.reset(); }
However, that still won’t work due to the asynchronous nature of javascript. The reset is very fast compared to launching the mailer, and finishes first. To see it actually work, you can do
// launch the mailer and then reset the form after a delay function getActionReset(form){ form.action = 'mailto:nobody@example.com'; setTimeout(function() { form.reset(); }, 5000); }

That does work (here’s a fork of your portfolio with just the contact part) - the mailto comes up with the form details, and then the form gets cleared out, but is somewhat very mysterious and creepy to the user, and still might not work, depending on the timeout interval, or the user’s machine, etc…basically this is very hacky, I wouldn’t recommend it, it’s just for illustration purposes. Someone else can chime in with other ideas.

If you really want a reset button, it’s probably best to have one separate from the Submit button.

3

Yuzu-r,

Thanks very much for your reply! And thanks so much for creating a fork so I can see the code in action.

Code makes perfect sense to me, which I’m happy about. I don’t think I would have figured that out by myself though! Its also made me realise that its definitely time for me to learn Javascript! Onto that now. I’ll take the time to play around with a few different ideas, but its much easier now I’m seeing some working code I understand, so thanks again for your help with that. =)

Cheers,
Fern444

1 Like