Question

0

276

Vistas

Adding one more form in html

This is the my code. I want to add one more medicine when I click on + button, How can I do this task?

<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>

about 4 years ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-12T05:08:55.469Z

Not sure what you can/can't do outside of what you've mentioned, but I'd probably do something like this.

$(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 · 2022-07-12T05:08:55.476Z

You need to use Javascript.
This is an simple example with jQuery library and Bootstrap (mainly to get the styling).
https://getbootstrap.com/docs/5.1/getting-started/introduction/
https://jquery.com/

Check the DEMO below:

$(function(){
    $('#add-row').click(function(){
       $(".row:first-child").clone().prependTo(".container-fluid"); 
    });
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/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>

0

276

Adding one more form in html

2 Respuestas

0

0

Encuentra empleos remotos

Andres GPT