Having an issue with my form, trying to submit a website address/keyword and a selected filter. Filters are updated from database so that's why only one option is shown

<div >
            <span >&times;</span>
            <h2>Add website or keyword</h2>
            <form method="post" action="/newWebsite" id="new-website-form">
                <label for="website-input">Website address or keyword</label>
                <input type="text" id="website-input" name="website" placeholder="Address or keyword">
    
                <label for="filter-select">Filter</label>
                <select id="filter-select" name="filter">
                    <option value='null'>Select a filter</option>
                </select>
                <button type="submit" id="submit-website-add">Save</button>
                <button type="button" id="close-website-add">Cancel</button>
            </form>
            
</div>

Here is the express js post function I've written

app.post('/newWebsite', function (req, res, err) {
  if (err) {
    console.log(err);
  }
    db.newWebsite(req.body.website, req.body.filter)
    res.redirect('/blocking.html')
})

Here's how the options are added to the select tag, although I've tried adding them manually and it doesn't make a difference sadly.

// Load Filters onto webpage from DB
async function loadFilters() {
  const filterFetch = await fetchFilters();
  const ul = document.getElementById('filter-list');

  for (const i of filterFetch) {
    const li = document.createElement('li');
    li.appendChild(document.createTextNode(i));
    ul.appendChild(li);

    // Add to 'add website modal' select option
    const newOption = document.createElement('option');
    newOption.value = i;
    newOption.text = i;
    filterSelect.add(newOption, null);
  }
}

// Function to return list of filters
async function fetchFilters() {
  let filterFetch = await fetch('/filters');
  if (filterFetch.ok) {
    filterFetch = await filterFetch.json();
  } else {
    console.log('filterFetch failed');
    filterFetch = undefined;
  }

  return filterFetch;
}

which is linked to the following code in server and then queried. This is all working fine. It's just the method='post' from the form that is causing issues.

app.get('/filters', asyncWrap(getFiltersJson));

The console.log(err) returns the following in the terminal:

[Function: next]

EDIT

Few more details, the form is accessible from inside my index.js file and logs in browser fine with the following

const saveWebsite = document.getElementById('submit-website-add');
const cancelWebsite = document.getElementById('close-website-add');
const filterSelect = document.getElementById('filter-select');
const websiteInput = document.getElementById('website-input');

saveWebsite.onclick = () => {
  const websiteInputted = websiteInput.value;
  const filterSelected = filterSelect.value;

  // Add database push
  console.log(filterSelected);
  console.log(websiteInputted);
  console.log(filterSelect.selectedIndex);

  websiteModal[0].style.display = 'none'; // Close modal on save

  websiteInput.value = '';
  filterSelect.value = 'null';
};

CodePudding user response：

So in this code you should try like this, according to their documentation here

app.post('/newWebsite', function (req, res, next) {
  try {
    db.newWebsite(req.body.website, req.body.filter)
    res.redirect('/blocking.html')
  }catch(err){
    console.log(err);
  }
})

You must use next in parameters of callback, even though you don't make a use of it (or don't use anything and simply mention only req and res, but it's a good practice to put it everytime. And you can handle the error in that try-catch block

CodePudding user response：

Turned out to be a issue with the INSERT command. Thanks everyone for your help, painful one that!