asked on

Add value on Select2 if it does not exist in the MySQL and Javascript database

Hello, I'm working on a select2 js menu, if I do a search I need a button in the first or last row to add a new record to the database, after adding the new record it can be selected.

The table in the database is called diagnostics and has the following attributes, id, description

<form>
                  <select class="dx form-control" id="dx" name="dx" data-toggle="select">
                  </select>
 </form>

db_select.php

<?php
define ('DB_USER', "");
define ('DB_PASSWORD', "");
define ('DB_DATABASE', "");
define ('DB_HOST', "");
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
$sql = "SELECT * FROM dx";
$result = $mysqli->query($sql);
$json = [];
while($row = $result->fetch_assoc()){
    $json[] = ['id'=>$row['id'], 'text'=>$row['description']];
}
echo json_encode($json);
?>

  <script type="text/javascript">
	  
  
    $('.dx').select2({
        placeholder: 'Select dx',
        ajax: {
          url: 'db_select.php',
          dataType: 'json',
          delay: 250,
          processResults: function (data) {
            return {
              results: data
            };
          },
          cache: true
        }
      });
      
  
       
  </script>

Open in new window

Finally it is possible to save the existing values, you can help me with the example please.

leakim971

why not just using tagging ?
https://select2.org/tagging

VICTOR OSORNIO

ASKER

because I need to graph the menu values

leakim971

what do you call menu values ?

VICTOR OSORNIO

ASKER

I need the identification of the related table to be able to graph

Example

Table result
id menu_option_id
1 1
2 1

Values table
1 Gren
1 Red

Menu Select2

id(1) Select value (Gren)

leakim971

I need the identification of the related table to be able to graph

you can save new value to database in your table and get back the id to add the new value in your dropdown

VICTOR OSORNIO

ASKER

It's what I need but in an easy way to use this, however, to open another window

leakim971

your php add a last record :

$json[] = array("text"=>"+ADD"); // no id as you can see
echo json_encode($json);
?>

Open in new window

            $('.dx').select2({
                placeholder: 'Select dx',
                ajax: {
                    url: 'db_select.php',
                    dataType: 'json',
                    delay: 250,
                    processResults: function (data) {
                        return {
                            results: data
                        };
                    },
                    cache: true
                },
                templateResult: function(state) {
                    if (!state.id) // the ADD don't have id
                        return $("<div id='newstate' style='display:none;'><span><input type='text' id='textbox'></span><span><button id='save'>SAVE</button></span></div><b class='btn-select-add'>" + state.text + "</b>");
                    else
                        return state.text;
                }
            });

Open in new window

VICTOR OSORNIO

ASKER

Thanks, however, how can you add a new value to the database if you click on the Add button? It does not work

leakim971

            $('.dx').select2({
                placeholder: 'Select dx',
                ajax: {
                    url: 'db_select.php',
                    dataType: 'json',
                    delay: 250,
                    processResults: function (data) {
                        return {
                            results: data
                        };
                    },
                    cache: true
                },
                templateResult: function(state) {
                    if (!state.id) // the ADD don't have id
                        return $("<div id='newstate' style='display:none;'><span><input type='text' id='textbox'></span><span><button id='save'>SAVE</button></span></div><b class='btn-select-add'>" + state.text + "</b>");
                    else
                        return state.text;
                }
            });
            $(document).on("click", ".btn-select-add", function() {
                $("#newstate").show();
            });
            $(document).on("click", "#save", function() {
                var text = $("#textbox").val();
                $.post("db_add_new_value_to_database.php", { newtag: text }, function(newtag) { // wep
                    $("#newstate").hide();
                });
            });

Open in new window

VICTOR OSORNIO

ASKER

Hi leakim971thanks for your help!

After saving the value, how can the new value be returned to the selection?

You can also help me create a button to edit (save) and delete the existing values, within the same menu to make it easier for the user.

After clicking on new, save or delete the list update

Thanks, I'm trying to do it but I do not understand it.

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

VICTOR OSORNIO

ASKER

Thanks leakim971

leakim971

You welcome!

VICTOR OSORNIO