We Keep Coding

Submitting a contact form with sent status on the same page

I am building a portfolio website and in the contact form, I want a success/fail response after submission. I prefer to stay on the same page whilst this process.
I tried other solutions that were in other pages related to this topic but I could not understand why they did not work for me. Since I am a newbie, I will appreciate a crystal clear explanation. Thanks a lot!
I tried the solution under this topic: Submit contact form with success/fail alert on same page
MY CURRENT HTML CODE IS;
<form id="contact-form" method="post" action="contact.php" role="form" enctype="text/plain">
<div class="messages"></div>
<div class="controls">
<div class="form-group">
<input id="form_name" type="text" name="name" class="form-control" placeholder="Name *" required="required" data-error="name is required.">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<input id="form_email" type="email" name="email" class="form-control" placeholder="E-mail *" required="required" data-error="Valid email is required.">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<input id="form_subject" type="text" name="subject" class="form-control" placeholder="Subject">
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="send a message."></textarea>
<div class="help-block with-errors"></div>
</div>
<input type="submit" name="submit" class="btn btn-send float-" value="Send message">
<p class="text-muted"><strong>*</strong> These fields are required.</p>
</div>
<div class="clearfix"></div>
</form>
I expect to see confirmation or fail report on the same page after submitting the form. It can be anywhere on the page. I just want the visitor to know that I received their message or could not.

Simple example jQuery version:
$("#contact-form").submit(function() {
var name = $("#form_name").val();
var email = $("#form_email").val();
// ...other fields
// and validation if empty or e-mail is valid etc.
// if validation fails just return false;
if( !name ) {
// here You can send message or activate help-block
return false;
}
// if everything correct use for example ajax from jquery
$.ajax({
url: '/url/to/receiver',
type: 'post',
data: { name: name, .... },
dataType: 'jsonp',
success: function( r ) {
if( r.success ) {
// message and pass form validation
// clear fields, or hide contact form
}
if( r.error ) {
// show error
}
}
});
return false;
});
Remember to return from server JSON like { success: true } or { error: true, msg: "message why fails" }.
But it will be much better, when You will change input type=submit to button, and then make:
$("#contact-form .class-of-input-button").off().on('click', function() { /* rest of the code */ });

Materializecss with jquery validation not working

HTML markup;
<div id="address" class="col s12">
<div class="row">
<form method="post" action="" id="addressDetails">
<div class="input-field col s6">
<textarea id="lAddress" name = 'lAddress' minlength='20' maxlength='100' class="materialize-textarea" class="validate" required length="100"></textarea>
<label for="lAddress" data-error="Must be between 20 to 100 Characters">Local Address</label>
</div>
<div class="input-field col s6">
<textarea id="pAddress" name = 'pAddress' minlength='20' maxlength='100' class="materialize-textarea" class="validate" required length="100"></textarea>
<label for="pAddress" data-error="Must be between 20 to 100 Characters">Permanent Address</label>
</div>
</form>
</div>
<div class="row center-align">
<button type="submit" name="submitAddress" form="addressDetails" class="waves-effect waves-light light-blue darken-1 btn updateProfile">Save Address Details</button>
</div>
</div>
JavaScript code:
function updateProfile(event) {
console.log(this);
event.preventDefault();
form = $(this).closest('.col.s12').find('form');
$.ajax('profile/updateProfile.php', {
type: "POST",
dataType: "json",
data: form.serialize(),
success: function(result) {
Materialize.toast(result.message, 4000);
},
error: function() {
Materialize.toast("Failed: Please contact admin.", 4000);
},
timeout: 5000
});
}
$(document).ready(function() {
$("button.updateProfile").on('click', updateProfile);
});
Earlier with normal form submission validation was working. But now with jQuery AJAX request I am able to send data, but when form is invalid then it shows error in red but it accepts the form with error.
When I am using $("button.updateProfile").on('sumbit', updateProfile); it is validating but it is reloading the page and preventDefault is not working.

$("button.updateProfile").on('click', updateProfile);
This will not validate with the help of materialize validate. You have to look for submit.
Again with submit it will have problem, it is not looking for submission in form.
$("button.updateProfile").on('sumbit', updateProfile);
Instead of button use form, then will look for form submission. Like this
$("form").on('submit', updateProfile);
This will work perfectly.
So remember whenever you are submitting a form check for submit on form not on submit buttons.

BrainTree Hosted Fields onPaymentMethodReceived function not working returning nonce

I am having a hard time figuring out why the onPaymentMethodReceived in a hosted fields is not returning any values.
`
<form action="" id="my-form" method="post">
<label for="a">Amount</label>
<div id="amount">
<input type="text" name="amount" value="400" id="amount" />
</div>
<label for="card-number">Card Number</label>
<div id="card-number">
<input type="text" name="cardNumber" value="4111111111111111" id="cardNumber" />
</div>
<label for="cvv">CVV</label>
<div id="cvv">
<input type="text" name="CVV" value="020" id="cv-v" />
</div>
<label for="expiration-month">Expiration Month</label>
<div id="expiration-month">
<input type="text" name="expirMonth" value="10" id="expirMonth" />
</div>
<label for="expiration-year">Expiration Year</label>
<div id="expiration-year">
<input type="text" name="expirYear" value="20" id="expirYear" />
</div>
<input type="submit" value="Pay" id="btn_submit"/>
</form>
<script>
var nonce0 ;
braintree.setup(clientToken, "custom",
{
id: "my-form",
hostedFields: {
number: {
selector: "#card-number"
},
cvv: {
selector: "#cvv"
},
expirationMonth: {
selector: "#expiration-month"
},
expirationYear: {
selector: "#expiration-year"
},
},
onPaymentMethodReceived:function(nonce){
console.log("in onPaymentMethodReceived");
console.log(nonce);
nonce0 = nonce;
alert('OnPaymentMR');
console.log(JSON.stringify(nonce));
return false;
},
onError :function(obj){
alert('onError');
console.log(JSON.stringify(obj));
}
});
console.log('BTree = '+ nonce0);
</script>
`
I wanted to store the nonce returned but nothing is happening, console.log is not showing any values. Even the onError is not doing anything either.
Using breakpoints,I can tell that the hidden nonce is coming back but the callback function is not getting fired.
I tried it with the Dropin-UI and it does work and I can get the nonce from the onPaymentMethodReceived.
Not sure what I am doing wrong.

Full disclosure: I work as a developer for Braintree
When using Hosted Fields, the form should only include a div container for each payment field. Your implementation would look something like this:
<form action="" id="my-form" method="post">
<label for="a">Amount</label>
<div id="amount"></div>
<label for="card-number">Card Number</label>
<div id="card-number"></div>
<label for="cvv">CVV</label>
<div id="cvv"></div>
<label for="expiration-month">Expiration Month</label>
<div id="expiration-month"></div>
<label for="expiration-year">Expiration Year</label>
<div id="expiration-year”></div>
<input type="submit" value="Pay" id="btn_submit"/>
</form>
The Braintree setup script will then render iframes to handle payment field inputs. If you continue to have issues, you can always get in touch with Braintree support.

In "onPaymentMethodReceived" method you need to try "nonce.nonce" var to check nonce in responce.
Like -
onPaymentMethodReceived:function(obj) {
var nonce_from_braintree = obj.nonce
}
Also you can check below link to get more detailed script to manipulate braintree payment gateway integration with hosted field.
http://www.ilovephp.net/php/simple-braintree-paypal-payment-gateway-integration-in-php-with-demo-examples/
Hope this helps you...:)

AngularJS validation on submit

I have a register form that I wish to do validation on the moment a user clicks submit. This is what the HTML looks like:
<form ng-submit="RegistrationC.fireReg()" novalidate name="register">
<div class="row">
<div class="col-md-6 form-group">
<input type="text" autocomplete="off" class="form-control" placeholder="First Name" ng-model="RegistrationC.first_name" required name="first_name">
<div class="help-block" ng-messages="register.first_name.$error" ng-show="submitted && register.first_name.$error">
<p ng-message="required">This field is required.</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group col-md-offset-3">
<button type="submit" class="btn btn-success btn-block" ng-click="submitted=true">Register Now</button>
</div>
</div>
</form>
It is showing the validation message if a username is not typed in, but it still submits. What am I missing?
EDIT 1
//init.js - RegistrationController
reg_list.fireReg = function () {
var url = 'user/register';
api.makeCall(reg_list, url)
.then(function (response) {
reg_list.response = response;
console.warn(response);
$location.path('/user/verify');
})
.catch(function (errorMessage) {
console.log("got an error in initial processing", errorMessage);
event.restoreButton();
});
};
I know there's issues in this function, I will fix them at a later stage.

Submit this form only if it is valid. <whatever_form_name>.$valid
<form ng-submit="register.$valid && RegistrationC.fireReg()" novalidate name="register">

Just add checkpoint whether form is valid or not before submitting form
Try like this
<form ng-submit="register.$valid && RegistrationC.fireReg()" novalidate name="register">

If you want to disable html5(or browser) validator, You have to remove 'required' attribute in your html code
http://www.the-art-of-web.com/html/html5-form-validation/
http://www.w3schools.com/tags/att_input_required.asp

The requested was not found on this server - Form validation (Apache/2.4.9 (Win32) PHP/5.5.12 Server at localhost Port 80)

I am trying to create a contact form page using PHP,JQuery, HTML5 and Bootstrap css.
PHP to send mails, JQuery to validate user input and Bootstrap css to highlight the input fields.
In my code i am able to validate the user input but when i click on submit button nothing happens.
In my HTML code when i replace form id from "id=contact-form" to form then i am able to send mails but validation not happen. Please tell me what i am doing wrong.
PHP Code-
<?php
$name= $_POST['name'];
$email= $_POST['email'];
$Message= $_POST['Message'];
$to=" s.nandan#niraame.com , shantanunandan8#gmail.com ";
$from="";
$subject="New query from customer ";
$body = "Customer name : $name\n\n";
$body .= "Customer Message : $Message\n\n";
$body .= "Customer email id : $email\n\n";
ini_set("SMTP","mail.niraame.com");
mail($to,$subject,$from,$body);
?>
HTML Code-
<form method="post" action="contact-form-submission.php" class="form-horizontal" id="contact-form">
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" name="name" id="name" placeholder="Your name">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email Address</label>
<div class="controls">
<input type="text" name="email" id="email" placeholder="Your email address">
</div>
</div>
<div class="control-group">
<label class="control-label" for="subject">Subject</label>
<div class="controls">
<select id="subject" name="subject">
<option value="na" selected="">Choose One:</option>
<option value="service">Feedback</option>
<option value="suggestions">Suggestion</option>
<option value="support">Question</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="message">Message</label>
<div class="controls">
<textarea name="message" id="message" rows="8" class="span5" placeholder="The message you want to send to us."></textarea>
</div>
</div>
<div class="form-actions">
<input type="hidden" name="save" value="contact">
<button type="submit" id="submit" class="btn btn-success">Submit Message</button>
<button type="reset" class="btn">Cancel</button>
</div>
</form>
JQuery Code-
$(window).load(function(){
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var contact = $("#contact").val();
$.post("contact-form-submission.php", {
name1: name,
email1: email,
mess age1: message,
contact1: contact
}, function(data) {
$("#returnmessage").append(data); // Append returned message to message paragraph.
if (data == "Your Query has been received, We will contact you soon.") {
$("#contact-form")[0].reset(); // To reset form fields on success.
}
});
$(document).ready(function () {
$('#contact-form').validate({
rules: {
name: {
minlength: 2,
required: true
},
email: {
required: true,
email: true
},
message: {
minlength: 2,
required: true
}
},
highlight: function (element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
}
});
});
});

As #jeroen mentioned, currently you are attempting to post the form on page load. Let's try an approach where you submit the form when a user clicks the submit button.
$(document).ready(function () {
// let's attach an event handler to the form's submission
$('#contact-form').submit(function(e) {
e.preventDefault(); // prevent the form from submitting normally, this allows us to interject your client side validation
// perform your validation
// if valid, post
// else show errors, etc
}
});
Also, keep in mind that it's best practice to perform validation both on the server AND the client. At the very least, ALWAYS on the server.