We Keep Coding

Braintree 'payment_method_nonce' returns empty

I'm fairly new to Braintree. Im integrating the DropIn UI in the Sandbox environment. The 'payment_method_nonce' is returning empty after I submit my form, which makes the transaction fail. The DropIn UI displays correctly in the specific div, and to make sure everything was working correctly I added in a place holder for the PaymentMethodNonce which was 'fake-valid-nonce', which made the transaction valid. I am stuck on why the Braintree server is not sending back a Nonce value.
I make an Ajax call to token.php to get the Client Token which enables the DropIn UI to render correctly.
Ajax call below:
<script>
$.ajax({
url: "/braintree/token.php",
type: "get",
dataType: "json",
success: function (data) {
braintree.setup(data, 'dropin', {container: 'dropin-container'});
);
</script>
This is token.php which generates the Client Token:
require ("braintree.php");
$clientToken = $gateway->clientToken()->generate();
echo json_encode($clientToken);
When I inspect the HTML, BrainTree shows a 'server-error-message' div, and it displays "There was an error processing your request. Try again." Other posts regarding this issue have mentioned that the way a HTML form can be set up and submitted can cause this issue.
Here is my Form:
<div class="container">
<div class="row flex-nowrap">
<div class="alpha-container col-12">
<div class="content-container">
<form id="infoForm" method="post" action="/congrats.php">
<div class="tab">
<h2>Pick a Time</h2>
<div>
<!-- Google Schedule API goes here -->
</div>
<div>
<h4>Distance:</h4>
<p></p>
<br>
<h4>Duration:</h4>
<p></p>
<h4>Estimate:</h4>
<p></p>
</div>
</div>
<div class="tab">
<h2>Contact Information</h2>
<div class="contact-form">
<div class="contact-block">
<label for="fullname"></label>
<input type="text" name="Data[fullname]" class="contact" placeholder="Full Name">
</div>
<div class="contact-block">
<label for="email"></label>
<input type="email" name="Data[email]" class="contact" placeholder="Email Address">
</div>
<div class="contact-block">
<label for="phonenumber"></label>
<input type="number" name="Data[phonenumber]" class="contact" placeholder="Phone Number">
</div>
</div>
</div>
<div class="tab">
<h2>Payment Information</h2>
<div class="payment-form">
<label for="firstName"></label>
<input type="text" placeholder="First Name" name="Data[first_name]">
<label for="lastName"></label>
<input type="text" placeholder="Last Name" name="Data[last_name]">
<div id="dropin-container"></div>
</div>
</div>
<!-- Next/Previous Buttons -->
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<!--Progress Bar -->
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
</div>
</div>
</div>
</div>
The form uses Javascript to hide the steps of the form and then adds a submit button then it has reached the last step. 'congrats.php' is where I'll be processing the transaction. I am including both jQuery and Braintree JS in my header.
Edit: My solution was found by editing my HTML form. The form above used javascript to add a submit button once on the last step of the form. My new form now just has a button tag with type=submit and now the 'payment_method_nonce' is being created. For whatever reason, the Braintree server was not receiving my payment information upon submit.

i want to display two popups, one for error message and other for success message

I'm new to modals, i want to submit a form and then show success popup if user form is validated else want to show error popup. Also my it should execute php file for sending the email to user in background.
So, far i'm successful in executing the php file in background and show the model when user clicks on submit button.
But i want the popup to show when the form is validated. Also i want to use type="submit" instead of type="button" for form submit.
Here's my code :
<!-- javascript code to execute php file -->
<script type="text/javascript">
function executePhp() {
$.post("sendmail.php");
return false;
}
</script>
<!-- javascript code ends -->
<form class="well" action="" method="">
<div class="form-group col-md-6">
<label for="inputPassword4">Full Name</label>
<input type="text" name="name" class="form-control" id="inputPassword4" placeholder="Enter Full Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Phone Number</label>
<input type="number" name="mobile" class="form-control" id="inputEmail4" placeholder="Enter Mobile Number">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Email</label>
<input type="email" name="email" class="form-control" id="inputPassword4" placeholder="Enter Your Email">
</div>
</div>
<button type="button" class="btn btn-primary" onclick="executePhp()" style="margin-left: 3%;"
data-toggle="modal" data-target="#myModal">Check</button>
</form>
<!-- Code for popup -->
<!-- Modal -->
<div class="modal fade mymodal" id="myModal" role="dialog">
<div class="modal-dialog mydialog">
<!-- Modal content-->
<div class="modal-content mycontent">
<div class="modal-header myheader">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Message</h3>
</div>
<div class="modal-body mybody">
<br>
<br>
<h3>Thanks for choosing</h3>
<h4>
Your details will arive by email.
Sit back, we'll get back to you soon.
</h4>
<br>
<br>
</div>
<div class="modal-footer myfooter">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Code for popup end-->
Thank you.

You can use Jquery to achieve this.
In you php you can have two variables before the validation like:
$popup_message = "";
$popup_message_color = "";
Now if the form is validated you can display the modal like this:
$popup_message = "login successfully.";
$popup_message_color = "success";
//Open Modal
echo "<script type='text/javascript'>
$(document).ready(function(){
$('#myModal').modal('show');
});
</script>";
In the modal body you can display the message and color.
<div class="modal-body">
<p class="text-<?php echo $popup_message_color; ?>"><?php echo $popup_message; ?></p>
</div>
The same would be done for if validation fails, just change your message and color to $popup_message_color = "danger";
Note If you are validation to another page then the modal should be in that page and you change the close buttons to a link to go back.
Also php script should come after you loaded the jquery.

After form submit redirect back to page and show a modal

I'll try to explain this as best as possible.
I have a form that on submit actions on email.php:
<form data-toggle="validator" role="form" method="POST" action="email.php">
<div class="row">
<!-- Full Name -->
<div class="form-group col-lg-4">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" name="inputName" id="inputName" required>
</div>
<!-- email -->
<div class="form-group col-lg-4">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" name="inputEmail" id="inputEmail" data-error="Incorrect Email Format" required>
</div>
<!-- phone number -->
<div class="form-group col-lg-4">
<label for="inputTel" class="control-label">Phone Number</label>
<input type="text" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" name="inputTel" id="inputTel" data-minlength="10" maxlength="15" class="form-control" placeholder="123-456-7890" data-error="(123)-456-7890 | 1234567890 | 123-456-7890">
</div>
<!-- message -->
<div class="form-group col-lg-12">
<label for="content" class="control-label">Message</label>
<textarea name="content" id="content" class="form-control" rows="6" data-minlength="5" data-error="Message Must be longer"></textarea>
</div>
<!-- button -->
<div class="form-group col-lg-12">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
After the form is successfully processed in email.php, I want it to go back to the page the form is located on and show the "thank you" modal I created
currently I have in email.php (after validation):
echo "<script>
$(window).load(function(){
$('#myModal').modal('show');
});
window.location.href="Websitename";
</script>";
This does not work. What happens is the page just gets redirected but does not display the modal.
Can anyone please provide me any assistance?

I think the problem is in
window.location.href="Websitename";
When browser see this line , she will automatically locate the browser which means new request immediately made.
Let me explain :
Your form send request to email.php -----> sends response as a javascript --> javascript request to "website name".
In order to correct this issue , you should put window.location.href inside timeout function and that timeout triggered after window.load .
Please check :
echo "<script>
function deferredFunction(){
window.location.href="Websitename";
}
$(window).load(function(){
$('#myModal').modal('show');
setTimeout(deferredFunction,5000);
});
</script>";
Hope Helps!!

Validate input text in bootstrap modal

I want to validate a form in a bootstrap modal without using any framework. It's actually a simple modal with only an input text and two buttons "Close" and "Send".
The user should type his/her name in the input box and click send. The form is the sent with the method post.
What I want to do is that, if the user doesn't enter anything in the input box of and clicks on the button "Send", the input box should have a red border circling it instead of the default blue border. Here's the code for my modal:
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!--form-->
<form class = "form-horizontal" id="myForm" method="post" action="test.php" role="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">My modal</h4>
</div>
<div class="modal-body">
<p>
Please enter your name:
</p>
<br/>
<div class="form-group">
<div class="col-lg-12">
<label class="control-label" for="firstname">Name</label>
<input type="text" class="form-control required" id="firstname" name="firstname">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="myFormSubmit" class="btn btn-primary">Send</button>
</div>
</form>
</div>
</div>
</div>
I tried using javascript to change the class of the input text to has-errorbut it doesn't produce the red outline. When I click on send it sends the empty value through the post method instead of
Here's my javascript code:
<script type="text/javascript">
$('#myForm').validate({
rules: {
name: {
minlength: 1,
required: true
},
},
highlight: function (element) {
$('#firstname').removeClass('has-success').addClass('has-error');
},
success: function (element) {
$('#firstname').removeClass('has-error').addClass('has-success');
}
});
</script>
I feel like I'm mixing a whole lot of things here. I'm still new to bootstrap and javascript. How can I go about getting the desired red outline?
Thanks.
Edit:
Validate function:
function validate() {
var x = document.forms["myForm"]["firstname"].value;
if (x == null || x == "") {
return false;
}
}

You need to change the CSS classes of the input parent element div.form-group, not the input itself:
The HTML after the submit button click should look like this:
<div class="form-group has-error">
<div class="col-lg-12">
<label class="control-label" for="firstname">Name</label>
<input type="text" class="form-control required" id="firstname" name="firstname">
</div>
</div>
To achieve this, alter your JavaScript code to this:
<script type="text/javascript">
$('#myForm').on('submit', function(e) {
var firstName = $('#firstname');
// Check if there is an entered value
if(!firstName.val()) {
// Add errors highlight
firstName.closest('.form-group').removeClass('has-success').addClass('has-error');
// Stop submission of the form
e.preventDefault();
} else {
// Remove the errors highlight
firstName.closest('.form-group').removeClass('has-error').addClass('has-success');
}
});
</script>

div in boot strap...
<div class="form-group">
<div class="row">
<label class="col-xs-2 col-sm-2 control-label">city:</label>
<div class="col-xs-3 col-sm-3 formGroups"
id="city_form1">
<form:input name="city" class="form-control"
placeholder="City" data-toggle="tooltip"
data-placement="bottom" title="City" maxlength="15" />
<small class="help-block col-sm-offset-0 col-sm-9"
style="display: none;">city must require</small>
</div>
</div>
</div>
as you see there is .help-block is display: none now you write javascript function and check validation and if validation now pass make it display: block ... that's way you can do
enjoy with boot strap :)

its very easy
just apply class .has-error to div by javascript function
<div class="form-group has-error">
<div class="row">
<label class="col-xs-2 col-sm-2 control-label">city:</label>
<div class="col-xs-3 col-sm-3 formGroups"
id="city_form1">
<form:input name="city" class="form-control"
placeholder="City" data-toggle="tooltip"
data-placement="bottom" title="City" maxlength="15" />
</div>
</div>
</div>

Just use required inside the input field like this
<input type="text" class="form-control required" id="firstname" name="firstname" required/>

Open a bootstrap success dialog on submit button click

As a dummy notification, I want a success dialog to pop up on button click of my submit button. I've used a script found here on SO but for some reason, it still doesn't work. I've already tried declaring the script as function myFunction() and calling it in the action="myFunction() but it still didn't work.
My html:
<!-- HTML of contact form -->
<section id="contact">
<div class="inner">
<h2>Drop me a line. <i class="title_line"></i> </h2>
<p class="lead"> Don't hesitate to send me an email.<br>
I’d love to hear from you! </p>
<div class="row">
<div class="col1">
<form name="htmlform" method="post" action="" dir="ltr" lang="en" class="">
<label>Name<span class="required">*</span></label>
<input type="text" name="first_name" placeholder="Your Name" required>
<label>Email<span class="required">*</span></label>
<input type="email" name="email" placeholder="E-Mail" required>
<label>Message<span class="required">*</span></label>
<textarea name="comments" cols="1" rows="5" placeholder="Tell me everything" required></textarea>
<button name="send" id="emailsend" type="submit" lang="en" class="submit">Send</button>
</form>
<div id="le-alert" class="alert alert-success fade">
<button href="#" type="button" class="close">×</button>
<h4>Alert title</h4>
<p>Roses are red, violets are blue...</p>
</div>
</div>
<div class="col2">
<h4>Meet Me</h4>
<br>
<p>1234 SE 42nd St.</p>
<p>Mercer Island, WA </p>
<p>USA </p>
<h4>My Email</h4>
<br>
<p>vik.yaban#gmail.com</p>
<h4>Employement</h4>
<br>
<p>vik.yaban#gmail.com</p>
</div>
</div>
</div>
<div id="success-alert" class="alert alert-success fade">
<button class="close" type="button" data-dismiss="alert"></button>
<h4 class="alert-heading">Success!</h4>
<p>Email Sent!</p>
</div>
</section>
<!-- End Contact Form -->
<!-- Javascript to make the dialog -->
<script type="text/javascript">$('#emailsend').click(function () {
$('#success-alert').addClass('in'); // shows alert with Bootstrap CSS3 implementation
});
$('.close').click(function () {
$(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implementation
});</script>
<!-- End Javascript -->

you can try your jquery code in document.ready function.
$(document).ready(function(){
$('#emailsend').click(function () {
$('#success-alert').addClass('in'); // shows alert with Bootstrap CSS3 implementation
});
$('.close').click(function () {
$(this).parent().removeClass('in'); // hides alert with Bootstrap CSS3 implementation
});
})