Dropdown search list can't get variable to equal selected option

Question

I have this dropdown list that shows the name of different conferences. I can select a certain conference, but as I select the conference, I want to add a submit button so I can get a variable for the conference that was selected.

I'm new with databases, but I have tried adding a form, but I can't seem to get it to work inside of the php code. The database connects and shows all of the conferences just fine, I just can't figure out how to get a variable equal to the selected option.

<!DOCTYPE HTML>  
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body>  

<?php
//Declare variables
$db_host = "";
$db_username = "";
$db_pass = "";
$db_name = "";
$db_table = "";
//Connect to phpMyAdmin
$con=mysqli_connect("$db_host","$db_username","$db_pass","$db_name");

// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

mysqli_select_db($con,"$db_name") or die ("No database");

$result=mysqli_query($con,"select * From conferenceList");

echo "<select id='searchddl'>";
echo "<option> -- Search Conference Name -- </option>";
while($row=mysqli_fetch_array($result))
{
    echo "<option>$row[name]</option>";
}
echo "</select>";


//Close phpMyAdmin
mysqli_close($con);
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css" />

<script>
    $("#searchddl").chosen();
</script>

</body>
</html>

I expected a variable to equal the same thing that is selected. So I want my variable to equal whatever this is echo "<option>$row[name]</option>"; enter image description here

The form either needs to be submitted or you need to add some javascript/ajax to send the data to PHP. There's a good ajax solution here: https://stackoverflow.com/questions/16616250/form-submit-with-ajax-passing-form-data-to-php-without-page-refresh — tshimkus, May 21 '19 at 23:27
Can you clarify something? Are you trying to take the value from the select dropdown and send it to a new query? That was my original assumption but I want to make sure. — tshimkus, May 22 '19 at 00:25

tshimkus · Answer 1 · 2019-05-22T00:45:29.757

0

<script>
    $( "#searchddl" ).chosen().change(function() {  // execute query every time select option changes
    var val = $( "#searchddl" ).chosen().val();  // get value from selected option
    $.ajax({
        url: "myphpfile.php", // call external PHP file for query execution
        type: "get", 
        data: { 
            myselectvalue: val // passes value as GET parameter (?=myselectvalue=val) 
        },
        success: function(response) {
            tmp = response // store variable from PHP output
            // do Something

        },
        error: function(xhr) {
             // do Something else
        }
    });
</script>

In your a separate PHP file you can get the value from the get variable:

if (isset($_GET['myselectvalue']) && strlen($_GET['myselectvalue']) { // make sure it's populated

    $valueFromForm = $_GET['myselectvalue'];

    // Execute queries, echo results, etc.

}

I used GET in this solution but POST would work as well. You would just need to change type: "get" to type: "post" in the ajax call and $_GET[] to $_POST[] in the PHP.

edited May 22 '19 at 00:45

answered May 21 '19 at 23:45

tshimkus

1,173
2
17
24

I used your code, but the search feature disappeared and it looks like this now https://imgur.com/Rxhw1UV and I also added echo $valueFromForm; under // Execute queries, echo results, etc. from the second file and got no results. is there anyway to get the variable within the same file and not have to use another file? – Sam R May 22 '19 at 00:14
Yes, if you create a complete form with opening and closing form tags, and either a submit input or using jquery to submit the form. A form's default action is the same page and the default method is get. When you submit the form it will reload the page and send the data via get (or post if you change the form method). – tshimkus May 22 '19 at 00:20
I didn't realize the `.change()` method would affect the search box. I suppose it could also have the unintended consequence of executing the ajax on each character added to the search box. – tshimkus May 22 '19 at 00:31
I also missed the jQuery Chosen plugin. I made a small update to the code to include the `.chosen()` method to the selectors to see if that makes any difference. I have not worked with that plugin before so I don't know it's nuances. – tshimkus May 22 '19 at 00:47

Dropdown search list can't get variable to equal selected option

1 Answers1