How to add textbox value into a list? [duplicate]

Question

I have a list like this :

<p>Please select :</p>

<script type="text/javascript"></script>

<select id='pre-selected-options1' multiple='multiple'>
    <option value='elem_1' selected>1</option>
    <option value='elem_2'>2</option>
    <option value='elem_3'>nextoption</option>
    <option value='elem_4' selected>option 1</option>
    <option value='elem_100'>option 2</option>
  </select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
 <script src="js/jquery.multi-select.js"></script>
  <script type="text/javascript">
  $('#pre-selected-options1').multiSelect();
  </script>
</div>

i have a text box and i need to add the text box values into this list. For time being i need it like whenever the page reloads everything entered is reset. Later on i will connect to db.

<label>Enter: </label>
<input type="text" name="" class="input-default"><button type="button" class="btn btn-success btn-sm m-b-10 m-l-5">Add</button>

How to add the value entered in text box to this list on button click?

demo

Please share the working snippet that demonstrate your issue while implementing this requirement. — gurvinder372
– gurvinder372, Commented Apr 17, 2018 at 12:22
when you were trying to achieve this, where exactly did you get stuck? if you don't know where to begin: look here — Scaramouche
– Scaramouche, Commented Apr 17, 2018 at 12:24
It seems that you didn't try anything to solve your problem.So first try and then come back with your code effort. We will be glad to help then — Death-is-the-real-truth
– Death-is-the-real-truth, Commented Apr 17, 2018 at 12:25
if you want Durga to hear you, don't yell DURGA, just @Durga. ^_^ — Scaramouche
– Scaramouche, Commented Apr 17, 2018 at 12:34

AG_BOSS · Accepted Answer · 2018-04-17 12:53:06Z

3

<select id='pre-selected-options1' multiple='multiple'>
    <option value='elem_1' selected>1</option>
    <option value='elem_2'>2</option>
    <option value='elem_3'>nextoption</option>
    <option value='elem_4' selected>option 1</option>
    <option value='elem_100'>option 2</option>
    </select>
    <!-- This is the list (above)-->
    <br>
    <label>Enter: </label>
    <input type="text" name="" id="inp" class="input-default"> 
    <button type="button" onclick="add()" class="btn btn-success btn-sm m-b-10 m-l-5">Add</button>
    <!-- This is the textbox-->
    <script>
    function add()
    {
    var x = document.getElementById("pre-selected-options1");
    var option = document.createElement("option");
    option.text = document.getElementById("inp").value;
    x.add(option);
    }
    </script>

answered Apr 17, 2018 at 12:53

AG_BOSS

12410 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sunny · Accepted Answer · 2018-04-17 12:44:33Z

3

i am giving you a sample. hope it'll help you out.

<div>
    <select id="Select1" name="Select1">
        <option>Option1</option>
        <option>Option2</option>
        <option>Option3</option>
        <option>Option4</option>
    </select>
    <input id="Text1" type="text" />
    <input id="Button1" type="submit" value="button" />
</div>

in js using jquery:

$(document).ready(function() {
        $("#Button1").click(function() {
            $('#Select1').append($("<option>" + $('#Text1').val() + "</option>"));
            return false;
        });
    });

answered Apr 17, 2018 at 12:44

Sunny

6159 silver badges24 bronze badges

Comments

saketh · Accepted Answer · 2018-04-17 13:09:35Z

3

it may help for you

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    var counter = 1;

    function enter_task () {
            var text = $('#enter_task').val();
            $('#todo_list').append('<li><span>'+ text + ' </span><input type="submit" id="edit' + counter + '" value="Edit">' + '<input type="submit" class="done" id="delete' + counter + '" value="Delete">' +'</li>');
      
    $('#edit' + counter).click(function(){
        $(this).prev().attr('contenteditable','true');
        $(this).prev().focus();
    });

    $('#delete' + counter).click(function(){
        $(this).parent().remove();
    });

      counter++;
    };

    $(function() {
        $('#add').on('click', enter_task);
    });
</script>

 <body>
    <h1>Todo List</h1>  
        <input type="text" id="enter_task" placeholder="Enter Task">
        <input type="submit" id="add" value="Add Task">
        <p>
            <ul id="todo_list">
            </ul>
        </p>
</body>

edited Apr 17, 2018 at 13:09

answered Apr 17, 2018 at 13:01

saketh

3272 silver badges10 bronze badges

2 Comments

qwww Over a year ago

thanks a lot......thank you

qwww Over a year ago

How to make press enter to exit editing mode?

Collectives™ on Stack Overflow

How to add textbox value into a list? [duplicate]

3 Answers 3

Comments

in js using jquery:

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

in js using jquery:

Comments

2 Comments

Linked

Related