when the project name is entered, it populates in the same text field as the checked boxes text but at the top of the field.
I also want to create a button for sending the completed form if that's possible
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,'');
});
}
})
The solution i would come up with will be: to store the exist value from the textarea everytime you change the text area value.
let existValue = ''
//inside the checkbox click function:
existValue = $(tb).val()
then to add an event listener to the input and everytime the input change to add the e.target.value to the exist value we created before
$('#pname').on('input', (e)=>{
$('#textbox1').val(`${e.target.value}\n${existValue}`)
})
here is a working example: working example