How to submit a HTML checklist form and get the checked data in a json file upon form submission wit-CodePudding

I am building an application that uses Python Flask. There is an HTML form that looks like this:

<form method="POST" action="/route_name">
<p>No Annotation<input type="checkbox" value="No annotation" name="mycheckbox" ></p>
<p>Connector<input type="checkbox" value="connector" name="mycheckbox"></p>
<p>Enclosure<input type="checkbox" value="enclosure" name="mycheckbox"></p>
<p>Text<input type="checkbox" value="text" name="mycheckbox"></p>
<input type="submit" value="Submit">

How do I get the checked data in a json file upon the form submission without reloading the page?

CodePudding user response：

Attach an event listener to the submit button that calls a JavaScript function when the button is clicked.

<form method="POST" action="/route_name">
  <p>No Annotation<input type="checkbox" value="No annotation" name="mycheckbox" ></p>
  <p>Connector<input type="checkbox" value="connector" name="mycheckbox"></p>
  <p>Enclosure<input type="checkbox" value="enclosure" name="mycheckbox"></p>
  <p>Text<input type="checkbox" value="text" name="mycheckbox"></p>
  <input type="submit" value="Submit" onclick="submitForm()">
</form>

<script>
  function submitForm() {
    // Get the checked data from the form
  }
</script>

submitForm function is called when the submit button is clicked. This function is where you can implement the logic to get the checked data from the form.

To get the checked data from the form, you can use the querySelectorAll method to select all the checkbox elements in the form then loop through them to get the checked values. Store the checked values in an array and convert the array to a JSON object using the JSON.stringify method.

function submitForm() {
  // Select all the checkbox elements in the form
  const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');

  // Create an array to store the checked values
  const checkedValues = [];

  // Loop through the checkboxes and get the checked values
  checkboxes.forEach(checkbox => {
    checkedValues.push(checkbox.value);
  });

  // Convert the array of checked values to a JSON object
  const checkedData = JSON.stringify(checkedValues);

  // Output the JSON object to the console
  console.log(checkedData);
}

querySelectorAll method is used to select all the checked checkbox elements in the form. The checked values are then added to the checkedValues array, and the array is converted to a JSON object using the JSON.stringify method. The JSON object is then output to the console, so you can see the data that was checked.

Once you have the checked data in a JSON object, you can use Ajax to send the data to your Flask route without reloading the page. To do this, you can use the XMLHttpRequest object to send a POST request to your route.

function submitForm() {
  // Select all the checkbox elements in the form
  const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');

  // Create an array to store the checked values
  const checked