cuando se ingresa el nombre del proyecto, se completa en el mismo campo de texto que el texto de las casillas marcadas pero en la parte superior del campo.
También quiero crear un botón para enviar el formulario completo si es posible
html
<div class="name"> <form> <label for="projectname">Project name:</label> <input type="text" id="pname" name="pname"><br> <br> </div> <br> <div class="series1"> <tr><input type="checkbox" rel="textbox1" name="Cabinets" class=test/> Cabinets</tr> <input type="checkbox" rel="textbox1" name="Doors" /> Doors <input type="checkbox" rel="textbox1" name="Drawers"> Drawers <input type="checkbox" rel="textbox1" name="Drawer Fronts"> Drawer Fronts <input type="checkbox" rel="textbox1" name="Handles"> Handles </div> <textarea id="textbox1" ></textarea>js
$('input:checkbox').click(function(){ var tb = "#"+$(this).attr('rel'); let text_to_add = this.name + "\n"; //when click a checkbox and show checked items in the text area if($(this).is(":checked")){ $(tb).append(text_to_add); }else{ let remove = this.name +"\n"; //when a box is unchecked it clears the previously populated text from checkbox $(tb).text(function(i, text){ return text .replace(text_to_add,''); }); } })La solución que se me ocurriría sería: almacenar el valor existente del área de texto cada vez que cambie el valor del área de texto.
let existValue = '' //inside the checkbox click function: existValue = $(tb).val()luego para agregar un detector de eventos a la entrada y cada vez que la entrada cambie para agregar e.target.value al valor existente que creamos antes
$('#pname').on('input', (e)=>{ $('#textbox1').val(`${e.target.value}\n${existValue}`) })aquí hay un ejemplo de trabajo: ejemplo de trabajo