I have a HTML form that send a request to API with AJAX. But i would not leave the api key in the JS file. So, i thinked to do a PHP wrapper but i'm at start and i don't know how can i do. Can you give me some exemples for understand this process?
I have this form that redirect to the url:
<form action="www.mysite.com/subscribe" method="POST" accept-charset="utf-8" id="signup-form" name="signup-form">
<div class="form-group">
<input type="text" class="form-control" name="name" id="name" placeholder="Nome"/>
</div>
<div class="form-group">
<input type="text" class="form-control" name="cognome" id="cognome" placeholder="Cognome"/>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Email"//>
</div>
<?php include('countries.php'); ?>
<div class="form-group">
<select class="form-control" id="list" name="list">
<option value="" disabled="disabled">Seleziona un interesse</option>
<option value="aVD3PdrkiaVJhVU9yN9nMQ">lista 3</option>
<option value="spd7cktddsPGTgoDuu892f763Q">lista 2</option>
<option value="yCQHvcGxKvBFTeoSp892UxZA">lista 1</option>
</select>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" name="gdpr" id="gdpr" >
<label class="form-check-label" for="gdpr">Accetta il gdpr</label>
</div>
<input type="submit" value="Sign up" id="submit-btn"/>
<p id="status"></p>
</form>
And my JS file with AJAX call (Miss some elements)
$(document).ready(function() {
$("#signup-form").submit(function(e) {
console.log('submitting');
e.preventDefault();
var $form = $(this),
url = $form.attr('action');
url = 'https://sendy.exnovostudio.eu/subscribe';
var e = document.getElementById("list");
var list = e.value;
params = {
name: $form.find('input[name="name"]').val(),
email: $form.find('input[name="email"]').val(),
list: list,
api_key: <---I WANT HIDE THIS BUT IT DOESN T WORK IF I DELETE
gdpr : gdpr,
boolean: true
}
window.message = function(text, color){
$("#status").css("color", color).text(text);
}
$form.find('input').attr("disabled", "disabled");
message('iscrizione in corso...', 'blue');
What is the best practice to share the api key in the AJAX call?