Is there a way to verify that a form field has been completed?

Currently, I am grappling with a method to clear a field if a specific field is filled in and vice versa.

This form identifies urgent care locations based on the information provided by users. The required entries include the name of the urgent care facility, city, zip code, and miles field.

My objective is to automatically clear the city field if the user enters a zip code in the corresponding field, and vice versa. If a city is selected from the drop-down list, the zip code field should be cleared.

Below is the JavaScript code snippet that I have implemented for this functionality:

$('#zip').on('input‌', function() { $('#city').val("") })
$('#city').on('input‌', function() { $('#zip').val("") })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel panel-default">
  <div class="panel-body">
    <form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate="" role="form">
      <div class="form-group">
        <input class="form-control" id="urgentcare" ng-model="searchParam.UrgentCareName" placeholder="Urgent Care Name" type="text" />
      </div>

      <div class="form-group">
        <SELECT name="proCity" class="form-control margin-bottom1" id="city" placeholder="City" ng-model="searchParam.City">
          <option disabled="disabled" selected="selected" value="">City</option>
          <cfoutput query="UCarecityFind">
            <option value=#officecity#>#officecity#</option>
          </cfoutput>
        </select>

      </div>
      <hr />
      <div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>

      <div class="row">
        <div class="col-xs-7 no-right-padding">
          <div class="form-group">
              <select class="form-control" name="distance" ng-model="searchParam.distance">
                <option selected="selected" value=" "></option>
                <option>5</option>
                <option>10</option>
                <option>15</option>
                <option>20</option>
              </select>
              <div class="input-group-addon">miles</div>
            </div>
          </div>
        </div>

        <div class="col-xs-5 no-left-padding widthZip">
          <div class="form-group">
            <input allow-pattern="[\d\W]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" />
          </div>
        </div>
      </div>


      <div class="form-group">
        <input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" />
      </div>
    </form>
  </div>
</div>

Answer №1

It appears that there is a mysterious invisible symbol coded as 0x5396c following the input function in your .on() calls. By removing this symbol, your code should operate correctly.

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

Is there a way to prevent certain folders that have .vue files from being included in the VueJS build process?

https://i.sstatic.net/YU1rB.png module.exports = { presets: [ '@vue/app' ], module:{ rules: [ { test: /\.vue$/, exclude: [ './src/components/Homepages/number1', './src ...

Issue with Dismiss Button Display in Bootstrap Alert

I've been experimenting with Bootstrap and I realized that even though I followed all the instructions on their Alert page, my close button just appears as a large grey square with an X in it. Any suggestions on what might be missing? https://codepe ...

Tips for using the identical function on matched elements

I am working on a code where I want each textbox input to change its corresponding image. The function is the same for all partners in the list (txt & img). I have looked around and found some similar posts, but I am struggling to make the function wor ...

Can you explain how the CSS hack *+html works?

While working on a project, I have encountered multiple rules that look like this: * + html { /.../ } Although I understand the purpose of using * and +, I am unsure about the significance of this particular construction. Additionally, I came across ...

JavaScript not functioning on Express-powered HTML document

I have set up an express server to render my payj.html file, which includes a script tag for the clyint.js file. However, I am encountering an error in the browser's console: GET net::ERR_ABORTED 404 I also attempted to include all the JavaScript ...

Building routes for nested relationships in the MEAN stack: A comprehensive guide

Within my Mongoose Schema, I am dealing with two models - User and Plans. Each user can have multiple plans, so in the Plans Schema, I am embedding a userID like this: var PlanSchema = new mongoose.Schema({ title: {type: String}, userId: {type: Stri ...

Exploring a JSON Object with nested properties, crafting changes, and producing a fresh object: A step-by-step guide

I am attempting to manipulate a JSON object with nested properties by replacing numeric values with computed values and returning a new object. The original object looks like this: var obj = { "a0": { "count": 41, "name": "Park", "new": { ...

AngularJS 2: Updating variable in parent component using Router

My current app.component looks like the following: import { Component, Input } from '@angular/core'; import {AuthTokenService} from './auth-token.service'; @Component({ selector: 'app-root', templateUrl: './app ...

Steps for adding a user-glyphicon within an img tag

In the given code, I am trying to create a function where if no photo is uploaded, a default bootstrap glyphicon-user image should be displayed. Once a photo is uploaded, it should overwrite the default image. //Please ensure necessary Bootstrap files are ...

Progressive selection

Apologies in advance to everyone for this question, as I am aware that cascading select boxes have been extensively discussed. However, despite my efforts, I cannot seem to find helpful solutions. I have attempted various approaches, yet they all seem to f ...

Tips on Avoiding Connection Timeouts in jQuery AJAX

Currently, I am encountering an issue with a connection time out during a jQuery ajax operation. The situation is that when I send an ajax request, it takes too long to be processed by the server (about 5 minutes). To address this delay, I have implemented ...

Is there a way to capture real-time console output in an ExpressJS application while a script is running?

I'm facing a challenge in integrating the output of a bash script into an ExpressJS application to then send the data to a client. To address this, I have developed a simplified version of my actual script for testing purposes. My goal is to capture a ...

Refreshing the Angular resource under observation

My brain feels a bit fried today, so pardon what might seem like an obvious question. I have a useful resource at my disposal: Book = $resource("/books/:id", {id: "@id"}); book = Book.get(1); When I want to refresh the object to receive any updates from ...

A guide to using JavaScript to create a button that can dynamically change stylesheets

Just a heads up, I'm not using classes in this particular scenario. Can't seem to find the answer to this exact question. With javascript, how can I code a button to switch stylesheets every time it's clicked? I've experimented with d ...

Styling the checked state of a switch in NativeScript/Angular with ngModel/FormBuilder

Let's explore the styling of a switch element within Angular: <Switch class="switch" formControlName="answer"></Switch> One approach involves targeting the switch with checked attribute, setting its background-color and text color accord ...

Determine using Javascript or jQuery whether the value of input1 is greater than the value of input2

Ensuring that Value1 is always greater than Value2 in a form submission is crucial. If Value1 becomes greater than or equal to Value2, an error message should be displayed and the form submission should not be processed. Below is the code for the form: & ...

I encountered an issue in ReactJS where I received a TypeError stating that props.history.listen is not a function

Why is this showing up? I'm using ReactJS and can't figure out what's going wrong. Here is my history.js: import { createBrowserHistory } from 'history' export default createBrowserHistory In my App.js: import React from 'r ...

Utilizing Three.js to apply a matrix transformation to a collection of objects and subsequently refreshing their positions

How can we ensure that objects added to a group in a scene (now Object3D()) correctly apply the group's matrix, updating their locations within the scene? ...

Create an unordered list using the <ul> tag

Creating a ul as input is my goal, similar to this example on jsfiddle: http://jsfiddle.net/hailwood/u8zj5/ (However, I want to avoid using the tagit plugin and implement it myself) I envision allowing users to enter text in the input field and upon hitt ...

Tips on Extracting Data from a JSON Object with an Embedded Array

Check out this example of a Json Object: {"UserName":Mike,"IsActive":0,"ChbxIsActive":false,"MyAccountsAvailable":[{"Id":"157A","MyAccount":"CHRIS MCEL","MyCheckBox":false,"Tags":null},{"Id":"157B","MyAccount":"DAN BONE","MyCheckBox":false,"Tags":null} He ...