Ok got an idea:
resolved by deleting local php/ajax form, create an iframe on my html page that point to a web-server where I host the entire working form (html,js,php) precedently deleted from the extension local files.
Hope it will help someone.
Any other solutions appreciated
I’m currently trying to develop my first chrome extension based on a web app that I have already on another server as website.
Everything works fine except a section with an ajax form which sends Infos to a PHP file that sends mail. (simple contact form using ajax to display success message instead of changing or reloading my page)
i know that our browser can’t even execute PHP since it’s a Server-side language so is there a way to make that form functional? (and that give the same result as on a webserver?
Clearly I’m looking for a form that can work on a chrome extension and send email to the desired address that will display a success message at submit (no reload or new page)
(Extension is not mail-based, its a cryptocurrency wallet. There’s just a contact form with 1 input at the bottom.)
php:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$mail_to = "[email protected]";
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
if ( empty($email)) {
http_response_code(400);
echo "Please complete the form and try again.";
exit;
}
# Mail Content
$content .= "New token demandnn";
$content .= "Email: $emailnn";
# email headers.
$headers = "From: New user";
$success = mail($mail_to, $subject, $content, $headers);
if ($success) {
http_response_code(200);
echo "Thank You! Your message has been sent.";
} else {
http_response_code(500);
echo "Oops! Something went wrong, we couldn't send your message.";
}
} else {
http_response_code(403);
echo "There was a problem with your submission, please try again.";
}
?>
jquery (.js)
(function ($) {
'use strict';
var form = $('.contact__form'),
message = $('.contact__msg'),
form_data;
// Success function
function done_func(response) {
message.fadeIn().removeClass('alert-danger').addClass('alert-success');
message.text(response);
setTimeout(function () {
message.fadeOut();
}, 2000);
form.find('input:not([type="submit"]), textarea').val('');
}
// fail function
function fail_func(data) {
message.fadeIn().removeClass('alert-success').addClass('alert-success');
message.text(data.responseText);
setTimeout(function () {
message.fadeOut();
}, 2000);
}
form.submit(function (e) {
e.preventDefault();
form_data = $(this).serialize();
$.ajax({
type: 'POST',
url: form.attr('action'),
data: form_data
})
.done(done_func)
.fail(fail_func);
});
})(jQuery);
form (html)
<form novalidate="" class="contact__form" method="post" action="mailnews.php">
<!-- form message -->
<div class="row">
<div class="col-12">
<div class="alert contact__msg alert-success"
style="display: none;" role="alert">Thanks </div>
</div>
</div>
<!-- end message -->
<!-- form element -->
<div class="row">
<div class="col-md-6 form-group" style="">
<input name="email" type="email" class="form-control"
placeholder="Wallet Address" required="" style="">
</div>
<div class="col-12" style="">
<input name="submit" type="submit" class="btn btn success" value="Get tokens">
</div>
</div>
<!-- end form element -->
</form>
Here’s what I get on chrome extension when submitting

@SimoneRossaini Thanks but if i understand this is for extension created to intteract with mail or get special data. To be clear, my extension is a cryptocurrency wallet where at the bottom, there’s a form with one input to collect wallet address from usr. -> in order to send free token to those who want
as a said, its a simple contact form.i Will look deeper into ur link.
No, you’ll need to rewrite the page from PHP to JavaScript.