CODEWITHSUNDEEP
javascriptphp
nik
nik

Reputation: 285

how to use add and remove button in two select box and submit in database

HTML : 

 <form method="post">
     <fieldset>

    <select name="selectfrom[]" id="select-from" multiple size="5">
      <option value="1">Item 1</option>
      <option value="2">Item 2</option>
      <option value="3">Item 3</option>
      <option value="4">Item 4</option>
    </select>

    <a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a>
    <a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a>

    <select name="selectto[]" id="select-to[]" multiple size="5">

    </select>

  </fieldset>
</form>

javascript : 

<script>       
 $(document).ready(function() {

    $('#btn-add').click(function(){
        $('#select-from[] option:selected').each( function() {
                $('#select-to[]').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });
    $('#btn-remove').click(function(){
        $('#select-to[] option:selected').each( function() {
            $('#select-from[]').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });

});

Upvotes: 1

Views: 171

Answers (2)

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

Problem with id selector, change select-to instead of select-to[] in HTML and jQuery.

To get options value on submit, use map()

$('#submitButton').click(function(){
       var toSelected = $('#select-to option').map(function(){
          return $(this).val();
       }).get().join(',');
       console.log("TO SELECTED: "+ toSelected);

       var fromSelected = $('#select-from option').map(function(){
          return $(this).val();
       }).get().join(',');
       console.log("FROM SELECTED: "+ fromSelected);
});


$(document).ready(function() {

    $('#btn-add').click(function(){
        $('#select-from option:selected').each( function() {
                $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });
    $('#btn-remove').click(function(){
        $('#select-to option:selected').each( function() {
            $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
            $(this).remove();
        });
    });
    $('#submitButton').click(function(){
      
       var toSelected = $('#select-to option').map(function(){
          return $(this).val();
       }).get().join(',');
      
       console.log("TO SELECTED: "+ toSelected);
      
       var fromSelected = $('#select-from option').map(function(){
          return $(this).val();
       }).get().join(',');
      
       console.log("FROM SELECTED: "+ fromSelected);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
     <fieldset>

    <select name="selectfrom[]" id="select-from" multiple size="5">
      <option value="1">Item 1</option>
      <option value="2">Item 2</option>
      <option value="3">Item 3</option>
      <option value="4">Item 4</option>
    </select>

    <a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a>
    <a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a>

    <select name="selectto[]" id="select-to" multiple size="5">

    </select>
    <button id="submitButton">Submit</button>
  </fieldset>
</form>

Upvotes: 1

Satpal
Satpal

Reputation: 133403

Since [ and ] is a meta characters, use \\ to escape it. 

$('#select-to\\[\\]')

instead of

$('#select-to[]')

Docs

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \\.

jQuery(function($) {
  $('#btn-add').click(function() {
    $('#select-from\\[\\] option:selected').each(function() {
      $('#select-to\\[\\]').append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");
      $(this).remove();
    });
  });
  $('#btn-remove').click(function() {
    $('#select-to\\[\\] option:selected').each(function() {
      $('#select-from\\[\\]').append("<option value='" + $(this).val() + "'>" + $(this).text() + "</option>");
      $(this).remove();
    });
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
  <fieldset>

    <select name="selectfrom[]" id="select-from[]" multiple size="5">
      <option value="1">Item 1</option>
      <option value="2">Item 2</option>
      <option value="3">Item 3</option>
      <option value="4">Item 4</option>
    </select>

    <a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a>
    <a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a>

    <select name="selectto[]" id="select-to[]" multiple size="5">
    </select>
  </fieldset>
</form>

Upvotes: 0

Related Questions