CODEWITHSUNDEEP
phphtmlmysql
majandkari
majandkari

Reputation: 9

Using <select> tag to post info from database without submit button

I have the following code in which I hoped to pull data from MySQL using HTML select/option tags that when selected automatically posts to the screen (without submit button).

In my database I have 3 columns: ID, term, and definition.

I want the Glossary Term to be posted in a heading and the definition to be posted in the expand/collapse area I created below. Eventually, all values in the $entries array will be under the column "terms" in my database, and I will have definitions for them as well in the "def" column. Here's the code:

    <?php //ex_col.php
require_once "functions.php";
echo "<!DOCTYPE html><html><head>" .
     "<title>GLOSSARY</title>" .
     "<link rel='stylesheet' type='text/css' href='ex_col.css'>" .
     "<link rel='stylesheet' type='text/css' href='styles.css'>";

$entries = array("Stamping", "Aemh", "Tossing", "Polish", "Golden Room, The", "Representative", "Soria", "Mala",
                 "Great Sorian Waterfall, The", "Krana Rite, The", "'Under Ee-o!'", "Indesance", "Nahx", "Mahx", "Frod Uto", 
                "Hezago", "Tezamo", "Oral Account, The", "Majik", "King's Line, The", "Royal Heirarchy, The", "Outcome, The", "Winding Down, The", 
                "God Spectrum, The", "God Plains, The", "God Complex, The", "Snoum", "Universal Hemisphere, The", "Eeah Ooah", "Stana", "Topi",
                "Gatee", "Utopians", "Yahdah", "Ooah", "Uto", "Saromo", "Jahep", "Holy Books", "Tribel", "Myo", "Reto", "Otherword", 
                "War of Ages, The", "Fathers, The", "Legend, The", "Scroll, The", "Piama", "Hectares", "Power of the Wind", "Son of the Tale, The", 
                "Leena", "Gatia-Ma", "Gesmoa", "Kasalia", "Resa-Mo", "Resa Piama", "Zesma", "Higher Structure, The", "Finish, The", "Season",
                "Calendar, The", "Void, The", "Gulf, The", "Partition, The", "Loadab, The", "Trahmen Galaxy, The", "Reading", "Ancients, The",
                "Auretchen", "Brado", "Battle of the Fathers", "'Select One'");
                sort($entries);


echo "<main><h2>GLOSSARY</h2>";

 echo '<form action="ex_col.php" method="POST" name="entries"><select name="term">';
    for($i = 0; $i < count($entries); $i++)
    {
              echo '<option value="'. ($i + 1) . '">' . $entries[$i] . '</option>';
    }


echo '</select></form>';

echo <<<_END


  <input id="toggle" type="checkbox" checked>
  <label for="toggle"></label>
  <div id="expand">
    <section>
      <p></p>
    </section>
  </div>
  <section>
    <h3>N</h3>

  </section>
</main>

_END;

?>
</body>
</html>

If it's of any relevance, here's my ex_col.css:

 @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
  font-family: "Open Sans", Arial;
  background: #CCC;
}
main {
  background: #EEE;
  width: 600px;
  margin: 20px auto;
  padding: 10px 0;
  box-shadow: 0 3px 5px rgba(0,0,0,0.3);
}
h2 {
  text-align: center;
}
p {
  font-size: 13px;
}
input {
  display: none;
  visibility: hidden;
}
label {
  display: block;
  padding: 0.5em;
  text-align: center;
  border-bottom: 1px solid #CCC;
  color: #666;
}
label:hover {
  color: #000;
}
label::before {
  font-family: Consolas, monaco, monospace;
  font-weight: bold;
  font-size: 15px;
  content: "+";
  vertical-align: text-top;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 3px;
  background: radial-gradient(ellipse at center, #CCC 50%, transparent 50%);
}
#expand {
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
 /* background: url(http://placekitten.com/g/600/300); */
  color: #FFF;
}
section {
  padding: 0 20px;
}
#toggle:checked ~ #expand {
  height: 250px;
}
#toggle:checked ~ label::before {
  content: "-";
}

I also have my functions.php with a successful connection, but how can I achieve the desired result?

Upvotes: 0

Views: 1138

Answers (1)

Jameel
Jameel

Reputation: 185

To display data when user selects an option from select drop down, you need to use little java-script.

You need to create an onchange DOM event and call a javascript function, and that function should fetch the data from database (using php file) and update the output. Here is a sample.

function myfun()
{
  valu = $('#myselect').val();
  $.get('phpfile.php?id=' + valu, function(data)
    {
      $('#resultdiv').html(data);
    }
    );
}
<select id="myselect" onchange="myfun()">
  <option value="1"> Some option </option>
  <option value="2"> Some option 2 </option>
</select>
<div id="resultdiv"></div>

So, the javascript function will be triggered when user selects an option.

Then, the selected option value is stored in variable named valu.

Then the selected value is passed to a php file through GET method (through url).

Then the php file will return a result (html snippet or text), which is stored in variable named data.

Then the result div is updated.

Upvotes: 2

Related Questions