Develop Reference

Two form in one page php, but want to submit only one

I have a page where I have a form for signin and an another for signup.
But when I click either on singin or signup button it's always the signup form who is sent.
Where is my error ?
PHP CODE :
if($_SERVER['REQUEST_METHOD'] == "POST")
{
if ($_POST['modification'] == 1)
{
alert("Signin");
}
if ($_POST['modification'] == 2)
{
alert("Signup");
}
}
HTML CODE :
<div class="col-md-6">
<div class="contact-form">
<form id="connecter" name="connecter" method="post">
<div class="row">
<div class="col-sm-6">
<fieldset>
<input name="txtIdentifiant" type="text" class="form-control" id="txtIdentifiant" placeholder="Identifiant" required="">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset>
<input name="txtMotDePasse" type="text" class="form-control" id="txtMotDePasse" placeholder="Mot de passe" required="">
</fieldset>
</div>
<div class="col-lg-12">
<fieldset>
<button type="submit" id="btnConnecter" name="btnConnecter" class="filled-button" form="connecter" value="btnConnecter">Se connecter</button>
<input type="hidden" name="modification" value="1" />
</fieldset>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-6">
<div class="contact-form">
<form id="inscrire" name="inscrire" method="post">
<div class="row">
<div class="col-sm-6">
<fieldset>
<input name="txtPrenom" type="text" class="form-control" id="txtPrenom" placeholder="Prénom" required="">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset>
<input name="txtNom" type="text" class="form-control" id="txtNom" placeholder="Nom" required="">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset>
<input name="txtGSM" type="text" class="form-control" id="txtGSM" placeholder="Numéro de GSM" required="">
</fieldset>
</div>
<div class="col-lg-12 col-md-12 col-sm-12">
<fieldset>
<input name="txtAdresseMail" type="text" class="form-control" id="txtAdresseMail" placeholder="Email" required="">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset>
<input name="txtIdentifiantInscription" type="text" class="form-control" id="txtIdentifiantInscription" placeholder="Identifiant" required="">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset>
<input name="txtMotDePasseInscription" type="text" class="form-control" id="txtMotDePasseInscription" placeholder="Mot de passe" required="">
</fieldset>
</div>
<div class="col-lg-12">
<fieldset>
<button type="submit" id="btnCreerCompte" name="btnCreerCompte" class="filled-button" form="inscrire" value="btnCreerCompte">S'inscrire</button>
<input type="hidden" name="modification" value="2"/>
</fieldset>
</div>
</div>
</form>
</div>
</div>
AJAX CODE :
<script type="text/javascript">
$('#btnConnecter').on('click',function(e){
//prevent submitting form
e.preventDefault();
//Get Input Values
var identifiant = document.getElementById("txtIdentifiant").value;
var motDePasse = document.getElementById("txtMotDePasse").value;
//Form Validation
if (identifiant && motDePasse)
{
//Call Ajax to check if user existed
$.ajax({
type : "POST",
url : "check-signin.php",
dataType: "json",
data:
{
identifiant: identifiant, motDePasse: motDePasse
},
success:function(result)
{
// alert(result.msg);
if (result.msg == "Success")
{
e.preventDefault();
//Submit form if user not existed
$('form').submit();
//alert("Ajax ok");
}
else if (result.msg == "Failed")
{
e.preventDefault();
alert("Identifiant/Mot de passe incorrect");
//C'est chaud
document.getElementById("txtIdentifiant").focus();
return false;
}
else if (result.msg == "Active")
{
e.preventDefault();
alert("Veuillez activer votre compte");
document.getElementById("txtIdentifiant").focus();
return false;
}
}
});
}
else
{
alert("Veuillez remplir tout les champs");
return false;
}
});
</script>
<script type="text/javascript">
$('#btnCreerCompte').on('click',function(e){
e.preventDefault();
var prenom = document.getElementById("txtPrenom").value;
var nom = document.getElementById("txtNom").value;
var mail = document.getElementById("txtAdresseMail").value;
var numGSM = document.getElementById("txtGSM").value;
var minGSM = document.getElementById("txtGSM").length;
var identifiant = document.getElementById("txtIdentifiantInscription").value;
var motDePasse = document.getElementById("txtMotDePasseInscription").value;
if (prenom && nom && mail && numGSM && identifiant && motDePasse)
{
if (isNaN(numGSM) || numGSM.length < 7)
{
alert("Numéro de gsm non valide");
//Phone number invalid
document.getElementById("txtGSM").focus();
return false;
}
else if (validateEmail(mail))
{
$.ajax({
type : "POST",
url : "check-user.php",
dataType: "json",
data: {
identifiant: identifiant
},
success:function(result)
{
if (result.msg == "Success")
{
e.preventDefault();
$('form').submit();
}
else if (result.msg == "Failed")
{
e.preventDefault();
alert("Identifiant déjà existant");
document.getElementById("txtIdentifiantInscription").focus();
return false;
}
}
});
}
else
{
alert("Adresse mail incorrecte");
document.getElementById("txtAdresseMail").focus();
return false;
}
}
else
{
alert("Veuillez remplir tout les champs");
return false;
}
});
</script>
Is it Ajax that break the php submit ?
Because I have the double form in the client section where he can change either his information or his password, and it work over there, I don't know why here it won't work :(
Thank you guys !

do not use button type="submit":
Update to:
<button id="btnCreerCompte" name="btnCreerCompte" class="filled-button" form="inscrire" value="btnCreerCompte">S'inscrire</button>
or:
<input type="button" value="S'inscrire" onclick="submitFormCreerCompte()">
And in the scripts create function "submitFormCreerCompte()" and call ajax to submit form

So I test one or two things, and I somehow make it work like this :
HTML CODE :
<button type="submit" id="btn" name="btn" class="filled-button" form="connecter" value="btnConnecter">Se connecter</button>
<input type="hidden" name="btn" value="btnConnecter" />
<button type="submit" id="btn" name="btn" class="filled-button" form="inscrire" value="btnCreerCompte">S'inscrire</button>
<input type="hidden" name="btn" value="btnCreerCompte"/>
PHP CODE :
if($_SERVER['REQUEST_METHOD'] == "POST")
{
if ($_POST['btn'] == 'btnConnecter')
{
alert("Je suis dedans co");
}
else if ($_POST['btn'] == 'btnCreerCompte')
{
alert("Je suis dedans ins");
}
else
{
alert("Rien fonctionne");
}
}
Thank for the attention guys

Salesforce form showing errors even when filled out correctly

I am new to salesforce and don't have a lot of experience with javascript. The issue I am having is that as I am testing a form and filling out the inputs it is adding the the "has-error" class to the parent div even when the input is filled out correctly. However, it will allow the form to be submitted so it is not conflicting with that.
I took over the work from another developer so Im not sure what is causing the error.
The is the javascript for the salesforce form. I am also using validate.js:
'use strict';
var constraints = {
// First Name
'00N4100000CJ8sT': {
presence: {
message: '^First Name is required'
},
length: {
maximum: 80
}
},
// Last Name
'00N4100000CJ8sY': {
presence: {
message: '^Last Name is required'
},
length: {
maximum: 80
}
},
// Appointment Date
'00N4100000EWaN0': {
presence: {
message: '^Date is not valid'
},
format: {
pattern: /^\d{1,2}\/\d{1,2}\/\d{4}$/,
},
},
// Patient Email
'00N4100000CJ8sE': {
presence: {
message: '^Email is required'
},
email: {
message: '^Email is not valid'
}
},
// Phone
'phone': {
presence: true,
format: {
pattern: /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/,
message: '^Phone Number is not valid'
}
}
};
$('.salesforce-form').each(function () {
var form = this;
form.addEventListener('submit', function (ev) {
ev.preventDefault();
handleFormSubmit(form);
});
var inputs = document.querySelectorAll('input, textarea, select');
for (var i = 0; i < inputs.length; ++i) {
inputs.item(i).addEventListener('change', function (ev) {
var errors = validate(form, constraints) || {};
showErrorsForInput(this, errors[this.name]);
});
}
function handleFormSubmit(form, input) {
var errors = validate(form, constraints);
showErrors(form, errors || {});
if (!errors) {
showSuccess(form);
}
}
function showErrors(form, errors) {
_.each(form.querySelectorAll('input[name], select[name]'), function (input) {
showErrorsForInput(input, errors && errors[input.name]);
});
}
function showErrorsForInput(input, errors) {
var formGroup = closestParent(input, 'form-group');
var messages = formGroup.querySelector('.messages');
resetFormGroup(formGroup);
if (errors) {
formGroup.classList.add('has-error');
_.each(errors, function (error) {
addError(messages, error);
});
} else {
formGroup.classList.add('has-success');
}
}
function closestParent(child, className) {
if (!child || child == document) {
return null;
}
if (child.classList.contains(className)) {
return child;
} else {
return closestParent(child.parentNode, className);
}
}
function resetFormGroup(formGroup) {
formGroup.classList.remove('has-error');
formGroup.classList.remove('has-success');
_.each(formGroup.querySelectorAll('.help-block.error'), function (el) {
el.parentNode.removeChild(el);
});
}
function addError(messages, error) {
var block = document.createElement('p');
block.classList.add('help-block');
block.classList.add('error');
block.innerText = error;
messages.appendChild(block);
}
function showSuccess(form) {
var myEmail = form.querySelector('#my-email').value;
if (!myEmail.length > 0) {
form.querySelector('#orgid').value = '00D41000000MWct';
var postData = $(form).serializeArray();
$.ajax({
type: 'POST',
url: '(salesforce url goes here)',
data: postData,
success: function success(data, textStatus, jqXHR) {
//data: return data from server
},
error: function error(jqXHR, textStatus, errorThrown) {
//if fails
$(form).find('.form-group').fadeOut();
$('.thank-you-message').last().clone().appendTo(form).fadeIn();
dataLayer.push({
'event': 'gtm.formSubmit',
'gtm.elementClasses': form.className
});
}
});
}
}
});
This is the html for the salesforce form:
<form class="salesforce-form salesforce-contact-form" novalidate>
<div class="hide form-group">
<input id="my-email" name="my-email" type="text" />
<input type="hidden" id="orgid" name="orgid" />
<input type="hidden" id="email" name="email" value="test#email.com"/>
<input type="hidden" id="00N4100000IkI2v" name="00N4100000IkI2v" value="<?php echo get_permalink(); ?>" />
<input type="hidden" id="00N4100000IkHtO" name="00N4100000IkHtO" value="<?php echo get_client_ip(); ?>" />
<input type="hidden" id="00N4100000HxXj4" name="00N4100000HxXj4" value="New" />
<input type="hidden" id="00N4100000CL2tK" name="00N4100000CL2tK" value="Request Appointment" title="Form Type" />
</div>
<div class="col-md-6 col-sm-6 col-xs-6 form-group first-name">
<label for="00N4100000CJ8sT" class="hidden">First Name</label>
<input id="00N4100000CJ8sT" maxlength="80" name="00N4100000CJ8sT" size="20" type="text" placeholder="First Name: *">
<div class="messages"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 form-group last-name">
<label for="00N4100000CJ8sY" class="hidden">Last Name</label>
<input id="00N4100000CJ8sY" maxlength="80" name="00N4100000CJ8sY" size="20" type="text" placeholder="Last Name: *">
<div class="messages"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 form-group email">
<label for="00N4100000CJ8sE" class="hidden">Email</label>
<input id="00N4100000CJ8sE" maxlength="80" name="00N4100000CJ8sE" size="20" type="email" placeholder="Email: *">
<div class="messages"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 form-group phone">
<label for="phone" class="hidden">Phone</label>
<input id="phone" maxlength="40" name="phone" size="20" type="text" placeholder="Phone: *">
<div class="messages"></div>
</div>
<div class="col-md-12 col-xs-12 form-group appointment-date">
<label for="00N4100000EWaN0" class="hidden">Appointment Date</label>
<input id="00N4100000EWaN0" name="00N4100000EWaN0" size="20" type="text" placeholder="Appointment Date: *">
<div class="messages"></div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 form-group comments">
<label for="description" class="hidden">Comments</label>
<textarea id="description" name="description" placeholder="Comments:"></textarea>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 form-group submit">
<input type="submit" value="Submit +" class="btn small"/>
</div>
</form>
Let me know if this needs more explanation or if you need to see any other files.

JQuery regex email validation preventing form from submitting

I have a 'contact us' form on our website, people fill out name, email, and message and hit send. Currently the form won't submit if I have the email validation in my code.
Here is HTML form code:
<form role="form" id="feedbackForm">
<div class="form-group">
<label class="control-label" for="name">Full Name *</label>
<div class="input-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Enter Your Name" required/>
<span class="input-group-addon"><i class="glyphicon glyphicon-unchecked form-control-feedback"></i></span>
</div>
<span class="help-block" style="display: none;">Please enter your name.</span>
</div>
<div class="form-group">
<label class="control-label" for="email">Email Address *</label>
<div class="input-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Enter Your Email" required/>
<span class="input-group-addon"><i class="glyphicon glyphicon-unchecked form-control-feedback"></i></span>
</div>
<span class="help-block" style="display: none;">Please enter a valid e-mail address.</span>
</div>
<div class="form-group">
<label class="control-label" for="reason">Contact Reason *</label>
<select name="reason" class="form-control" required>
<option value="General Inquiry">General Inquiry</option>
<option value="Schedule Appointment">Schedule Appointment</option>
<option value="Report Issue">Report Issue</option>
<option value="Provide Feedback">Provide Feedback</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="message">Message *</label>
<div class="input-group">
<textarea rows="5" class="form-control" id="message" name="message" placeholder="Enter Your Message" required></textarea>
<span class="input-group-addon"><i class="glyphicon glyphicon-unchecked form-control-feedback"></i></span>
</div>
<span class="help-block" style="display: none;">Please enter a message.</span>
</div>
<div class="form-group">
<div class="g-recaptcha" data-sitekey="mykey"></div>
<span class="help-block" style="display: none;">Please check that you are not a robot.</span>
<button type="submit" id="feedbackSubmit" class="btn btn-success btn-lg" data-loading-text="Sending..." style="display: block; margin-top: 10px;">Send Feedback
</button>
</div>
</form>
and here's the jquery code:
(function () {
//using regular expressions, validate email
var contactFormUtils = {
isValidEmail: function (email) {
var regex = /^([a-zA-Z0-9_.+-])+\#(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);
},
//if no form errors, remove or hide error messages
clearErrors: function () {
$('#emailAlert').remove();
$('#feedbackForm .help-block').hide();
$('#feedbackForm .form-group').removeClass('has-error');
},
//upon form clear remove the checked class and replace with unchecked class. Also reset Google ReCaptcha
clearForm: function () {
$('#feedbackForm .glyphicon').removeClass('glyphicon-check').addClass('glyphicon-unchecked').css({color: ''});
$('#feedbackForm input,textarea').val("");
grecaptcha.reset();
},
//when error, show error messages and track that error exists
addError: function ($input) {
var parentFormGroup = $input.parents('.form-group');
parentFormGroup.children('.help-block').show();
parentFormGroup.addClass('has-error');
},
addAjaxMessage: function(msg, isError) {
$("#feedbackSubmit").after('<div id="emailAlert" class="alert alert-' + (isError ? 'danger' : 'success') + '" style="margin-top: 5px;">' + $('<div/>').text(msg).html() + '</div>');
}
};
$(document).ready(function() {
$("#feedbackSubmit").click(function() {
var $btn = $(this);
$btn.button('loading');
contactFormUtils.clearErrors();
//do a little client-side validation -- check that each field has a value and e-mail field is in proper format
//use bootstrap validator (https://github.com/1000hz/bootstrap-validator) if provided, otherwise a bit of custom validation
var $form = $("#feedbackForm"),
hasErrors = false;
if ($form.validator) {
hasErrors = $form.validator('validate').hasErrors;
} else {
$('#feedbackForm input,#feedbackForm textarea').not('.optional').each(function() {
var $this = $(this);
if (($this.is(':checkbox') && !$this.is(':checked')) || !$this.val()) {
hasErrors = true;
contactFormUtils.addError($(this));
}
});
var $email = $('#email');
if (!contactFormUtils.isValidEmail($email.val())) {
hasErrors = true;
contactFormUtils.addError($email);
}
}
//if there are any errors return without sending e-mail
if (hasErrors) {
$btn.button('reset');
return false;
}
//send the feedback e-mail
$.ajax({
type: "POST",
url: "php/sendmail.php",
data: $form.serialize(),
success: function(data) {
contactFormUtils.addAjaxMessage(data.message, false);
contactFormUtils.clearForm();
},
error: function(response) {
contactFormUtils.addAjaxMessage(response.responseJSON.message, true);
},
complete: function() {
$btn.button('reset');
}
});
return false;
});
$('#feedbackForm input, #feedbackForm textarea').change(function () {
var checkBox = $(this).siblings('span.input-group-addon').children('.glyphicon');
if ($(this).val()) {
checkBox.removeClass('glyphicon-unchecked').addClass('glyphicon-check').css({color: 'green'});
} else {
checkBox.removeClass('glyphicon-check').addClass('glyphicon-unchecked').css({color: ''});
}
});
});
})();
When I remove this bit of code that validates if the email is in correct format then the form sends to my email right away.
var $email = $('#email');
if (!contactFormUtils.isValidEmail($email.val())) {
hasErrors = true;
contactFormUtils.addError($email);
}
Which in turn leads to this bit, I believe :
if (hasErrors) {
$btn.button('reset');
return false;
}
if I comment out 'return false;' then it sends the form
I can't find what part of the email validation prevents the form from submitting?

Maybe you have another element with id="email" somewhere.
Maybe try:
$('#feedbackForm input[type=email]').each(function() {
if (!contactFormUtils.isValidEmail(this.val())) {
hasErrors = true;
contactFormUtils.addError(this);
console.log("ERROR: Invalid email: "+this.val()+" in input "+this.attr("name"));
}
})

validate popup, then open another popup

I am using bootstrap to create a popup signup form. Once the user clicks submit and it has been validated I want to close that popup and open another saying thank you. I have tried using .modal('show') in popupvalidation.js but that did not seem to work. All it did was open both at the same time.
Here is the code:
index.php
<form name="popup" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" onsubmit="return popupValidation();" method="post">
<div class="row">
<input name="firstName" type="text" class="form-control" id="inputFirstName" placeholder="First Name">
<input name="lastName" type="text" class="form-control" id="inputLastName" placeholder="Last Name">
</div>
<div class="row">
<input name="email" type="email" class="form-control" id="inputEmail" placeholder="youremail#email.com">
</div>
<div class="row">
<input name="password" type="password" class="form-control" id="inputPassword" placeholder="password">
</div>
<div class="row">
<input name="repeatPass" type="password" class="form-control" id="retypePassword" placeholder="Retype password">
</div>
<div class="row">
<input name="trainer" type="checkbox"/> Sign up as trainer
</div>
<div class="modal-footer popup-footer">
<p id="error">Please make sure all fields are filled out</p>
<input type="submit" class="btn btn-default submit" value="Register">
</div>
</form>
popupvalidation.js
function popupValidation() {
var fname = document.forms["popup"]["firstName"].value;
var lname = document.forms["popup"]["lastName"].value;
var pass = document.forms["popup"]["password"].value;
var repass = document.forms["popup"]["repeatPass"].value;
var email = document.forms["popup"]["email"].value;
if (fname==null || fname=="") {
document.getElementById("inputFirstName").focus();
document.getElementById("error").innerHTML= 'Please enter your First Name';
document.getElementById("error").style.display = 'block';
return false;
}
if (lname==null || lname=="") {
document.getElementById("inputLastName").focus();
document.getElementById("error").innerHTML= 'Please enter your Last Name';
document.getElementById("error").style.display = 'block';
return false;
}
if (email==null || email=="") {
document.getElementById("inputEmail").focus();
document.getElementById("error").innerHTML= 'Please enter a valid email';
document.getElementById("error").style.display = 'block';
return false;
}
if (pass==null || pass=="") {
document.getElementById("inputPassword").focus();
document.getElementById("error").innerHTML= 'Please enter a password';
document.getElementById("error").style.display = 'block';
return false;
}
if (repass==null || repass=="") {
document.getElementById("retypePassword").focus();
document.getElementById("error").innerHTML= 'Please retype password';
document.getElementById("error").style.display = 'block';
return false;
}
if (repass!=pass) {
document.getElementById("retypePassword").focus();
document.getElementById("error").innerHTML= 'Passwords do not match';
document.getElementById("error").style.display = 'block';
return false;
}
}

onSubmit redirect to website depenfing on value

Hi I'm trying to create a simple login form with 2 or 3 users where depending on who is logging in the redirect should be to different urls.
My code so far:
HTML
<h1 class="title">Logga in</h1>
<div class="grid__container">
<form name="login" onSubmit="return validateForm();" action="some website url" method="post" class="form form--login">
<div class="form__field">
<label class="fontawesome-user" for="login__username"><span class="hidden">Username</span></label>
<input name="usernameInput" id="login__username" type="text" class="form__input" placeholder="Username" required>
</div>
<div class="form__field">
<label class="fontawesome-lock" for="login__password"><span class="hidden">Password</span></label>
<input name="passwordInput" id="login__password" type="password" class="form__input" placeholder="Password" required>
</div>
<div class="form__field">
<input type="submit" value="Sign In">
</div>
</form>
</div>
JavaScript
function validateForm() {
var username = document.login.usernameInput.value;
var password = document.login.passwordInput.value;
var username1 = "user 1";
var password1 = "1234";
var username2 = "user 2";
var password2 = "4321";
if ((username == username1) && (password == password1)){
return "www.google.se";
}else if (username == username2) && (password == password2) {
return "www.facebook.se";
}else{
alert ("Login was unsuccessful, please check your username and password");
return false;
}
}