We Keep Coding

After validating & submitting form, reset form + change some css styles

I have a simple html contact form with validation check.
I would like to have some commands executed after a successful form submission. But the way I've set this whole thing up... I can't make it work.
HTML contact form:
<form id="mycontact_form" name="form_name" method="post" onsubmit="return validateForm();" action="https://domain.tld/cgi-bin/sendformmail.pl">
validateForm.js:
function validateForm() {
//validating input fields
if (!valid){
return false;
} else {
if(condition1 == true)
{
document.form_name.submit(); return;
}
else {
// doing stuff to form content
document.form_name.submit(); return;
}
}
}
When the submit button is pressed, the form is validated and will be submitted to the perl script sendformmail.pl which return a HTML Status 204 so the user stays on this page and is not redirected (that's the only way I got this part to work).
Now what I would like to have after a successful submission is:
clear/reset the form and
some minor UI stuff: change background of 2 elements + placeholder/inner text of 2 input fields for thank you message.
But for example if I put document.form_name.reset() after the document.form_name.submit(), it's too fast. It resets the form before submissions. I also tried to call another (independent) function after the validateForm() in the onsubmit but that seems to be wrong (well, at least it's not working).
So I guess I need to put these 2 things (reset + CSS changes) in a separate function and call it after a successful form submission.
But how, where and when?
I'm very interested to learn a simple yet effective solution. (but jQuery is also available)
Thank you for your help.

If your email script is on the same domain as your contact form, try submitting it via ajax. Here's a simple jQuery example, which would be in your onsubmit handler:
if (valid) {
$.ajax({
url: "/cgi-bin/sendformmail.pl",
method: "POST",
data: $("#mycontact_form").serialize()
})
.done(function() { // this happens after the form submit
$("#mycontact_form")[0].reset();
});
}
return false; // don't submit the form again non-ajax!
Otherwise, if on different domains, try setting the target of your form to the id of a hidden iframe on your page. Since this is cross-domain, you have no real way of knowing the result of the form submit due to the same origin policy. You can simply hope for the best and reset the form after X number of seconds:
if (valid) {
$("#mycontact_form").submit();
// clear form 3 seconds after submit
window.setTimeout(function() {
$("#mycontact_form")[0].reset();
}, 3000);
}
Both of these approaches keep the user on the same page without a refresh.

I ended up using beforeSend with ajax instead of done. And instead of resetting the form I chose to clear the value of the input fields/textarea (there are only 3). I also included the preferred 'post-submission' style of the input fields/textarea in beforeSend to leave nothing to chance.
Anyway, thank you for helping me & pointing me in the ajax direction.
$.ajax({
url: "/cgi-bin/sendformmail.pl",
method: "POST",
data: $("#mycontact_form").serialize()
beforeSend : function (){
// clear value of input fields/textarea & disable them
// use placeholders for "Thank you." etc.
}
});

Trouble with ajax script using onClick to submit form

I have several forms on a page that submit values from radio buttons using jquery/ajax. All works fine when a Submit button is used, but I would like to eliminate the Submit button. I tried using onClick to submit. However, trying it this way causes the forms to get submitted prior to the processing script picking them up. I would very much appreciate advice (and example if possible). Thank you, Brian
Script:
$(document).ready(function() {
// process the form
$('form').submit(function(event) {
// get the form data
var formData = $(this).serialize();
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'process.php', // the url where we want to POST
data : formData, // our data object
dataType : 'json' // what type of data do we expect back from the server
})
// using the done promise callback
.done(function(data) {
if (data.success) {
// success.
// hide form container
$("#"+data.message).hide();
$("#"+data.message+"hr").hide();
}
// log data to the console so we can see
//console.log(data);
// here we will handle errors and validation messages
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
});
Form:
<method="post" action="process.php" enctype="multipart/form-data">
<input type="radio" name="answer" value="yes" onClick="onClick="this.form.submit()">

Your syntax for onclick is wrong, but putting onclick attributes on elements is an outdated way of doing things in any case.
You probably want to handle the change event rather than click, since the selection of the radiobutton happens after the click, so if you submit the form right away the radiobutton might not be selected yet (I'm not sure, I'd have to experiment, but change is probably more foolproof).
$(document).ready(function() {
$('input[type=radio]').change(function(event) {
//the rest of your code goes here
//you don't need event.preventDefault() anymore
});
});
Edit: $(this) won't refer to the form anymore of course, just replacing it with $('form') should do the trick.

Adding to database field on submit

In a div on my page called total_records is a database field binding which counts up the total records submitted. i use jquery for the submission so the page doesn't refresh when i click on the button. But i'm only able to get the total records submitted when i refresh the page or press F5. i know there a way out to add 1 to the binding on the page on button click but i don't know how. this is the jquery i use for the submission
$(document).ready(function(){
$("#form2").on('submit',function(event){
$("#comment_loader").fadeIn(); //show when submitting
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "insert.asp",
data: data
}).success(function(msg) {
$('#new_entry').html(msg);
$("#comment_loader").fadeOut('fast');
$("#msg_div").append("<div class='messages' style='border:1px purple solid; padding:2px; margin:5px;'>Your comment has been saved </div>");
setTimeout(function() {
$(".messages").fadeOut(function(){
$(".messages").remove();
});
}, 3000);
$("input[type=text]").val("");
});
});
});

Either you can have have the insert.asp script return the total number of records submitted or within success you can call the script that runs the appropriate query and in either case you can use jQuery to update the div with the number returned:
$('div.total_records').text( 'number-of-records-submitted' );
If you do it this way you would not need to refresh the page.

Staying on same page after the form is submitted and then process the form again

I'm integrating Marketo (3rd party marketing software) with one of our tools on our website.
There is a form that calls an action "http://info.a10networks.com/index.php/leadCapture/save" after it is submitted and the form data is saved into Marketo:
<form
class="lpeRegForm formNotEmpty"
method="post"
enctype="application/x-www-form-urlencoded"
action="http://info.a10networks.com/index.php/leadCapture/save"
id="mktForm_1225"
name="mktForm_1225">
I want to use the same form data to store it in local database(MySQL) too. Ideally, I'd like to load the same page after the form data is sent and also store this form data locally.
Is there a way to perform the following actions:
the form action is called and the data is sent to an external
database
load back the same page and store this form data locally into the database (be able to use $_POST)
I'm using PHP and plain javascript for this integration. Please advise.

You can do this using an ajax call to your own scripts, then submitting the form to marketo.
Essentially if you want to capture the data before its sent off to a remote server for processing you'll capture the data first then allow the form to submit and do its intended processing afterwards.
Here we capture the click of the form, then make sure to disable the button by adding a class to it. So that it won't let the user do multiple clicks before the processing is done. When its done gathering the information and sending if off to your php page it submits the form it its action property.
In this example I grab the value from an input that has the name property set to firstName, this value will be sent over to my PHP script and because I chose a type of POST i can see it in my as
$_POST['firstName']
to debug your post paramters to see what the data looks like so this in your receiving PHP script
echo '<pre>', print_r($_POST, true), '</pre>';
this will give you a display of the data captured.
<script type="text/javascript">
$(document).ready(function() {
$('.formSubmitButton').on('click', function(e) {
e.preventDefault();
if (!$('.formSubmitButton').hasClass('submitted'))
{
// disable the form to prevent multple clicks
$('.formSubmitButton').addClass('submitted');
$.ajax('/path/to/my/db/script', {
type: 'post',
data:{
firstName: $('[name="firstName"]).val(),
lastName: $('[name="lastName"]).val()
}
}).done(function(data) {
$('.parentForm').submit();
// enable the form
$('.formSubmitButton').removeClass('submitted');
});
}
return false;
});
});
</script>

form within AJAX jQuery toggle, submits at parent onClick not from submit button

Basically mysimplewebform.php form submits when the toggle is clicked, as opposed to after the form is loaded, used by user and SUBMITTED via submit button at form. Obviously I need to have form operate functionally; user fills it out, and clicks submit. I simply used AJAX to bring in the form on the template page. Now everytime toggle button is clicked 'Form is submitted with empty values' and then appears in the toggle. Making it pretty useless at this point, I have been struggling with this forever. I think this is a matter of toggling the data: below --
$(document).ready(function() {
$('#toggle3').click(function(){
var tog = $('.toggle');
$.ajax({
type: 'POST',
url: '/mysimplewebform.php',
data: $(this).closest('form').serialize(), // This was a recent suggestion
success: function (fields){
tog.html(fields);
tog.slideToggle(1000);
}
});
});
});
Branched out from: How to send external form POST data through AJAX

Ok, so you want to display an html form when a user clicks a button? In that case you can use the simplified jquery load method:
$('#yourbutton').click(function(){
$('#somediv').load('/mysimplewebform.php');
});
I know this doesnt handle your toggle requirement, but i dont think that is where you are having issues.
Now onto the php. I dont know exactly what should be in mysimplewebform so heres an example
if(isset($_POST['fname'])){
//we have a post request, lets process it
echo 'hello'.$_POST['fname'];
}?>
<form action="absolute/path/to/mysimplewebform.php" method="post" id="mysimplewebform">
<input type="text" name="fname" placeholder="Enter Name">
<input type="submit" value="submit">
</form>
Notice the action is an absolute path to the file, because a relative path will be wrong if the form is loaded into another page via ajax.
Now when this form is submitted, the browser will be redirected to mysimplewebform.php.
I expect you want to stay on the same page, in which case you could submit the form via ajax:
$('#mysimplewebform').submit(function(ev){
ev.preventDefault();//stop normal redirecting submit
$.post( $(this).attr('action'), $(this).serialize(), function(data){
$('#somediv').html(data)
});
This replaces the whole form in the dom with the output, so the hello message would be displayed.
All of the above is an attempt to help you understand where you have been going wrong in your attempts. It is not the best solution to your overall problem - i would separate the html form and processing into seperate files for a start, but it should be familiar to you.