Question

Technologies:

javascript

Tolerim

25 days ago

What is the method for retrieving multiple values from checkboxes in Java Spring?

The author initially wrote code for a radio input, but has since modified it to include multiple values using checkboxes. The author is now seeking assistance on how to save these multiple values in their entity, and has researched using Javascript and an AJAX library. However, as the author is not very familiar with Javascript, they are looking for guidance on where to begin. Additionally, the author includes some Javascript code that checks that at least one checkbox is checked.

Answers(2)

Tolerim

25 days ago

To send the multiple checkbox values to your entity and save them in the Person object, you will need to add some JavaScript code to your existing code. You can use the FormData object in JavaScript to get the values of all the checked checkboxes and send them to your server-side code via an AJAX request. You can use vanilla JavaScript or a JavaScript library like jQuery to make the AJAX request. Here's an example of how you can modify your code to send the checkbox values to your server-side code:

<div class="form-group mt-3 interests">
    <label>Selecteer jouw interesses</label>
    <div class="mx-3 checkboxform">
        <input type="checkbox" id="Sport" name="interests" value="Sport" required>
        <label for="Sport">Sport</label>

        <input type="checkbox" id="Muziek" name="interests" value="Muziek" required>
        <label for="Muziek">Muziek</label>

        <input type="checkbox" id="Films" name="interests" value="Films" required>
        <label for="Films">Films</label>

        <input type="checkbox" id="Andere" name="interests" value="Andere" required>
        <label for="Andere">Andere</label>
    </div>
</div>

<script>
    const checkboxes = document.querySelectorAll('input[type="checkbox"][name="interests"]');
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', () => {
            if (checkbox.checked) {
                checkboxes.forEach(otherCheckbox => {
                    if (otherCheckbox !== checkbox) {
                        otherCheckbox.removeAttribute('required');
                    }
                });
            } else {
                checkboxes.forEach(otherCheckbox => {
                    otherCheckbox.setAttribute('required', '');
                });
            }
        });
    });

    function saveData() {
        const form = document.querySelector('form');
        const formData = new FormData(form);
        const httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = function() {
            if (httpRequest.readyState === 4 && httpRequest.status === 200) {
                alert('Data saved successfully!');
            }
        };
        httpRequest.open('POST', '/path/to/saveData', true);
        httpRequest.send(formData);
    }

    const submitButton = document.querySelector('#submit-button');
    submitButton.addEventListener('click', event => {
        event.preventDefault();
        saveData();
    });
</script>

In this example, we have added a new function saveData() that gets all the form data using the FormData object, creates an AJAX request, and sends the data to your server-side code via a POST request. You can modify the URL in the httpRequest.open() function to match your server-side endpoint. We have also added an event listener to the submit button that prevents the default form submission behavior and calls the saveData() function instead. This should give you a head start towards achieving your goal. Good luck!

Accepted Answer

It sounds like the author is trying to save multiple values in their entity using Javascript and an AJAX library. Here is an example of how to save data from an HTML table to a database using jQuery AJAX in ASP.Net MVC Razor. The jQuery ajax() method is used to perform an AJAX (asynchronous HTTP) request. All jQuery AJAX methods use the ajax() method. This method is mostly used for requests where the other methods cannot be used. Here is an example of how to insert or save multiple rows records to database using entity framework in ASP.Net MVC. I hope this helps! Let me know if you have any other questions.

Sources

jQuery ajax() Method - W3School Save (Insert) data from HTML Table to Database using jQuery AJAX in ASP ...Insert or save multiple rows records to database using entity framework ...javascript - AJAX Autosave functionality - Stack Overflow javascript - send multiple parameter using ajax and save data into ...