Establish the minimum and maximum values for the text field depending on the selection made in the previous dropdown menu

For my project, I need to create a dropdown menu and a text box positioned next to it. I want the text box to have specific character limits based on the option selected from the dropdown. For example, if "Option 1" is chosen, then the textbox should only allow for a minimum of 10 characters and a maximum of 16 characters.

Can anyone guide me on how to implement this functionality?

<div class="row">
  <div class="col-sm-6">
    <div class="form-group">
      <label class="required">Select Type</label>
      <select class="form-control" id="prooftype">
        <option value="0" disabled> </option>
        <option value="name1">name1</option>
        <option value="name2">name2</option>
        <option value="name3">name3</option>
        <option value="name4">name4</option>
      </select>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="form-group md-form">
      <label class="required" for="id" data-error="wrong" data-success="right">
        <i class="fa fa-info pr-2"></i> 
        Enter Identity Card Number
      </label>
      <input id="id" type="number" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="20" />
    </div>
  </div>
</div>

javascriptjqueryhtmlcss

Answer №1

you need to make a slight adjustment in your code

<div class="row">
  <div class="col-sm-6">
    <div class="form-group">
      <label class="required">Choose Type</label>
      <select class="form-control" id="prooftype">
        <option value="0/0" disabled> </option>
        <option value="10/16">name1</option>
        <option value="20/32">name2</option>
        <option value="30/48">name3</option>
        <option value="40/64">name4</option>
      </select>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="form-group md-form">
      <label class="required" for="id" data-error="incorrect" data-success="correct">
        <i class="fa fa-info pr-2"></i> 
        Enter Identity Card Number
      </label>
      <input id="id" type="text" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)"  maxlength="20" />
    </div>
  </div>
</div>

then add this jQuery snippet

$('#prooftype').change(function(){

var temp = $(this).val().split('/');
    $('input#id').attr('minlength',temp[0]).attr('maxlength',temp[1]);

})

Answer №2

If you send the option value of 12/16 to the backend, the data will be reflected accordingly. A potential solution could look something like this:

<div class="row">
  <div class="col-sm-6">
    <div class="form-group">
      <label class="required">Select Type</label>
      <select class="form-control" id="prooftype">
        <option value="0/0" disabled> </option>
        <option value="name1">name1</option>
        <option value="name2">name2</option>
        <option value="name3">name3</option>
        <option value="name4">name4</option>
      </select>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="form-group md-form">
      <label class="required" for="id" data-error="wrong" data-success="right">
        <i class="fa fa-info pr-2"></i> 
        Enter Identity Card Number
      </label>
      <input id="inputid" type="text" minlength="3" class="form-control validate" autocomplete="off" onkeypress="return blockSpecialChar(event)" maxlength="20" />
    </div>
  </div>
</div>

As for your JQuery implementation:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script type="text/javascript">
var selectedopt;

$('#prooftype').change(function(){
   selectedopt = $(this).val();

   // You can add conditions here to dynamically set input min and max values
   if(selectedopt == "name1")
   {
     $('#inputid').attr('minlength','10').attr('maxlength','16');
   }
   else if(selectedopt == "name2")
   {
     $('#inputid').attr('minlength','20').attr('maxlength','25');
   }
   // Add more conditions as needed
})


</script>

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

The functionality of dropdown menus in the Bootstrap 5 navbar is currently experiencing issues

I recently updated my Bootstrap from v5.2.2 to v5.2.3 and now the dropdown menus in my navbar are not working properly. They do not drop down as they should, instead, they remain stationary. Can someone please help me figure out what I am doing wrong? & ...

htmlcssbootstrap-5

Using Meteor package to efficiently import JSON arrays into mongoDB

I am currently working on developing a meteor package that will allow users to import JSON files into collections in a mongoDB. However, I'm uncertain about the feasibility of this task. The idea is for the user to upload a JSON file and specify the ...

javascriptjsonmongodbmeteor

Determine the Availability of a URL with AngularJS

Looking for a way to verify the existence of a URL like www.testsite.com/mypage using AngularJS. Is this possible? Any suggestions from the community? ...

javascriptangularjs

Discovering elements with Selenium

While using selenium, I stumbled upon this web element: <td style="padding-right: 10px; " **onclick="javascript:show_me('CarDetails.php?CarID=2358912&SubCatID=1**', '2358912', 560, 'ActiveLinkVisited');stat( '../& ...

javajavascripthtmldomselenium

Changing the Style of a CSS Module Using JavaScript

Embarking on a journey into Javascript and React, I am currently working on my first React app. My aim is to adjust the number of "gridTemplateRows" displayed on the screen using a variable that will be updated based on data. Right now, it's hardcode ...

javascriptcssreactjssasscss-modules

Leveraging information beyond the socket.on function

I'm trying to work with socket data in a way that allows me to compare it outside of the initial socket.on function. I've attempted using global variables without success. One thought I had was grouping the data, but one is an io.emit and the oth ...

javascriptnode.jssocket.io

When utilizing JavaScript's split method, an empty string returns an array size of one instead of zero

Is there a way to separate a string using commas to create an array in Node.js? exports.test = function(rq, rs){ var mailList = "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16657e7764777856627365623875797b">[email ...

javascriptnode.jssplit

Searching for data in a jQuery datatable using AJAX in MVC yields no results

I created a table within the $( document ).ready function and integrated the jQuery DataTables plugin. However, upon loading the page, despite successfully loading all data into the datatable from an AJAX call to my controller, an error message appears ind ...

jqueryajaxmodel-view-controllerdatatable

Implementing Node Express 4 to efficiently handle response generation from successive API requests

I'm currently in the process of developing a NodeJS server using Express4. The main purpose of this server is to act as a mediator between my frontend Angular app and a 3rd party API. I've set up a specific path that my frontend app can request, ...

javascriptnode.jsexpresssuperagent

Is there a way to manage specific HTML elements in Angular?

I am working on displaying a list of enable/disable buttons for different users. The goal is to show the appropriate button for each user based on their status - enabling if disabled and disabling if enabled. To achieve this, I have utilized the flags "use ...

htmlangulartypescript

Storing Tags with jQuery Tag-it: A guide to saving user inputted tags in an object

Recently stumbled upon a fantastic plugin called tagit, and now I'm looking for a way to extract tag values from it and convert them into an object. Any assistance on this matter would be greatly welcomed! ...

javascriptjqueryajax

When an element possesses a particular class, modify the css styling of a different

My menu is an unordered list, with each menu item gaining the "active" class when clicked. This works perfectly fine. However, I have an arrow positioned absolutely and its "top" style needs to change based on which list item has the "active" class. Curr ...

jqueryhtmlcssconditional-statements

Identify the nested Object within the Json data

I am looking to add and name a nested object within my Json data structure. The current structure of my Json is as follows: { "MH": [ { "MHF46": "Ledig", "MHF60": "60", }, ...

javascriptnode.jsjson

Exploring Concealed Data and Corresponding in jquery, javascript, and html

A unique template contains 2 hidden fields and 1 checkbox. Using the function addProductImage(), the template is rendered and added to the HTML page. To retrieve the values of the hidden fields (thisFile and mainImage) from a dynamically generated div wit ...

javascriptjqueryhtml

Navigation bar's active area does not span the full height

I'm facing some issues with the navigation bar on my responsive website. One issue is that the clickable area for the links does not extend to the full height of the nav bar, and I would like it to cover the entire height. Another problem arises whe ...

cssnavigation

Leverage the power of PHP array values in your Javascript code

I am facing an issue where I cannot seem to run my javascript functions on a page after retrieving values from a local database using PHP. When the PHP code is included within my javascript, the function does not execute at all. However, if I separate the ...

phpjavascriptjqueryjson

The background size of each list item is determined by the size of the item

I'm trying to create a menu using an unordered list, where each item has a background color. However, I want the width of each item to be smaller than the list itself and aligned to the right. Any ideas on how to achieve this? Here is the HTML code: ...

htmlcsslistbackground-coloritems

Having trouble with Jquery's Scroll to Div feature?

When I click on the image (class = 'scrollTo'), I want the page to scroll down to the next div (second-container). I've tried searching for a solution but nothing seems to work. Whenever I click, the page just refreshes. Any help would be gr ...

javascriptjqueryhtmlcss

Is it possible to monitor a section of a webpage's source code for any updates and notify about them?

This question may seem a bit confusing, but I am in need of some guidance. I do not require any code to be written for me, but rather assistance in finding the right direction to achieve my goal. The task at hand is to monitor a specific area of a web page ...

htmlautomationconsoleweb-scraping

Having trouble linking multiple components using redux in react native

I'm having trouble figuring out how to connect two different components using the redux store. Here's what I've attempted: View.js import React from 'react'; import {View, Text, Button} from 'react-native'; import {Act ...

javascriptreact-nativereduxreact-reduxjsx