I have a form in my project and when it is submitted I need to send the data to an API and receive the response to check if there's an errors
the html
<form id="contactForm" class="w-75 mx-auto">
<input type="text" class="form-control bg-transparent" placeholder="Name">
<input type="email" class="form-control bg-transparent my-3" placeholder="E-mail">
<textarea class="form-control bg-transparent" placeholder="Your Message"></textarea>
<button type="submit" class="my-3 px-4 py-2 rounded-3">SEND</button>
</form>
the js
$('#contactForm').submit(function (e) {
e.preventDefault();
});
CodePudding user response:
This should work. Make sure URL for API and web should be the same else you could get cross site error:
<form id="contactForm" class="w-75 mx-auto" action="http://yourAPI.com">
<input type="text" class="form-control bg-transparent" placeholder="Name">
<input type="email" class="form-control bg-transparent my-3" placeholder="E-mail">
<textarea class="form-control bg-transparent" placeholder="Your Message"></textarea>
<button type="submit" class="my-3 px-4 py-2 rounded-3">SEND</button>
</form>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
$('#contactForm').submit(function (e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show server response
}
});
});
</script>
CodePudding user response:
You can use fetch
api and the POST
method to send data to an api.
Since you have not provided how your api works or how the data is to be passed I cannot provide further help, but i can guide you to the correct path.
Read more about fetch api in javascript
(async function () {
const url = ''; // your api endpoint here
const res = await fetch(url, { method: 'POST' });
// res corresponds to the api response;
})();
Since you're using jQuery, you should probably read jQuery post method
CodePudding user response:
$("#contactForm").submit( async (e) => {
e.preventDefault();
const data = {
name: e.target.elements[0].value,
email: e.target.elements[1].value,
message: e.target.elements[2].value,
}
const response = await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, *cors, same-origin
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
},
redirect: 'follow', // manual, *follow, error
referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-
downgrade, origin, origin-when-cross-origin, same-origin, strict-
origin, strict-origin-when-cross-origin, unsafe-url
body: JSON.stringify(data) // body data type must match "Content-Type" header
});
})