Tips for showing personalized results depending on the contents of specific fields

In order to determine eligibility for posted files, I am working on creating a pop-up modal where users can enter their regional school code in a text or number field.

For example, if the code entered is 11002, the user should receive a recommended message, otherwise they will receive an apology message. Additionally, I want to include a button that allows users to enter a new code if the previous one was not accepted. All of this functionality should be integrated on the same page.

Currently, my code displays the result in a field, but I would like it to appear in a span as plain text instead.

<style>
#result {
  width: 100%;
}
#btn1 {
  float: right;
}
</style>

<script>
function locationlookup() {
  var result = document.getElementById("areacode").value;
  var schooling;
  if (result == 11002) {
    schooling = "Great! Your school is eligible for this course";
  } else if (result == 11003) {
    schooling = "Great! Your school is eligible for this course";
  } else if (result == 11004) {
    schooling = "Your school is eligible but you need good conduct certificate";
  } else {
    schooling = "Sorry. we currently do not serve in your entered location";
  }
  document.getElementById("result").value = schooling;
}
</script>

  <table  align="center">
      <tr>
        <th>School Area code: <input type="text" name="areacode" id="areacode" >
          <button onclick="locationlookup()" id="btn1">Lookup</button>
        </th>
    </tr>
    <tr>
      <th>
        <input type="text" name="result" id="result" readonly></th>
        <!-- I wish to change the above field to a span so no limitations. but stuff don't 
work for me -->
    </tr>
</table>

Answer №1

Here is a possible solution:

const input = document.querySelector("#areacode")
const span = document.querySelector("#result")
const btn = document.querySelector("#btnTryAgain")

function locationSearch() {
  const result = input.value;
  let schooling;
  let results = [11002, 11003, 11004]
  if (results.includes(Number(result))) { 
    schooling = "Great! Your school is eligible for this course" 
  } else {
    schooling = "Sorry. we currently do not serve in your entered location"
    btn.classList.toggle('hideBtn')
  }
  span.innerText = schooling;
}

function tryLocation() {
  input.value = ''
  span.innerText = '';
  btn.classList.toggle('hideBtn')
  input.focus()
}
#result {
  width: 100%;
}
#btn1 {
  float: right;
}
.hideBtn {
  display: none;
}
<table align="center">
  <tr>
    <th>School Area code: <input type="text" name="areacode" id="areacode" >
      <button onclick="locationSearch()" id="btn1">Search</button>
    </th>
  </tr>
  <tr>
    <th>
      <span id="result"></span>
      <button onclick="tryLocation()" id="btnTryAgain" class="hideBtn btn">Try again</button>
    </th>
  </tr>
</table>

Answer №2

I have come across a workaround for the issue at hand that seems quite practical, but I am eager to see if Nikola's solution will work better. Here is the code snippet.

function openForm() {
  document.getElementById("myForm").style.display = "block";
}

function closeForm() {
  document.getElementById("myForm").style.display = "none";
}
function locationlookup() {
    var result = document.getElementById("areacode").value;
    var locality;
    if (result == 11002) {
        locality = "Great! Your school is eligible for this course";
    } else if (result == 11003) {
        locality = "Great! Your school is eligible for this course";
    } else if (result == 11004) {
        locality = "Your school is eligible but you need good conduct certificate and more whatever text for the coding";
    } else {
        locality = "Sorry. we currently do not serve in your entered location";
    }


    const el = document.querySelector('div[contenteditable]');
    el.addEventListener('input', () => console.log(el.textContent));
    el.textContent = locality;
}
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: black;
  color: white;
  padding: 5px 5px;
  border: none;
  cursor: pointer;
  opacity: 1;
}
.spanishly3 {
        text-align: left;
        }
.spanishly2 {
        float: right;
    }
.bold2 {
    font-size: 16px;
    }
.spanishly3:before {
    content: "";
    display: block;
    background: url("icon.png") no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
}


/* The popup form - hidden by default */
.form-popup {
  display: none;
  position: fixed;
  /*bottom: 50%;*/
  right: 50%;
  border: 3px solid #f1f1f1;
  z-index: 9;
}

/* Add styles to the form container */
.form-container {
  max-width: 500px;
  padding: 10px;
  background-color: white;
}

/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

div[contenteditable] {
  border: 1px solid black;
  width: 300px;
  border: none;
  font-weight: bold;
}
<button class="open-button" onclick="openForm()"><div class="spanishly2"><span class="spanishly3" style="align: left;">hello</span><p><b class="bold2">Select Your Address</b></p></div></button>

<div class="form-popup" id="myForm">
  <form action="/action_page.php" class="form-container">
  

Area code: <input type="text" name="areacode" id="areacode" placeholder="00000">
        <button onclick="locationlookup()" id="btn1">Lookup</button>

   <div contenteditable></div>

<p><i>or login to set/use your location</i></p>
<br>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit" class="btn">Login</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
    <a href="chrome://settings/addresses" target="_blank">Manage addresses</a>

  </form>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the top four items that can be displayed in a bootstrap carousel using

I'm attempting to showcase four items in a carousel. However, I'm unsure how to loop it back to the main row since an active class is used for the current slide. This is what my HTML code looks like. <div class="carousel slide" id="myCarousel ...

A commitment was formulated within a handler but failed to be returned from it

After a user clicks on the button (#lfdsubmit), it triggers the function (LFD_SearchContainer()) which is expected to return a promise. However, errors are occurring at LFD_SearchContainer('EISU1870725') .then(container => { ST2.db2(contai ...

JavaScript - Dynamically loaded CSS: CSS variables are not immediately accessible to JavaScript, but are successfully evaluated within the CSS itself

I am encountering an issue with dynamically loading stylesheets via JavaScript into my application. Within these stylesheets, I have various CSS variables that I need to access and modify from my JavaScript code. When the stylesheets are directly embedded ...

Website design with a central vertical alignment and a subtle shadow effect

Yesterday I inquired about a website design featuring a shadow, but I have since created a better example and would like to pose the question again. My requirements are as follows: A vertically centered website; A shadow on the content block which may h ...

Adjust the content of a table cell using jQuery

<td>09 Mars 2020</td> Using the string above, I have created a div. Here are the Jquery variables I am working with: date1 = 09 Mars 2020 date2 = 18 Mars 2020 My goal is to combine the content from another date with the existing date to ach ...

Retrieve the titles and URLs of Yahoo search results using C# programming

Is there a way to extract titles and URLs from Yahoo search result page using the htmlagility pack? HtmlWeb web = new HtmlWeb(); string queryText = "your_search_query_here"; string searchResults = "https://en-maktoob.search.yahoo.com/search?p=" + queryTex ...

What is the process for customizing (adjusting color and border width) on bootstrap tabs?

https://i.sstatic.net/IdhlD.png Are you struggling with changing the color of the borders around Bootstrap tabs from light gray to dark blue? You're not alone. It can be tricky to find the right class or element to style for this specific change. Her ...

Angular.js unit testing fails to trigger the $animate.enter callback

After creating a custom directive that adds a wrapper element conditionally, I noticed that while the directive works as expected in production, it fails during unit testing. The issue lies with the $animate.enter function not calling the callback, causing ...

Invert Three.js lookAt method with camera position

Currently, I am animating objects towards the camera and aiming to have them facing the camera upon arrival. To achieve this, I am utilizing object.lookAt(camera.position) However, I am encountering a challenge in tweeing the object back to its initial ro ...

Is it possible to organize and filter a dropdown menu in JQuery based on a secondary value (new attribute)?

Can the drop-down list be sorted by value2? <select id="ddlList"> <option value="3" value2="3">Three</option> <option value="1" value2="1">One</option> <option value="Order_0" value2="0">Zero</option> </sele ...

Having trouble with the Tooltip feature in Bootstrap versions 5.2 and 5.3 on my end

I've been working on building an HTML website using Bootstrap 5.2, and I followed the instructions in the Bootstrap documentation to add tooltips. However, I encountered an issue where the tooltips were not functioning as expected. When checking the ...

Trouble achieving center alignment of navigation bar using @media query in Firefox and IE

Looking for help with creating a video hub that includes a navigation bar? Instead of using an accordion nav collapse, I prefer the menu to carry onto the next line and be centered. Here is the code snippet I used to achieve this effect: @media screen and ...

Locate items that possess identical property values and append them to a new array as a property

I am dealing with an array containing objects that have a specific property called "operationGroup" with the sub-property "groupId". Here is an example of the array structure: [{ operation: 11111, operationGroup: null }, { operation: 22222, ...

Image Placement Based on Coordinates in a Graphic Display

Placing dots on a map one by one using CSS positions stored in arrays. var postop =[{'top':'23'},{'top':'84'},{'top':'54'},{'top':'76'},{'top':'103'}]; var ...

Steps for adjusting the matMenuTriggerFor area so it only triggers when hovering over the arrow

Hello there! I'm currently working on adjusting the trigger area for opening the next menu panel. Right now, the next menu panel opens whenever I hover over either the title or the arrow. However, my goal is to have the menu open only when I hover ove ...

Tips for capturing everything in NextJs with getStaticPaths

My current challenge involves utilizing getStaticProps and getStaticPaths to dynamically generate pages at build time. This is my first experience working with CatchAll routes, so I embarked on a search for solutions. Unfortunately, none of the results al ...

Tips for successfully passing an object with a list property in an ajax request

I have encountered a similar problem to This previous question, but I am struggling to implement the solutions provided. I am unsure of where to include the ModelBinder code mentioned in the responses, so I will explain my issue here. I am working with a s ...

What is the best way to attach a JSON string to an observableArray?

Inside my controller: public ActionResult RetrieveListOfCountries() { return Json(new {data = db.Country.ToList()},JsonRequestBehavior.AllowGet); } Within my Knockout view model: self.RetrieveListOfCountries = function () { $.getJSON("/Profil ...

Difficulty with displaying or concealing Javascript code

After stumbling upon this script online, I discovered that it is designed to show/hide text boxes and labels. However, any alterations to the code seem to disrupt its functionality. For instance, changing divpassword will cause it to stop functioning altog ...

Issue with special characters preventing Custom TinyMCE button from functioning properly

I have integrated a custom button into the visual editor of TinyMCE. This button is designed to enclose any selected words in <em> tags with the class tle. For example, if you select the term Pulp Fiction and click the button, it will wrap it as < ...