how can i make the input text display in the textfield?-CodePudding

I want this input project name and address displayed in the text area.

currently, the input project name and checkbox text can be displayed in the textbox.

ps: I forgot to add checkbox HTML codes in the previous question.

I would appreciate your help.

here is my code:

    let existValue = "";
    $('input:checkbox').click(function(){
        var tb = "#" $(this).attr('rel');
        let text_to_add = this.name   "\n";
    
        let inputVal = $('#pname').val()
        //when click a checkbox and show checked items in the text area
        if($(this).is(":checked")){
            $(tb).val($(tb).val()   text_to_add);
        }else{
            let remove = this.name  "\n";
            //when a box is unchecked it clears the previously populated text from checkbox
            $(tb).val($(tb).val().replace(remove,""));
        }
    
        //storing the value to existValue
    
        existValue = $(tb).val().replace(`${inputVal}\n`, "");
            
    });
    
    $('#pname').on('input',(e)=>{
        //here to adding the input value to the existValue
        $('#textbox1').val(`${e.target.value}\n${existValue}`)
    });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div >
                <form>
                    <label for="projectname">Project name:</label>
                    <input type="text" id="pname" name="pname">
                    <br>
                    <div >
                        <label>Project Address:</label>
                        <input type="text"  id="search_input" placeholder="Type address..." />
                        <input type="hidden" id="loc_lat" />
                        <input type="hidden" id="loc_long" />
                    </div>
                    <div >
                        <p><b>Latitude:</b> <span id="latitude_view"></span></p>
                        <p><b>Longitude:</b> <span id="longitude_view"></span></p>
                    </div>
                </div>
<div >
                <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>
                <br>
                <textarea id="textbox1" ></textarea>

CodePudding user response：

This should do it:

const inps=$('input[type=text]').on('input',()=>
  $('#textbox1').val(inps.get().map(i=>i.value).join("\n"))
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <form>
    <label for="projectname">Project name:</label>
    <input type="text" id="pname" name="pname">
    <br>
    <div >
      <label>Project Address:</label>
      <input type="text"  id="search_input" placeholder="Type address..." />
      <input type="hidden" id="loc_lat" />
      <input type="hidden" id="loc_long" />
    </div>
    <div >
      <p><b>Latitude:</b> <span id="latitude_view"></span></p>
      <p><b>Longitude:</b> <span id="longitude_view"></span></p>
    </div>
</div>
<textarea id="textbox1"></textarea>

As there are no checkboxes in your current HTML I removed the event handling for these elements and concentrated on the text-inputs. In my snippet I selected the input fields by their type (=text). In a real example you should apply a common class to them and select them through that.