googleinterns/noms

Make Users Pick Our Supported Colleges

Closed this issue · 2 comments

Users are able to put in gibberish for colleges

image

Saw you opened this, I also ran into a similar issue on the homepage! If it's helpful, here's how I solved it:

/**
* When the user selects a college from the dropdown, we immediately
* navigate them to the appropriate college's page.
*/
function navigateUserToCollegePage() {
const collegeName = document.getElementById('colleges-input').value;
const option = document.querySelector(`#colleges option[value='${collegeName}']`);
// Only navigate to the page if that college exists in our list of colleges.
// TODO: display 'We haven't heard of that college!"/similar to the user if not recognized.
if (option) {
const collegeId = option.dataset.value;
window.location.href = `/find-events.html?collegeid=${collegeId}`;
}
}

It aborts navigation if the option picked is not in the list, forcing the user to backspace and pick a dropdown option :)

Saw you opened this, I also ran into a similar issue on the homepage! If it's helpful, here's how I solved it:

/**
* When the user selects a college from the dropdown, we immediately
* navigate them to the appropriate college's page.
*/
function navigateUserToCollegePage() {
const collegeName = document.getElementById('colleges-input').value;
const option = document.querySelector(`#colleges option[value='${collegeName}']`);
// Only navigate to the page if that college exists in our list of colleges.
// TODO: display 'We haven't heard of that college!"/similar to the user if not recognized.
if (option) {
const collegeId = option.dataset.value;
window.location.href = `/find-events.html?collegeid=${collegeId}`;
}
}

It aborts navigation if the option picked is not in the list, forcing the user to backspace and pick a dropdown option :)

Yes, I saw that; thank you for sending this over! However, with the sign up form, it'll trigger with or without the college exiting in the list because the submit aspect is attached to the HTML form that triggers a POST request when the form is submitted. Therefore, I need to take out the POST from the HTML and trigger the submit on the JavaScript side after it checks for the validness of the college!