I configure braintree.js like this:
braintree.setup(
brainTreeClientToken= 'token_from_server'
'dropin', {
container: 'brainTreeDropin',
form: 'checkout'
});
</script>
As i understand from the documentation of developers.braintree, you need to send a request param named 'payment_method_nonce' to your server, but it is not present in request. I don't see any js fault in browser console by the way.
Here is my form:
<form id="checkout" method="post"
th:action="....">
<div id="brainTreeDropin"></div>
<div >
<div class="form-group">
<label for="cardNumber">Credit Card Number</label>
<input data-braintree-name="number" ..other details.. "/>
</div>
<div class="form-group">
<label for="cardHolder">Name on Card</label>
<input data-braintree-name="cardholder_name" ..other details.. />
</div>
</div>
<div >
<div class="form-group">
<label for="cvc">Security Code(CVC)</label>
<input data-braintree-name="cvv" ..other details.. />
</div>
<div class="form-group">
<label for="expDate">Expiration Date</label>
<input data-braintree-name="expiration_date" ..other details.. />
</div>
</div>
</form>
Any idea of what's my fault?
I work at Braintree on the SDK Team.
The Drop-In integration requires a button or type=["submit"] element to be present within the form. I tried out your integration and was able to get a payment_method_nonce value sent to my server by adding in a <button>Pay</button> element. Try that out to see if that fixes your integration.
Also, just out of curiosity, is it your intent to have 2 credit card input methods inside of the same form? The Drop-In form contains the necessary fields for Credit Cards and you shouldn't need the data-braintree-name annotated inputs.
Related
I have a node/express app and I want to add an image upload to an order form.
I can get the html form to POST using the action link, but I also want my javascript file for this page to be able to take all the rest of the form data and send it to a different post route to create a database entry for the whole order.
Here is my HTML that works for sending the post and image, but reloads the page because of event default behaviour.
<form id="editOrderForm" method="POST" action="/uploadphoto" enctype='multipart/form-data' >
<div class="form-row">
<div class="form-group col-md-3">
<label for="orderWarranty">Warranty Type</label>
<input type="text" class="form-control" id="orderWarranty" placeholder="Warranty Type">
</div>
<div class="form-group col-md-3">
<label for="orderAppliance">Appliance</label>
<input type="text" class="form-control" id="orderAppliance" placeholder="Appliance">
</div>
<div class="form-group col-md-3">
<label for="orderBrand">Brand</label>
<input type="text" class="form-control" id="orderBrand" placeholder="Brand">
</div>
<div class="form-group col-md-3">
<label for="orderModel">Model</label>
<input type="text" id="orderModel" class="form-control" placeholder="">
</div>
</div>
<div class="modal-body mx-6" id="editOrderDiv">
<div class="col-md-3">
<label for="image-upload">Upload Image</label>
<input type="file" accept="image/*" id="imageupload" name="imageupload">
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<input type="submit" class="btn btn-primary" id="ordersubmit"></input>
</div>
</div>
</form>
What I need is for the below code to ALSO run after the form submits, to make another post.
If I try to post to my upload route from my js file it sends the post with a content-type of application/x-www-form-urlencoded instead of multipart/form-data no matter what I do, so multer doesnt accept it.
Is there a way to set the content-type before I send the request to the backend?
$("#editOrderForm").on("submit", function handleFormSubmit(event) {
event.preventDefault();
function submitOrder(Order) {
$.post("/api/orders/" + currentOrder.id, Order, function () {
getOrders(orderCategorySelect.val());
});
};
I don't really use jQuery, but I think you want to create a headers object in the call to $.post.
Check out the jquery docs, which also refers to the ajax settings.
From skimming the docs, it sounds like you need to create an Ajax request with the correct header in the settings, and then use that request to do the actual POST.
Something like:
let request = $.post({
"header" : "multipart/form-data"
})
request("/api/orders", [rest of code here])
The problem:
Working within a Saas environment that processes a form in a way that needs to be altered. It's software-as-a-service so unique changes system wide are not an option.
Attempted Solution:
Attempting to use Javascript which the system is adding to the header area of the page to change the value of a form ID so when the form is submitted it contains the altered value.
The Code:
HTML
<div class="form-group " data-field="how_to_apply">
<label class="form-label">How to Apply </label>
<div id="application-settings" class="form--move-left clearfix row">
<div class="form-group form-group__half">
<input id="via-email" name="ha" value="1" checked="checked" onclick="displayInput(false, 'how_to_apply_1');" type="radio" />
<label for="via-email" class="form-label">
By Email<br/>
</label>
<input value="systemapplied#emailaddress.com" class="form-control" name="how_to_apply" id="how_to_apply_1" type="email" />
</div>
<div class="form-group form-group__half">
<input id="via-site" name="ha" value="2" onclick="displayInput(false, 'how_to_apply_2');" type="radio" />
<label for="via-site" class="form-label">
By URL
</label>
<input value="" class="form-control" name="how_to_apply" id="how_to_apply_2" disabled="disabled" type="url" required placeholder="e.g. http://www.yourwebsite.com"/>
</div>
</div>
Attempting to change the email address assigned to how_to_apply_1 ID
Javascript Used
document.getElementById("how_to_apply_1").value = "new#emailaddress.com";
It is important to add that this works as expected in a CodePen area but does not on the live site so my assumption is that there is something over writing this someplace I am not seeing, or I need to use something else to force the change, I don't know. Any suggestions or help would be GREATLY appreciated
Thanks in advance...
You need to run your script when the DOM is ready. You can wrap your script in DOMContentLoaded event like this:
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("how_to_apply_1").value = "new#emailaddress.com";
});
I have form when user can add achievement.
So it looks like:
<form action="{{ action('SettingsController#addAchievementsSettings') }}" method="post" class="form-horizontal">
{{ csrf_field() }}
<div class="form-group">
<label class="col-lg-2 control-label">Date</label>
<div class="col-lg-6">
<input type="date" placeholder=" " id="date-achievement" name="date_achievement" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">What</label>
<div class="col-lg-6">
<input type="text" placeholder=" " id="what-achievement" name="what_achievement" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Description</label>
<div class="col-lg-10">
<textarea rows="10" cols="30" class="form-control" id="description_achievement" name="description_achievement"></textarea>
</div>
</div>
<button type="button" class="btn btn-warning">Add one more...</button>
<button type="submit" class="btn btn-success">Save</button>
I want to generate another form if somebody click Add one more. How can I reach this and how to add everything to database? Sorry guys for not more code but I do not have any idea
from your question it seems a proper video / tutorial would help you more than just the answer.
for generation I personally use laravelcollective/html.
a good site with lots of videos explaining almost everything in regards to laravel and building sites with it I recomment the laracasts site.
to learn how to build and process forms with laravel I suggest Laravel 5.4 from scratch
specifically for working with forms: Form request data and form validation
After creating your form and submitting your form , you have to validate your data then you will call your model to insert your date in database, i suggest you eloquent to handle database request if you are using laravel
I integrated nicEdit because it's very light unlike all the other ones that contain hundreds of kb's.
In Chrome it is however causing problems. It for example doesn't save the text into the textarea or make things bold. The problem can be observed at this website or see below code. Please don't provide a hack like one answerer did because that's not going to help anything.
I have disabled the editor for debugging purposes. You can enable it with your console through new nicEditor().panelInstance('comment');
<div class="rdd blog-item">
<h1><a id="blog-item-title" href="/b/asdfssadfadf">this ia test</a></h1>
<div class="blog-date">
Date posted: 2013-03-01
</div>
<div class="blog-message">
<p>
asdfasdfas
</p>
</div>
<div class="blog-keywords">
Keywords: dfsa sadfasd adfasf adfas
- jlk
</div>
<h4>0 Comments</h4>
<div class="blog-comment blog-new-comment">
<form id="new_comment" name="new_comment">
<div class="blog-comment-row">
<h4></h4>
<h4>Would you like to place a comment?</h4>
</div>
<div class="blog-comment-row">
<label for="comment">Comment</label>
<textarea name="comment" id="comment"></textarea>
</div>
<div class="blog-comment-row">
<label for="name">Name</label>
<input type="text" name="name" id="name" value="" title="Enter your name">
</div>
<div class="blog-comment-row">
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" title="Enter your email">
</div>
<div class="blog-comment-row">
<div class="blog-comment-cell">
</div>
<div class="blog-comment-cell">
<a class="blog-comment-submit blog-comment-button" href="">Submit</a><br/>
Your ip address is 220.245.93.218
</div>
</div>
</form>
</div>
</div>
The Bold problem is caused by CSS inheritance. In your css file remove rdd blog-item span{} and it will work. nicEdit does not save the contents automatically in the textarea. At form submission you therefore have to run: nicEditors.findEditor('comment').saveContent(); to save it
You can bind events on the editor and save it's contents when that event is fired.
When I run this code on your example page, it works for me (your server doesn't pickup the nicEditor HTML tags though):
var commentNicEditor = new nicEditor().panelInstance('comment');
commentNicEditor.addEvent("blur", function () {
commentNicEditor.instanceById('comment').saveContent();
});
Updated with jQuery-free solution based on official documentation.
I have this link and if you click submit without filling any of the fields you get three validations but i have no js files included so where is this coming from
Here is the all the HTML
<div class="content">
<div class="page row nobor">
<div class="three_col wide row">
<div class="title">
</div>
<div class="column">
<h2>email sign up</h2>
<div class="inner">
<form method="post" action="/signup_complete" id="signup_form">
<p>
stuff
</p>
<p class="row">
<label>First Name <span class="req">*</span></label>
<input type="text" id="first_name" name="first_name" required="true">
</p>
<p class="row">
<label>Last Name <span class="req">*</span></label>
<input type="text" id="last_name" name="last_name" required="true">
</p>
<p class="row">
<label>Email <span class="req">*</span></label>
<input type="text" message="Please provide your email address." required="true" value="" name="email">
</p>
<p class="row nopad nomarg"><input type="submit" value="submit" class="sub_fbut submit" name="submit"></p>
<div class="clear"></div>
</form>
</div>
</div>
</div>
</div>
Basically I need to add more validation to not allow less then 3 letters but i have no idea where this is coming from and how do i alter...ideas?
This is coming from the HTML5 browser capabilities. Meaning this validation only works on modern browsers that support validation attributes such as "required", check out some examples here.
If you want browser compliant validation i suggest this plug in. Just remember people can disable JS so if you have sensitive data validate it server-side.
Remove the required="true" from your <input> tags to get rid of that validation.
if you click submit without filling any of the fields you get three
validations but i have no js files included so where is this coming
from
It looks like you are using HTML5 forms code here.
It uses required="true" or required
HTML5 browsers are interpreting this correctly.
Read more: http://diveintohtml5.ep.io/forms.html#required
Basically I need to add more validation to not allow less then 3
letters but i have no idea where this is coming from and how do i
alter
If you need some simple validation, you could do something like this
$('#first_name').blur(function(){
if($(this).val().length < '3'){
alert('You must enter three characters');
}
});
Example: http://jsfiddle.net/jasongennaro/ZEjEq/
This is just an example. You could do something like this on submit().
Also, you should validate content on the server side, too. Just to be sure!