here is my code to send JSON object using javascript and ajax

Question

so that sendJason function will run after press submit button to send data from inputs fields to server as a jason object

• input filed has many type (username, email,radio button, checkbox,textarea..)
• in case of text input, it is run perfectly
• the problem occurs in case of radio buttons and checkbox, it doesnot send the data as a jason format any help please? thanks in advance

javascript code:

function sendJSON(){ 
        
        let result = document.querySelector('.result'); 
        let aed_modifing = document.querySelector('#aed_modifing'); 
        let compliant_on_AED = document.querySelector('#compliant_on_AED');

        let frequency_per_month = document.querySelector('#frequency_per_month'); 
        let last_visit = document.querySelector('#last_visit'); 
        
        let last_visit_seizure = document.querySelector('#last_visit_seizure'); 
        let same_seizure_type = document.querySelector('#same_seizure_type'); 
        
        let triggering_factors = document.querySelector('#triggering_factors');

        // Creating a XHR object 
        let xhr = new XMLHttpRequest(); 
        let url = "submit.txt"; 
    
        // open a connection 
        xhr.open("POST", url, true); 

        // Set the request header i.e. which type of content you are sending 
        xhr.setRequestHeader("Content-Type", "application/json"); 

        // Create a state change callback 
        xhr.onreadystatechange = function () { 
            if (xhr.readyState === 4 && xhr.status === 200) { 

                // Print received data from server 
                result.innerHTML = this.responseText;
                console.log(this.responseText);


            } 
        }; 

        // Converting JSON data to string 
        var data = JSON.stringify({ "aed_modifing": aed_modifing.value, 
            "compliant_on_AED":compliant_on_AED.value ,
            "frequency_per_month" : frequency_per_month.value , "last_visit" : last_visit.value ,
            "last_visit_seizure" :last_visit_seizure.value , 
            "same_seizure_type":same_seizure_type.value,
            "triggering_factors":triggering_factors.value 

         }); 

        // Sending data with the request 
        xhr.send(data); 
}

Answer 1

Remember that value of radio button and checkboxes is actually the checked attribute which would be true if it selected and false if not. You should aim to check and send that data instead of using value .

This also implies the check-boxes to send data, you need to process it in your javascript and similarly for radio-button to know which of them are actually checked.

For radio button and checkboxes, the value attribute is not very useful in determining which boxes are checked or not.

More help:

1. W3Schools
2. MDN
3. StackOverflow