I’m working on a web application that needs to compare user inputs without any backend database. The idea is pretty simple but I’m stuck on the implementation.
What I want to do is create three input fields. When someone types a name in the first field and another name in the second field, the third field should automatically show “MATCH” if both people are from the same region, or “NO MATCH” if they’re from different regions.
For example, if first input has “Mike” and second input has “Sarah”, then third field shows “MATCH” since both are East. But if first input is “Mike” and second is “Tom”, it should show “NO MATCH” because East and West are different.
How can I set this up using just HTML and JavaScript without needing MySQL or any server-side database?
Use the oninput event handler directly in your HTML inputs. Set up three inputs where the first two trigger a comparison function when changed. In that function, check if both names exist in your locations object first - stops errors when someone’s typing a partial name. Then compare the values and update the third input. I clear the result field whenever either input changes, then only show results when both inputs have valid names from your data. Keeps everything client-side and responsive without any external dependencies.
Set up a validation function that triggers when either input field changes. Build your HTML with three inputs, then add keyup or input events to the first two fields. In your comparison function, check that both names exist in your locations object first - this stops undefined errors when users enter invalid names. Only run the comparison if both names are valid. Trust me, using locations.hasOwnProperty(name1) && locations.hasOwnProperty(name2) before comparing saves tons of debugging time. Start with the third field empty, then fill it with your match result after validation passes.
For your location comparison tool, add event listeners to both input fields. When someone types a name, grab both values and look them up in your locations object. If the regions match, show “MATCH” - if not, show “NO MATCH”. Don’t forget to handle missing names and use toLowerCase() so case doesn’t matter. I’d also throw in a small setTimeout delay - it makes the updates feel less jumpy when people are typing.
so easy! just make your input fields fire a check when they change. use if(locations[name1] === locations[name2]) for comparison. set third field based on that. also, handle errors for missing names, or itll crash on bad input!
I built something similar for a team matching project recently. What worked well was creating a debounced approach - instead of checking every keystroke, I added a small delay using clearTimeout and setTimeout. This prevents excessive lookups while users are typing. Also trim whitespace from inputs since people often add extra spaces accidentally. One thing others haven’t mentioned is handling case sensitivity - I found using .trim().toLowerCase() on both inputs before lookup prevents most user input issues. The key is making sure your comparison logic runs cleanly without throwing errors when someone types halfway through a name.