We Keep Coding

Form submits multiple times

I am using a Wordpress theme that unfortunately is duplicating the header HTML for desktop, mobile and tablet. As a result, a login form I have appears to be submitting multiple times even though "Login" is only clicked once.
Here is the HTML for the form:
<div id="user-login">
<div class="com_row">
<div class="com_panel_body">
<div id="error_message91" class="com_alert com_alert_danger" style="display: none;">
</div>
<form method="post" id="validation_form83">
<input type="hidden" name="login_form_flag" value="1">
<div class="login-username">
<label for="email" class="main_label">Email Address</label>
<input id="email68" type="email" name="email" required="required">
</div>
<div class="login-password">
<label for="password" class="main_label">Password:</label>
<input id="password82" type="password" name="password" required="required">
</div>
<ul class="login-links" style="margin-top:-30px"><li>Forgot Password?</li></ul>
<div class="login-submit" style="margin-top:-20px">
<input type="submit" value="Login"></div>
<div style="padding-top:20px"><a class="button green small borderd-bot" href="/client_account">Register</a></div>
</form>
</div>
</div>
</div>
Here is the relevant JS:
$("[id^='validation_form']").each(function(i) {
//necessary because there are 3 form duplicates on the page, so this button works on all
jQuery(document).on("submit", this, SubmitValidationForm);
});
function($) {
SubmitValidationForm = function (event) {
event.preventDefault();
var formk = "#"+event.target.id;
var k = $(formk).serialize();
k += "&action=wcap_requests&what=validate_login";
jQuery("input[type=email]",formk).prop("disabled", true);
jQuery("input[type=password]",formk).prop("disabled", true);
jQuery("input[type=submit]",formk).prop("disabled", true).val(WCAP_Working_text);
var childf = $(formk).closest('div','.com_alert').children( ".com_alert");
$(childf).hide();
var login_form_flag = jQuery("input[name=login_form_flag]",formk).val();
jQuery.post(wcap_ajaxurl, k, function (data) {
data = JSON.parse(data);
console.log(data);
if (data.status === "OK") {
//== if client login through wcap login form
if (login_form_flag === '1'){
window.location.href = client_area_url;
}
else {
if (redirect_login !== "0") {
window.location.href = redirect_login;
} else {
window.location.reload();
}
}
}
else {
jQuery("input[type=email]",formk).prop("disabled", false);
jQuery("input[type=password]",formk).prop("disabled", false);
jQuery("input[type=submit]",formk).prop("disabled", false).val('Login');
$(childf).html(data.message).show();
}
});
};
};
The problem is because there are 3 duplicate forms on the page HTML (with only 1 visible to the user), the SubmitValidationForm function is called 3 times every time. The issue is pronounced when there is a valid login submitted, but the error box still appears saying invalid email after a few seconds (even though the login is actually correct and the user gets automatically redirected properly to the client area ). This error seems caused by the fact the SubmitValidationForm function is called 2 subsequent times after the first 'valid' submission which makes it think it's invalid, when it's not... the interesting thing is it doesn't seem caused by the other duplicate forms in the HTML, as the form ID attribute that I display in browser console shows only the 'valid' form being submitted (albeit multiple times -- perhaps because of the jquery.on() for each function).
Any ideas how to fix?
Thanks!

I figured out the issue. If anyone else is looking at this in future the issue was with respect to the 'on' function, it was referencing the 'document' before instead of 'this'. So it should be changed to:
$("[id^='validation_form']").each(function(i) {
jQuery(this).on("submit", this, SubmitValidationForm);
});

Google Analytics Goal tracking in javascript/ajax

I have a javascript/ajax based contact form on a website page. If people click to send the form, I want this click to be registered by Google Analytics. I created a goal for this, for some reason I cannot get it to work. Any help?
The code of the form is:
<form id="footer_quick_contact_form" name="footer_quick_contact_form" class="quick-contact-form" action="includes/quickcontact.php" method="post">
<div class="form-group">
<input id="form_email" name="form_email" class="form-control" type="text" required="" placeholder="E-mail">
</div>
<div class="form-group">
<textarea id="form_message" name="form_message" class="form-control" required placeholder="message" rows="3"></textarea>
</div>
<div class="form-group">
<input id="form_botcheck" name="form_botcheck" class="form-control" type="hidden" value="" />
<button type="submit" class="btn btn-default btn-transparent text-gray btn-xs btn-flat mt-0" data-loading-text="One moment please...." onClick="ga('send', 'event', { eventCategory: 'Contact', eventAction: 'ContactRequest'});">Verstuur nu!</button>
</div>
</form>
<!-- Quick Contact Form Validation-->
<script type="text/javascript">
$("#footer_quick_contact_form").validate({
submitHandler: function(form) {
var form_btn = $(form).find('button[type="submit"]');
var form_result_div = '#form-result';
$(form_result_div).remove();
form_btn.before('<div id="form-result" class="alert alert-success" role="alert" style="display: none;"></div>');
var form_btn_old_msg = form_btn.html();
form_btn.html(form_btn.prop('disabled', true).data("loading-text"));
$(form).ajaxSubmit({
dataType: 'json',
success: function(data) {
if( data.status == 'true' ) {
$(form).find('.form-control').val('');
}
form_btn.prop('disabled', false).html(form_btn_old_msg);
$(form_result_div).html(data.message).fadeIn('slow');
setTimeout(function(){ $(form_result_div).fadeOut('slow') }, 6000);
}
});
}
});
</script>
As you can see I added an on-click event to the send button. In google analytics I created a goal, by going to admin>goals>new goal>custom radio button>next. I gave the goal a name, selected the Event radio button and filled in the following fields:
Category: Contact
Action: ContactRequest
Label: Empty
Value: Empty
I thought I'd have fixed it, but until now I can't track any results in GA. Any suggestions?

After reading your comment it would seem the problem is that you are using the wrong syntax in your click event handler.
You are calling the ga() function, which is a part of the Universal Analytics Code, which for some time now has been replaced by gtag.js.
I do not usually use gtag.js (I prefer to use Google Tag Manager), but according to the documentation the correct call would look like this:
gtag('event', 'contact_request', { // second parameter is event action
'event_category': 'contact',
'event_label': '',
'value': 0
});
(Actually you can leave out label and value if you do not need them).

jQuery/JS/PHP - Disable Form and Submit button only after submit

I have a form that I would like to disable the submit button and form itself after it has submitted. The form currently submits to itself and all the solutions I've tried so far either disable the form and submit button, but the form is never submitted or the form is submitted but the button/form are not disabled.
PHP:
<?php
if(isset($_POST['send'])){
if(!isset($_SESSION))
{
session_start();
session_regenerate_id();
}
if($_SESSION['user_login_status']==false)
{header('Location:../index.php');}
$Firstname = $_POST["firstname"];
$Lastname = $_POST["lastname"];
$EmpID = $_POST["employeeid"];
$Ticket = $_POST["ticket"];
$Office = $_POST["office"];
$Division = $_POST["division"];
$Device = $_POST["device"];
$Secure = $_POST["secure"];
$Zendesk = $_POST["zendesk"];
$Agent = $_SESSION['user'];
$psPath = 'c:\\Windows\\System32\WindowsPowerShell\v1.0\\powershell.exe -version 5';
$psDIR = "d:\\wamp64\\www\\includes\\";
$psScript = "NewHire.ps1";
$runCMD = $psPath. ' -ExecutionPolicy RemoteSigned '.$psDIR.$psScript.' -Firstname ' .$Firstname. ' -Lastname '.$Lastname. ' -EmpID ' .$EmpID. ' -Ticket ' .$Ticket. ' -Office ' .$Office. ' -Division ' .$Division. ' -Device ' .$Device. ' -Secure ' .$Secure. ' -Zendesk ' .$Zendesk. ' -Agent ' .$Agent;
$createuser = exec($runCMD, $out);
}
?>
Trimmed down HTML:
<form class="rnd5" method="post" id="frm">
<div class="form-input clear">
<label class="one_third" for="firstname">Firstname <span class="required"><font color="red">*</font></span>
<input type="text" name="firstname" id="firstname" autofocus required>
</label>
</div>
<!-- ################################################################################################ -->
<div class="form-input clear">
<label class="one_third" for="lastname">Lastname <span class="required"><font color="red">*</font></span>
<input type="text" name="lastname" id="lastname" required>
</label>
</div>
<p>
<input type="submit" name="send" value="Submit">
<input type="reset" value="Reset">
</p>
</form>
</div>
<!-- ################################################################################################ -->
<div class="clear"></div>
</div>
</div>
<!-- Footer -->
<?php include('../footer.php'); ?>
</body>
</html>
I have tried different functions such as:
$(function () {
$(".send").click(function () {
$(".send").attr("disabled", true);
$('#frm').submit();
});
});
and
$('input:submit').click(function(){
$('input:submit').attr("disabled", true);
});
Nothing so far appears to be working. Anyone have ideas?

I can see two fundamental problems with your code. Firstly your jQuery selectors.
In the first function: The . selector (as in $(".send") works on the class attribute, not the name attribute. I would suggest you either change your Inputs to have class = send or you change the selector to $("[name=send]").
In the second function. I'm pretty sure $('input:submit') isn't a valid selector, and I'm not sure what is meant by it.
Check out: http://www.w3schools.com/jquery/jquery_ref_selectors.asp
The second problem is that you are submitting the form and thus triggering a page reload. I take it that this isn't the desired behaviour if you want to disable the form buttons? In which case you should disable the default behaviour of the button (There are many ways of doing that: Stop form refreshing page on submit ) and POST the data to the server yourself.
This would leave you with something like the following:
$(function () {
$("[name='send']").click(function () {
$(this).attr("disabled", true);
$("#frm").submit();
});
$("#frm").on("submit",function() {
$.post("http://example.com/your_php_file.php",$(this).serialize());
$(this).preventDefault();
});
});
I haven't been able to test this myself because I don't have much time nor a handy web server, but this should give you a good start.

On submit, remote call php - why aren't $_POST values being posted?

So, I'm a bit in unfamiliar territory with json and remote calls but the url and datatype is correct and... it is clearly arriving at target. BUT.!
It's a very simple form with 3 visible and 2 hidden fields.
<form id="subChange" action="#" method="POST">
<div style="clear:both;">first name</div>
<div>
<input id="fart" type="text" style="margin:4px;width:90%;" name="newFirst" value="" data-validetta="required,characters,remote[check_update]">
</div> last name<BR>
<div>
<input type="text" style="margin:4px;width:90%;" name="newLast" value="" data-validetta="required,characters,remote[check_update]">
</div> eMail<BR>
<div>
<input type="hidden" name="oldName" value="Conor" data-validetta="remote[check_update]">
</div>
<div>
<input type="hidden" name="oldEmail" value="cburkeg#gmail.com" data-validetta="remote[check_update]">
</div>
<div>
<input type="text" style="margin:4px;width:90%;" name="newEmail" value="" data-validetta="required,email,remote[check_update]">
</div>
<div style="margin-top:12px">
<input type="submit" name="sub_change" value="change it" data-validetta="remote[check_update]">
</div>
</form>
Here is the js
<script type="text/javascript">
$(function(){
$("#subChange").validetta({
realTime : true,
bubbleLoc:"right",
onValid : function( event ){
event.preventDefault();
$("#changeDIV").html("thanks Conor <P>Your subscription has been updated");
},
remote : { check_update : { type : "POST", url : "checkNewsUpdate.php", datatype : "json" }}
});
})
</script>
With fields filled we test Submit; name='sub_change' value='change it'
if (isset($_POST['sub_change'])) {
$count = count($_POST);
$postdata = file_get_contents("php://input"); //... write to file, etc.
}
output -
$count: 1
$postdata: sub_change=change+it
What happened to the other fields?
My only current working solution is to set each field with the remote call and set a $_POST validation (done auto., in real time) for each input which writes to a remote file. On submit we then call the contents of that file. Only trouble is it misses the 2 hidden files - there is no auto trigger :(
This is a clumsy work-around (that doesn't even work).
I thought about setting the hidden fields as an ID but getting the value with PHP is a trial. There must be something real simple I am missing here.

Make a text entry fade out after input validation, then fade back in with original placeholder text

I'm setting up a splash page with a single email entry form.
Right now when a user enters an email the form fades out quickly and a thank you message fades in to replace it. What I want to do is have the 'Thank You' fade out after a couple of seconds then have the form fade back in.
I can get it to happen, it's just that the form comes back with the email that was originally entered and I'm having a hell of time trying to figure out a way of replacing the email address with the original placeholder text.
Here's the from:
<form action="" method="post" id="sendEmail">
<div class="forms">
<div class="buttons" id="buttons">
<button type="submit" id="submit"></button>
<input type="hidden" name="submitted" id="submitted" value="true"
/>
</div>
<div class="text_box" id="text_box">
<input type="text" name="emailTo" id="emailTo" value=" Your Email Here"
onfocus="this.value=''" />
</div>
</div>
</form>
<div class="answerBox">
<div style="display:none;" id="thanks">Thank you!</div>
</div>
And this is the Jquery I'm using to handle the fade in, fade out after successful validation:
if (hasError == false) {
$.post("adduser1.php", {
emailTo: emailToVal
}, function (data) {
$(".buttons").fadeOut(200);
$(".text_box").fadeOut(200, function () {
$("#thanks").fadeIn(200)
});
});
}
return false;
I tried this:
$.post("adduser1.php", {
emailTo: emailToVal
}, function (data) {
$(".buttons").fadeOut(200);
$(".text_box").fadeOut(200, function () {
$("#emailTo").text(" Your Email Here", function () {
$("#thanks").fadeIn(200))
});
But It doesn't work.
Any ideas?

First, #emailTo is not affected by .text as it's an <input> element. Replace .text with .val:
$("#emailTo").val(" Your Email Here")
Second, you're trying to bind #thanks.fadeIn to the end of .text (or .val) change. Since it's an instant action, this is unnecessary (and I think also not proper jQuery syntax). Just place $("#thanks").fadeIn(200) in the next line:
function (data) {
$(".buttons").fadeOut(200);
$(".text_box").fadeOut(200, function () {
$("#emailTo").val(" Your Email Here")
$("#thanks").fadeIn(200))
});
}
Working example: jsFiddle