简体   繁体   中英

There are 2 form fields as reg no and full name in html. I want to fill full name when reg no associated with name is entered using Javascript

 <html> <head> <title>Registrationm form</title> </head> <body> <form> <:--here at runtime i want to fill full name when user enters rno associated with fullname--> Registration number:<input type="text" id="rno"/> Full name:<input type="text id="name"/> </form> </body> </html>

Based on your comment, here's what you need to do:

  1. Define a list of objects which include a name and a registration number.
  2. Populate these objects to an array.
  3. Have your input's onchange/onkeyup event filter the array for elements having the supplied registration number.

The snippet below supplies pseudocode that does similar things as an instructive example for you to adapt to your needs.

Please address any issues you have applying it in another question if necessary.

 class Rectangle { constructor(height, width) { this.height = height; this.width = width; } } const rectangles = []; window.onload = () => { for (let i = 0; i <= 9; i++) { let x = Math.floor(Math.random() * 50); let y = x / 2; let shape = new Rectangle(y, x); rectangles.push(shape); } console.log(rectangles); } const getRectanglesWithHeight = (height) => { const container = document.querySelector(".results"); container.innerHTML = ""; const results = rectangles.filter(x => x.height == height); for (let result of results) { let i = 1; let markup = `<p>${i}<br /> Height: ${result.height}<br /> Width: ${result.width}</p> <div style="border:1px solid #000; height: ${result.height}px; width: ${result.width}px;">` container.innerHTML += markup; } } const getRectanglesWithWidth = (width) => { const container = document.querySelector(".results"); container.innerHTML = ""; const results = rectangles.filter(x => x.width == width); for (let result of results) { let i = 1; let markup = `<p>${i}<br /> Height: ${result.height}<br /> Width: ${result.width}</p> <div style="border:1px solid #000; height: ${result.height}px; width: ${result.width}px;">` container.innerHTML += markup; } }
 <p> Height:<br /> <input type="number" id="height" onkeyup="getRectanglesWithHeight(this.value)" /> </p> <p> Width:<br /> <input type="number" id="width" onkeyup="getRectanglesWithWidth(this.value)" /> </p> <div class="results"> </div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM