javascript - Opening modal from dropdown list to add client

Question

Linked to my prior post yesterday on how to have a value of a selector change the behaviour of my javascript, I run into trouble opening a modal window.

The idea is that if "add client" is selected from the first dropdown list, instead of dynamically populating the second dropdown list with "projects", a modal window pops-up to allow the user to add a client.

I have index3.php:

<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

include 'dbconnect.php';
?>

<script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript">

function fetch_select(val)
{   
  if (val != "add_client")
  {
    $.ajax({
     type: 'post',
     url: 'fetch_data.php',
     data: {
       get_option:val
     },
     success: function (response) {
      document.getElementById("projects").innerHTML=response; 
     } 
    });
  }
  else
  {
    //code to open modal below
    success: function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
    }
    //code to open modal above
  }
}
</script>

<?php
echo "<table>";
echo "<form action='index3.php method='post'>";
echo "<tr>";
echo "<td>";
    echo "<select name='client' id='client' onchange='fetch_select(this.value);'>"; 
    echo "<option>Name of Firm</option>"; 
    $select = mysqli_query($Verbinding,"SELECT client FROM clients GROUP by client");
    while ($row = mysqli_fetch_array($select)) 
        {
        echo '<option value="'.$row['client'].'">'.$row['client'].'</option>';
        }
    echo "<option value='add_client'>Add Client</option>";
    echo "</select>";
echo "</td>";
echo "<td>";
    echo "<select name='project' id='projects'>";
    echo "<option>Select Project</option>";             
    echo "</select>";
echo "</td>";
echo "</tr>";
echo "</table>";
echo "</form>";

echo "<div id='overlay'>";
    echo "<div>";
    echo "<p>Content of modal window.</p>";
    echo "</div>";
echo "</div>";

?>

The stylesheet modal.css works and is included through dbconnect.php and contains:

modal.css

#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
}

#overlay div {
     width:300px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;
}

Hope anyone can help, thanks and with kind regards, Paul

Answer 1

success: function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

is not doing anything. You've confused the "success" callback of the ajax call (which defines an option, containing a function to run later) with regular everyday code.

Assuming your modal has its id defined as "overlay", then you can just do:

else
{
  //code to open modal below
  el = document.getElementById("overlay");
  el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
  //code to open modal above
}