Incorporating an additional HTML form to the webpage

I've written some code and I'm looking to add another medicine when the + button is clicked. How can I achieve this?

<html>
<body style="color:black; font-size:20px;">
<form>
    <label style="margin-right:95px;"> Medicine </label> 
    <label style="margin-right:135px;"> Qty. </label>
    <label> Timing-Freq-Duration </label> <br>
    <input type="text" id="medicine" name="medicine" placeholder="Medicine Name">
    <input type="text" id="quantity" name="quantity">
    <input type="text" id="duration" name="duration">
    <input type="submit" style="margin-left:30px;" value="+">
</form>
</body>
</html>

https://i.sstatic.net/sy89m.png

javascripthtmlcss

Answer №1

It's uncertain what limitations you may have, but here is a possible solution.

$(document).ready(function(){
  var i = 0;
  
  $('#add-row').click(function(){
    $('#init-group').first().clone(true).attr('id','med-'+i).insertAfter('form .form-group:last');
    i++;
  });
});
form .form-group {
  float: left;
  margin-top: 5px;
}

form span {
    background: #EFEFEF;
    border: 1px solid #767676;
    font-size: 0.9rem;
    position: relative;
    top: 5px;
    padding: 0px 6px 3px;
    cursor: pointer;
    float: left;
    margin-left: 5px;
}

input[type="submit"]{
  margin-top: 2rem;
}
.form-row::after,
input[type="submit"]::after{
  content:"";
  clear: both;
  display: table;
  position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <div class="form-headers">
    <label style="margin-right:95px;"> Medicine </label> 
    <label style="margin-right:135px;"> Qty. </label>
    <label> Timing-Freq-Duration </label>
  </div>
  
  <div class="form-row">
    <div id="init-group" class="form-group">
      <input type="text" id="medicine" name="medicine" placeholder="Medicine Name">
      <input type="text" id="quantity" name="quantity">
      <input type="text" id="duration" name="duration">
    </div>
    <span id="add-row">+</span>
  </div>
  
  <input type="submit" value="Submit">
</form>

Answer №2

https://i.sstatic.net/nbNbE.png

To implement this solution, you will need to utilize Javascript.
Below is a straightforward example using the jQuery library and Bootstrap for styling purposes.
https://getbootstrap.com/docs/5.1/getting-started/introduction/
https://jquery.com/

Feel free to explore the DEMO provided below:

$(function(){
    $('#add-row').click(function(){
       $(".row:first-child").clone().prependTo(".container-fluid"); 
    });
});
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="46242929323532342736067368776877">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div class="container-fluid p-4">
  <div class="row mb-3">
    <div class="col">
      <label for="" class="form-label">Medicine</label>
      <input type="text" class="form-control" id="" placeholder="Medicine Name">
    </div>
    <div class="col-2">
      <label for="" class="form-label">Qty.</label>
      <input type="text" class="form-control" id="">
    </div>
    <div class="col-2">
      <label for="" class="form-label">Timing</label>
      <input type="text" class="form-control" id="">
    </div>
  </div>
  <button class="btn btn-outline-primary" id="add-row">Add Medicine</button>
</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

The centering of content is not flawless using Bootstrap

Below is a snippet of my code: <div class="container branduri justify-content-center"> <div class="row justify-content-center"> <div class="col-xl-4"> <h1><strong>+100</strong></h1> </div> < ...

htmlcssbootstrap-4

Center align the image without any additional spaces

https://i.sstatic.net/Oxmqa.pngI'm looking to center align the logo within the navigation bar on my page. Here is the code I currently have: <div class="nav"> <ul> <li id="center"> <a href="home.php">&l ...

htmlcss

What is the method for linking an icon in an iconfont using a keyword?

For my project, I would like to incorporate icon fonts and customize the font file using FontForge. I understand that glyphs can be referenced by unicode in HTML or CSS, for example <i>&#xe030;</i> and &::before{content: "\e030";} ...

cssfont-facewebfontsicon-fonts

AngularJS promise fails to resolve when attempting to read a file using the FileReader

Can someone assist me with a function I am trying to create in my service? I want the function to use FileReader to read a small image file and return the result in a promise to my controller. The issue is that while the file reaches the service without an ...

javascriptangularjspromise

The Jquery function .load() doesn't load HTML comment tags as expected

Utilizing the .load() Jquery function enables me to insert html tags from one file into another. Here is an example of the code: <html> <head> <script src="jquery.js"></script> <script> function loadConte ...

jqueryhtml

Using Selenium in JavaScript to upload an image is a straightforward process

I am trying to automate the process of uploading a picture using Selenium with the following script: driver.findElement(By.id(`avatar-upload`)).sendKeys(`/home/user/Desktop/smg935-0hero-0930.jpeg`) But I keep receiving this error: ElementNotInteractable ...

javascriptselenium

Analyzing and adding Angular JSON information

I'm struggling to understand why the compare function and insert function in my code aren't functioning correctly. I suspect that one reason for this could be that the function is not being called by the button. How can I confirm this? It seems l ...

javascriptjsonangularjs

What is the best way to utilize JSON.stringify for substituting all keys and values?

In my current project, I am exploring how to leverage the replacer function argument within JSON.Stringify in JavaScript to alter the word case (toUpper / toLower case). The challenge I am facing is that my JSON data is not simply key:value pairs; some val ...

javascriptjsonnode.jsrecursion

Enhancing Vue.js functionality with extra information stored in local storage

I've created a To Do List app where you can add tasks using a button. Each new task is added to the list with a checkbox and delete button in front of it. I'm trying to save all the values from the inputs and the checked checkboxes on the page on ...

javascriptvue.js

A flashy Rickshawgraph with the ability to modify the background color of the top data series

I am facing a challenge in modifying the background color of the rickshawgraph widget in dashing based on the maximum value of the highest graph from the latest incoming data. While I have successfully implemented this feature for one series, I am struggli ...

csscoffeescriptrickshawdashing

Testing XMLHttpRequest with Jasmine: A Complete Guide

Is there a way to test the onreadystatechange function on XMLHttpRequest or pure JavaScript AJAX without using jQuery? I need to do this because I'm working on a Firefox extension. It seems like I may have to use spies, but I'm having trouble bec ...

javascriptajaxjasmine

The value of document.readyState remains as 'complete' even while the page is still actively loading on the frontend

Below is the code I implemented to verify if the page has finished loading: JavascriptExecutor js = (JavascriptExecutor)Driver; pageLoadStatus = js.executeScript("return document.readyState").toString(); Despite still visibly loading, the document.readyS ...

javascriptjavaselenium

Retrieve all users along with their respective posts, ensuring that each post is also accompanied by its corresponding comments in

In my Laravel project, I have set up Eloquent models for User, Post, and Comment. The relationships are as follows: User model public function posts(){ return $this->hasMany('App\Post'); } public function comments(){ return $t ...

javascriptphpajaxlaraveleloquent

Understanding which page is being rendered through _app.js in React/Next.js is crucial for seamless navigation and

Currently, I am working on rendering my web navigation and footer on my _app.js file. My goal is to dynamically adjust the style of the navigation and footer based on the specific page being accessed. Initially, I considered placing the navigation and foot ...

javascripthtmlcssreactjsnext.js

One div is experiencing trouble with the `align-items: center` property, while the other divs are functioning

Presenting my React component: <div className='sidebar'> <div className="sidebarItem"> <span className="sidebarTitle">About Me</span> <img src="https://wallpapera ...

cssreactjs

Retrieve a JSON array using an HTTP Get request in JavaScript (with jQuery)

I’ve been experimenting with various code snippets in an attempt to reach my objective, but so far I haven’t found a solution. Objective: My goal is to retrieve a JSON array of objects from a specific web URL using the GET method. This task needs to b ...

javascriptjqueryhttp-getarrays

Choose an option from a list of items in a nested array by

I'm working with a nested array (3d) and I want to populate a drop-down select menu with its values using PHP and jQuery I've tried implementing this for two-level arrays like categories and sub-categories, but what if some sub-categories have f ...

javascriptphpjquery

Align text in the center of a static container

I am facing the challenge of aligning four h4 tags in the center of their respective fixed divs, all set to width: 100% to ensure their background-color: rgba(255, 255, 255, 0.5); covers the entire browser width. Despite trying various combinations of CSS ...

htmlcsstwitter-bootstrap

Stop receiving notifications for channel events in Stream with the GetStream.io Chat API

I'm having trouble understanding how to stop listening for channel events in JavaScript using the Stream Chat API. According to the documentation: // remove the handler for all "message.new" events on the channel channel.off("message.new", myChanne ...

javascriptangulargetstream-io

Is it possible to modify the CSS of a parent element in vue.js only for the current router route?

I am trying to modify the parent component's style without affecting the CSS of other components. Here is an example from my code: App.vue <div class="page-content"> <router-view ref="routeview"></router-view> </div> rou ...

cssvue.js