0
272
VistasAgregar un formulario más en html
Este es mi código. Quiero agregar un medicamento más cuando hago clic en el botón +. ¿Cómo puedo hacer esta tarea?
<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> 
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
No estoy seguro de lo que puede/no puede hacer fuera de lo que ha mencionado, pero probablemente haría algo como esto.
$(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>
·
Juan Pablo Isaza
Denunciar
0
Necesitas usar Javascript.
Este es un ejemplo simple con la biblioteca jQuery y Bootstrap (principalmente para obtener el estilo).
https://getbootstrap.com/docs/5.1/getting-started/introduction/
https://jquery.com/
Revisa la DEMO a continuación:
$(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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta