0

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?

  • What are the values extracted from the inputs? What is the final JSON string with the values inserted? – showdev Jun 22 '23 at 03:51
  • Maybe this has to do with `content-type` header, [What are the differences between application/json and application/x-www-form-urlencoded?](https://stackoverflow.com/questions/9870523/what-are-the-differences-between-application-json-and-application-x-www-form-url). – prasad_ Jun 22 '23 at 04:57
  • Thanks for replying so quickly ! – Alex Mathew Jun 22 '23 at 07:13

0 Answers0