I'm trying to make an API call using the input from the user using HTML radio's.
While all the other imput fields are working, the radio field is giving me some trouble.
This is the Javascript
<script>
function get_details()
{
let passenger_no = document.getElementById('passengers').value;
let distance = document.getElementById('distance').value;
let active = document.getElementById('activity_id').value;
fetch('https://beta4.api.climatiq.io/estimate', {
method: 'POST',
headers: {
'Authorization': 'Bearer 7SFFXXXXSRJ63T8WZ2NADN0A',
'Content-Type': 'application/x-www-form-urlencoded'
},
body: `{\n\t"emission_factor": {\n\t\t"activity_id": ${active},\n\t\t"data_version": "^1"\n\t},\n\t"parameters": {\n\t\t"passengers": ${passenger_no},\n\t\t"distance": ${distance},\n\t\t"distance_unit": "km"\n\t}\n}`
})
.then(response => response.json())
.then(data => {
console.log(data);
});
}
</script>
And this is the html
<h2>Calculate Emissions</h2>
<p></p>
<div class="inputBox">
<input type="number" id="passengers">
<label>Enter Number of Passengers:</label>
</div>
<div class="inputBox">
<input type="number" id="distance">
<label>Enter Distancs in km:</label>
</div>
{%for i in q %}
<div class="form-check">
<input class="form-check-input" type="radio" id="activity_id" value="{{i.attributes}}">
<label class="form-check-label" for="inlineRadio1" style="color: whitesmoke;">{{i.name}}</label>
</div>
{%endfor%}
<p></p>
<button type="submit" onclick="get_details()" class="btn btn-success">Estimate</button>
I'm getting the following error
'Error parsing the request body. Your JSON syntax is invalid: expected value at line 3 column 18'
Can someone help me?