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.

Call Javascript function after submit a form and refresh page

I have an onepage website with a form that submits user data by mail using PHP. When the user click on Submit, I need to open an overlay that contains a success message. The problem is that, when the form is submitted and the page refreshed, my overlay automatically desappear and the user does not have the necessary time to close it by himself. Could you help me with this topic?
Thank you!
Here is my form:
<form id="contact-us" method="post" action="#" >
<div class="col-xs-6 wow animated slideInLeft" data-wow-delay=".5s">
<!-- Name -->
<input type="text" name="name" id="name" required class="form" placeholder="Nombre" />
<!-- Email -->
<input type="email" name="mail" id="mail" required class="form" placeholder="E-mail" />
<!-- Subject -->
<input type="text" name="subject" id="subject" required class="form" placeholder="Asunto" />
</div><!-- End Left Inputs -->
<!-- Right Inputs -->
<div class="col-xs-6 wow animated slideInRight" data-wow-delay=".5s">
<!-- Message -->
<textarea name="message" id="message" class="form textarea" required placeholder="Mensaje"></textarea>
</div><!-- End Right Inputs -->
<!-- Bottom Submit -->
<div class="relative fullwidth col-xs-12">
<!-- Send Button -->
<button type="submit" id="submit" name="submit" class="form-btn semibold" onclick="openNav14()">Enviar</button>
</div><!-- End Bottom Submit -->
<!-- Clear -->
<div class="clear"></div>
</form>
Here are my functions:
function openNav14() {
document.getElementById("myNav14").style.width = "100%";
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav14() {
document.getElementById("myNav14").style.width = "0%";
}

Angularjs ng-submit function is not working

I have a ng-template in my html view and there is a form inside the ng-template.So i need to submit form data through the form and i'm using ng-submit to do that.But when i click on submit button nothing happens.Other data binding works with text fields in the form using ng-model with my controller.Following is my html code.
<script type="text/ng-template" id="updatetemplate">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Update</h3>
</div>
<!-- /.box-header -->
<!-- form start -->
<form name="update_form" ng-submit="updateUser(ngDialogData.id, ngDialogData.currentname, ngDialogData.currentroleid)">
<div class="box-body">
<div class="form-group">
<input type="hidden" name="userid" ng-model="ngDialogData.id" class="form-control">
<label>Name</label>
<input type="text" class="form-control" name="name" ng- model="ngDialogData.currentname" placeholder="Enter name">
<p></p>
<label>User role</label>
<input type="text" class="form-control" name="roleid" ng-model="ngDialogData.currentroleid" placeholder="Enter name">
</select>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<button type="submit" class="btn btn-primary" name="updatebutton">Update</button>
</div>
</form>
</div>
<!-- /.box -->
</script>

Some code correction need to be made :
remove blank space from ng- model.
instead of passing each ng-model into the updateUser function. just pass the whole ngDialogData object.
There is one invalid </select> tag in the form. remove that.
Working fiddle : https://jsfiddle.net/d8ye0sbz/

How to validate radio buttons with a input field inside it?

So I have these radio buttons that a user can select and then I need a text input inside of it. How can I validate these inputs so that they are required to select a radio option, and if it is one of the first two, make sure they fill out the text inputs? I assume I need to use the jquery.validator.addMethod somehow, but i'm really lost on what I need to do. I'd really appreciate some help. Thanks so much!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="itemPricing" class="clearfix">
<div class="row">
<div class="col-sm-12" form-group>
<label for="itemPricing" class="required">Pricing</label>
<span id="helpBlock" class="help-block">Select how you want pricing to display on your website.</span>
</div>
<!-- Regular Price -->
<div class="col-sm-12 form-group">
<div class="form-inline radio-input-group">
<div class="radio">
<input type="radio" class="height-initial" name="pricingOptions" id="regularPrice" value="">
<label for="regularPrice" class="required">Regular Price</label>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control money" id="productPrice" name="productPrice">
</div>
</div>
<div class="form-inline radio-input-group">
<div class="radio">
<input type="radio" class="height-initial" name="pricingOptions" id="salePrice" value="">
<label for="salePrice" class="required">Sale Price</label>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control money" id="productPrice" name="productPrice">
</div>
</div>
<div class="form-inline radio-input-group">
<div class="radio">
<input type="radio" class="height-initial" name="pricingOptions" id="emailPrice" value="">
<label for="emailPrice" class="required">Email for Price</label>
</div>
</div>
</div>
</div>
</div>
<!-- end itemPricing -->
<button type="submit" class="btn btn-success save ladda-button" data-style="zoom-in">Save</button>

Yes, skipping server side validation is not an option, but you get a better user experience if you also validate on the client side too. Waiting for the round trip to the server before the user becomes aware of the problem is a sure way to piss the user off. The radio buttons can have onChange handlers that check to see if the button is selected and set the required status of the textbox accordingly.

How is user input submitted in bootstrap 3 form?

I'm using bootstrap 3, which includes jquery 1.11.2.min.js. I'm updating a search webpage with two textfields: keyword and city,state,zip. I have a script for the search results that needs to pull the user input that's typed into these two search textfields for finding the desired search results.
Visual explanation:
My search bar with placeholders and search button:
My search bar with my user input (searching for an engineering job in Boston):
In the HTML, there is no unique value (value="Engineer" or value="Boston") created for my engineering job in Boston search:
Without value="Engineer" and value="Boston" I cannot tell my script to display search results of engineering jobs in Boston. Where do I find/create this to pull into my search script?
Is this located in the bootstrap.js file anywhere? I'm having trouble figuring out where/how this form is pulling the user input value (without having to use value="" for each input).
Your help is much appreciated - my form is below.
<div id="somebanner" class="somebanner-bgsearch-red hero1 hidden-xs">
<div class="container-fluid">
<div class="top-section">
<div class="container">
<form class="form-inline no-margin center-block" action="http://www.somesite.com/unknown" method="POST" role="form">
<div class="row">
<center>
<fieldset>
<!-- Search input-->
<div class="form-group center-block">
<div class="col-sm-4">
<input id="keyword" name="keyword" type="search" placeholder="Keyword" class="form-control input-lg">
</div>
</div>
<!-- Search input-->
<div class="form-group center-block">
<div class="col-sm-4">
<input id="location" name="location" type="search" placeholder="City, State, or Zip Code" class="form-control input-lg">
</div>
</div>
<input type="hidden" name="unknown" value="unknown">
<!-- Button -->
<div class="form-group center-block">
<div class="col-sm-2">
<button type="submit" id="btn-search" name="btn-search" class="btn btn-primary btn-lg btn-tusaj">Search</button>
</div>
</div>
</center>
</fieldset>
</div>
</form>
</div>
</div>
</div>
</div>
Here's the link to the bootstrap.js code: http://getbootstrap.com/dist/js/bootstrap.js
Herer's the link to the jquery code:
https://code.jquery.com/jquery-1.11.2.js

You're trying to use Bootstrap for modifying HTML, but Bootstrap is a CSS framework used for responsive design. It's incapable of doing such HTML modification. You need to use jQuery:
$(document).ready(function(){
$("#btn-search").click(function(e){
e.preventDefault();
var x = $("#keyword").val();
var y = $("#location").val();
$("#keyword").attr("value", x);
$("#location").attr("value", y);
});
});
That should do the work. If you have further questions, let me know in the comments.