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])
Related
I have the following form in my PHP file defined. I am planning to convert the form fields to JSON object so that I could pass it along to
a java webservice using Ajax maybe.
Here's how I was planning to serialize it :
function submitUsingjQuery(){
var formdata = $('#myForm').serializeArray()
}
Since I have three files upload options, is it possible to convert uploaded files to a JSON object as well along with other form fields?
If not, is there any other alternative to achieve this ?
<!-- Start of HTML Form -->
<form id = "myForm">
<div class="row" style="margin-bottom: 15px" name="infoRegAttachedDocuments" >
<div class="col-md-4">
<label for="docSubmission">First Document</label>
<input type="file" id="firstdoc">
</div>
<div class="col-md-4">
<label for="docApproval">Second Document</label>
<input type="file" id="seconddoc">
</div>
<div class="col-md-4">
<label for="additionalDocs">Third Document (if any)?</label>
<input type="file" id="thirdocs">
</div>
</div>
<div class="row" style="margin-bottom: 15px" name="infoDiv" >
<div class="col-md-6">
<label for="projectTitle">Title </label>
<input type="text" class="form-control" id="projectTitle" value="<?php echo $previousProjTitle;?>" >
</div>
<div class="col-md-6">
<label for="projectDesc">Description </label>
<input type="text" class="form-control" id="projectDesc" value="<?php echo $previousProjDesc;?>">
</div>
</div>
</form>
<!-- END of HTML Form -->
<div class="row"style="margin-top: 15px;" >
<button class="btn btn-primary" onclick="submitUsingjQuery()">Submit</button>
</div>
It is possible to convert those files to base64 encoded strings which can be sent to the server via ajax. Than you can end up with a JSON object like so:
{
"firstdoc": {
"name": "<some file name>",
"type": "image/jpg",
"data": "base62 encoded string"
}
}
But from the JS client and server side point of view it is much easier to use the new Form Data object and the fetch api, because it will take care of all the mime types an stuff. It can be used like so:
//create the data object directly from the form
var fd = new FormData(document.getElementById(''myform));
//send to the server without any conversion,
//everything is happening automatically
fetch('<url>', { body: fd, /*…some more options…*/ });
This way you don't have to bother yourself in finding a proper way to transmit files, since that way uses the »standard POST way« and if your server follows those standards, everything should work. Especially for files that is really helpful since this way the appropriate Content-Type header is set for each of the files to transmit.
It might be noteworthy here that this approach will create a request that is similar to the one which the browser would create if the would be submitted, the »plain html way«, without ajax. So in case JS is disabled or the browser too old, the form can still be processed on the serverside without any change on the code.
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'm creating a new website for my company using mobirise. The mobirise templates come with predesigned email forms that were created using formoid. When a user uses the email form to send an email the information is sent to formoid and then formoid sends the information to me at my email address. All of the coding in the email form is behind the scenes, so I can't actually see what it's doing.
On one of my forms I need to have the page redirect to another page where users will be able to upload a file to my server using another script. I have contacted mobirise to ask them if they could tell me how to redirect after the user clicks the submit button, but they said I had to contact formoid. So far I haven't gotten a response back from formoid so I thought I would try to look for a solution on my own.
I have tried adding javascript code to the coding on the page, but as I said, most of the coding of the form is somewhere behind the scenes and I can't figure out exactly which coding is performing the form's submit action.
What I was hoping for is a suggestion about how I could add some additional JavaScript coding that would watch for the submit button in the form being clicked and then redirect the page. I'm not positive this is even possible, but I figured that if anyone would be helpful it would be the people who post solutions here. I'm rather new to JavaScript, so I'm not sure where to start and I don't want to experiment for hours and hours and get frustrated because nothing is working.
So, if anyone can give me an idea here I would greatly appreciate it. Below is the coding for the form in case it helps:
<div data-form-alert="true">
<div hidden="" data-form-alert-success="true" class="alert alert-form alert-success text-xs-center">Thanks for uploading your audio file!</div>
</div>
<form action="https://mobirise.com/" method="post" data-form-title="FTP Upload">
<input type="hidden" value="NTcF3QgiRzQHgm5xv+UnYlBBGPR27Q6NZwj5EPuecwUNxuL8vndMlaaoM2PpzlkXlNaFBrtr2mU+CfZxfef01mKMpaQkezUMhyWXZgieem0/pt/V/nU0iUetLNqsEpj7" data-form-email="true">
<div class="row row-sm-offset">
<div class="col-xs-12 col-md-4">
<div class="form-group">
<label class="form-control-label" for="form1-3o-name">Name<span class="form-asterisk">*</span></label>
<input type="text" class="form-control" name="name" required="" data-form-field="Name" id="form1-3o-name">
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="form-group">
<label class="form-control-label" for="form1-3o-email">Email<span class="form-asterisk">*</span></label>
<input type="email" class="form-control" name="email" required="" data-form-field="Email" id="form1-3o-email">
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="form-group">
<label class="form-control-label" for="form1-3o-phone">Phone</label>
<input type="tel" class="form-control" name="phone" data-form-field="Phone" id="form1-3o-phone">
</div>
</div>
</div>
<div class="form-group">
<label class="form-control-label" for="form1-3o-message">One or more files are being uploaded to the WORDsmart server. </label>
<textarea class="form-control" name="message" rows="7" data-form-field="Message" id="form1-3o-message"></textarea>
</div>
<div><button type="submit" class="btn btn-info">CONTACT US</button></div>
</form>
in this case, I would recommend you to use another form. As far as I know form wouldn't work if you would bring any changes to form of Mobirise. Just use another form creator and implement it manually to Mobirise's project after publication to the local folder (the project of Mobirise).
You can read tutorial about publishing here: https://mobirise.com/help/local-host-369.html
Just change the action field in the first line of the form, to the page were you would like to send the data.
The next hidden input line with the public key may be deleted also.
This question already has answers here:
How can I send an email using PHP?
(20 answers)
Closed 6 years ago.
This is the HTML contact form I created and I have been trying to get the PHP code that will make it work however I am not sure the best way to handle this. I have read through other questions and answers where they use separate files I am not an expert in PHP but I can assume the two files must be linked by name this is the HTML form I have:
<section class="our-contacts slideanim" id="contact">
<h3 class="text-center slideanim">Contact Us</h3>
<p class="text-center slideanim">Got a project in mind? Shoot as an email below!</p>
<div class="container">
<div class="row">
<div class="col-lg-12">
<form role="form">
<div class="row">
<div class="form-group col-lg-4 slideanim">
<input type="text" name="name" class="form-control user-name" placeholder="Your Name" required/>
</div>
<div class="form-group col-lg-4 slideanim">
<input type="email" name="email" class="form-control mail" placeholder="Your Email" required/>
</div>
<div class="form-group col-lg-4 slideanim">
<input type="tel" class="form-control pno" placeholder="Your Phone Number" required/>
</div>
<div class="clearfix"></div>
<div class="form-group col-lg-12 slideanim">
<textarea name="message" class="form-control" rows="6" placeholder="Your Message" required/> </textarea>
</div>
<div class="form-group col-lg-12 slideanim">
<button type="submit" href="#" class="btn-outline1">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
The form tag needs to have an action and a method attribute, like this:
<form role="form" method="post" action="path/to/file.php">
The method will normally be post (you can look up the difference between post and get if you like). The action is the path to the php file that will process the data.
In the php file you can access the data through the $_POST global variable which will be an array containing each of the inputs eg $_POST['tel'] will be the telephone number field from your form.
Then you need to send the email. You can try one of the implementations in the php manual (http://php.net/manual/en/refs.remote.mail.php) or you could try using a 3rd party service like mail gun.
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.