How to change content in div, based on dropdown selection - php

I load my content from my DB with PHP, into my div.
I have a dropdown above it, where i should be able to sort out the content, meaning that when dropdown is chosen, the old content in the div is removed, and the new appears.
So how is it possible to "remove" the old content in the div, and get the new content based on the dropdown selection ?
This is what i got so far:
<div class="col-md-4">
<ul class="nav nav-tabs top_nav">
<li role="presentation" class="active">Edit</li>
<li role="presentation" class="inactive">
<!-- THE DROPDOWN THAT SHOULD SORT THE CONTENT BELOW -->
<!-- REMOVE OLD, AND GET NEW AFTER SELECTED -->
<select id="filter_type">
<option selected value="Alle">Alle</option>
<option value="Privat_Tale">Privat Tale</option>
<option value="Erhverv_Tale">Erhverv Tale</option>
<option value="Gamle">Gamle</option>
<option value="Privat_MBB">Privat MBB</option>
<option value="Erhverv_MBB">Erhverv MBB</option>
<option value="Familietele">Familietele</option>
<option value="Retention">Retention</option>
</select>
</li>
</ul>
<!-- LOAD THE CONTENT FROM DB, AND SHOW IT -->
<div class="abo_load" id="abo_load">
<?php
if (mysql_num_rows($sql_select_edit) > 0) {
while ($row = mysql_fetch_assoc($sql_select_edit)) {
?>
<div class="abo_box" id="abo_box">
<label class="abo_navn"><?php echo $row['abo_name']; ?></label>
<input type="hidden" value="<?php echo $row['category']; ?>" name="category" />
<form action="conn/delete.php" method="post">
<input type="hidden" value="<?php echo $row['id'];
?>" name="slet">
<input class="delete" value="Delete" type="submit" onclick="return confirm('Er du sikker??\nDet ville jo være ÆV med en Fejl 40!');">
</form>
<label class="edit">Edit</label>
<?php include("files/edit_list_content.php"); ?>
</div>
<?php
}
}
?>
</div>
</div>
EDIT:
I have already made it with JQuery, i load a php page, that gets the selected item, and then get the data from the DB. But the problem is, that when its loaded, i can't use any JQuery to manipulate with the new content. Like i have a edit label on the content with a JQuery hide function on. That function is working when i get the data though php from my DB, but not when i get the data though JQuery load. Thats why i want to load the data though php

You need to bind change event on your dropdown & based upon selection, fire an ajax request to get related content & then upon receiving update content inside DIV.
If you are using jQuery, Some useful functions would be:
Ajax: http://api.jquery.com/jquery.ajax/
Binding event: https://api.jquery.com/change/
A good example of implementation has been given here:
https://stackoverflow.com/a/4910803/2004910

Related

Filter data using dropdown menu using only php

I have a problem about a drop-down menu. I retrieved the data from my database in order to create the actual drop-down menu and now I want to use it for filtering purposes. I managed to get the "SEARCH" field working and actually filtering the results based on what the user typed, but I want also to allow the user to filter the data by selecting a specific town from the drop down menu. When the user chooses a town from the list I want to retrieve all the informations from the jobs table (jobname, jobtype, town, department, experiencelevel). I searched this website and I couldn't find any topic about doing this with only PHP code. I also included the connection with the database.
I tried to get it working with if(isset($_POST['dropbox'])) same as I did with the search field, but it just gives me no results every time I choose something.
Creating the drop-down code:
<div class="sect1">
<h2> Finding a job has never been so easy! </h2>
<div class="jobsearchbox">
<h3> Search for opportunities </h3>
<form action="jobsearch.php" method="POST">
<input type="text" name="indexjobsearch" placeholder="What job are you looking for?"/> <br>
<select name ='dropbox'>
<?php
while($rows = mysqli_fetch_assoc($result)){
$jobtypename = $rows['town'];
echo "<option hidden disabled selected value> Which town? </option>
<option name='selecttype' value='typejob'> $jobtypename </option>";
}
?>
</select><br>
<button type="submit" name="job-search"> Search now </button>
</form>
</div>
</div>
Actually the issue was, the value of your option tag was static(value='typejob') so in that case, no matter which option the user selected it was always going to return "typejob" instead of the value the user selected. To fix the problem you just have to change the value of your option tag from "typejob" to "$jobtypename" as i have done in the code below.
<div class="sect1">
<h2> Finding a job has never been so easy! </h2>
<div class="jobsearchbox">
<h3> Search for opportunities </h3>
<form action="jobsearch.php" method="POST">
<input type="text" name="indexjobsearch" placeholder="What job are you
looking for?"/> <br>
<select name ='dropbox'>
<?php
while($rows = mysqli_fetch_assoc($result)){
$jobtypename = $rows['town'];
echo "
<option hidden disabled selected value> Which town? </option>
<option name='selecttype' value='$jobtypename'> $jobtypename
</option>
";
}
?>
</select><br>
<button type="submit" name="job-search"> Search now </button>
</form>
</div>
</div>

Display PHP variable value onchange of HTML dropdown option

I have 3 PHP Variable values with me which i want to display depending on the HTML option selected from the drop down menu without refreshing the page.
<p>
<label for="package" class="formlbl">I want to Enroll In:</label>
<select name="package" id="package">
<option selected="selected" value=""></option>
<option value="full_package">Complete Package</option>
<option value="training">Only Training</option>
<option value="counselling">Only Counselling</option>
</select>
</p>
What i want is when he selects full package it should echo variable no 1, when he selects training it should echo variable no 2 and so on without refreshing the page.
Please tell me what i should do. The values and variable are working in the code.
Since PHP is only a server-side language once the response is sent to the client, php can no longer change anything on the page without a refresh.
You will need to use javascript in order to have content that changes without reloading a new page (also called dynamic content). You can do this really easily with a framework called jquery.
Add jquery to your webpage with this html line:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
and then use this html template for your dropdown:
<!-- make each item in your dropdown an <a> with an ID -->
<ul class="dropdown">
<li onclick="toggleResponse('comp')">Complete </li>
<li onclick="toggleResponse('pack')">Package Only </li>
<li onclick="toggleResponse('train')">Training Only </li>
<li onclick="toggleResponse('couns')">Counselling </li>
<ul>
<!-- give every response the same class, and individual IDs -->
<span class="response" id="comp"><?php echo var1 ?></span>
<span class="response" id="pack"><?php echo var2 ?></span>
<span class="response" id="train"><?php echo var3 ?></span>
<span class="response" id="couns"><?php echo var4 ?></span>
<style>
// let all the responses be hidden initially
.response {
display: none;
}
</style>
<script type="text/javascript">
function toggleResponse (id) {
// hide any responses that might be showing
$('.response').hide();
// show the response for this option
$('#' + id).show();
}
</script>
This is probably the quickest and easiest way to do it.
Fiddle example: https://jsfiddle.net/te36zy18/
HTML
<p>
<label for="package" class="formlbl">I want to Enroll In:</label>
<select name="package" id="package">
<option selected="selected" value=""></option>
<option value="full_package">Complete Package</option>
<option value="training">Only Training</option>
<option value="counselling">Only Counselling</option>
</select>
</p>
<div id="full_package" class="package"><?php echo full_package;?></div>
<div id="training" class="package"><?php echo training;?></div>
<div id="counselling" class="package"><?php echo counselling;?></div>
jQuery
$("#package").on("change", function(){
var package = $(this).val();
$(".package").hide()
$("#" + package).show();
});
CSS
.package {display: none'}

Get values of bootstrap dropdown in php

I have created a form with multiple fields like input type name, checkboxes and also a dropdown. My code for dropdown:
<div class="container">
<form action="selecttest.php" method="post">
<div class="dropdown">
<div class="dropdown-toggle somename1" data-toggle="dropdown"id="menu1"></div>
<ul class="dropdown-menu myclass numberom1" aria-labelledby="menu1" name="thenumbers">
<li value="one">One</li>
<li value="two">Two</li>
<li value="three">Three</li>
<li value="four">Four</li>
<li value="five">Five</li>
</ul>
</div>
<input type="submit" name ="submit"/>
I want to get the value of the selected <li> in the selecttest.php. The following code is not working:
$val = $_POST["thenumbers"];
echo "the Value selected is ".$val;
How can I get the value of the dropdown in the php page? There are other elements in the form as mentioned above so i cannot use jquery onclick event. And this is a non ajax form.
Thanks.
A dropdown menu is not the same as a select input.
Within a form, the syntax for a select input (like yours, within Bootstrap) would be:
<label for="select_1">Select list:</label>
<select class="form-control" id="select_1" name="thenumbers">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
</select>
So long as the select has an attribute name with value "thenumbers", and the select is within the form that is being submitted, you will be able to get the value of the selected element in PHP with:
$val = $_POST["thenumbers"];
echo "the Value selected is ".$val;
To use the Bootstrap dropdown as a faux select, you can use JavaScript. Here is an example with jQuery:
HTML
<!-- Create dropdown and add specific class '.thenumbers' to ul element -->
<div class="dropdown">
<div class="dropdown-toggle somename1" data-toggle="dropdown"id="menu1"></div>
<ul class="dropdown-menu myclass numberom1 thenumbers" aria-labelledby="menu1" name="thenumbers">
<li value="one">One</li>
<li value="two">Two</li>
<li value="three">Three</li>
<li value="four">Four</li>
<li value="five">Five</li>
</ul>
</div>
<!-- Create a hidden input -->
<input type='hidden' name='thenumbers'>
jQuery
$(function(){
//Listen for a click on any of the dropdown items
$(".thenumbers li").click(function(){
//Get the value
var value = $(this).attr("value");
//Put the retrieved value into the hidden input
$("input[name='thenumbers']").val(value);
});
});
That way (as long as the hidden input is within the form), when the form is submitted, the "thenumbers" input value will be the last selected dropdown option.
Your form is not submitting because there is no submit button.Try this code.
HTML CODE
<form action="selecttest.php" method="post">
<div class="dropdown" >
<select class="form-control" name="thenumbers">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
</select>
</div>
<input type="submit" name ="send"/>
</form>
PHP CODE
if(isset($_POST['send']))
{
$val = $_POST["thenumbers"];
echo "the Value selected is ".$val;
}
When using Input group-bootstrap, you can get values in the PHP page by writing your code like this:
HTML/Bootstrap
<select name = "thenumbers" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<option value ="one" name ="one">One</option>
<option value ="two" name ="two">Two</option>
<option value ="three" name ="three">Three</option>
</select>
<input class="form-control border-secondary py-2" name="searchterm" type="text" >
<div class="input-group-append">
<button class="btn btn-primary" name="submit" type="submit" value ="su bmit">
<i class="fa fa-search"></i>
</button>
</div>
PHP code:
<?php
if(isset($_POST['submit']) && !empty($_POST['searchterm'])){
if(isset($_POST['thenumbers']){
$val = $_POST['thenumbers'];
echo $val;
}
}
You can remove the form element and use hyperlinks with url query string parameters. When a user clicks an option a GET request is made to the PHP file.
<ul class="dropdown-menu myclass numberom1" aria-labelledby="menu1">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
In your PHP script, use $_GET to retrieve the query string variable.
$val = $_GET["thenumbers"];
echo "the Value selected is ".$val;

How can I get the values from a dropdown?

Im trying to get some values of my dropdown in php. Its in div, so how can I do that?
<div class="ui dropdown selection" tabindex="0" style="right: 120px;">
<div class="default text" name="dif" id="dif">Difficulty</div>
<i class="dropdown icon"></i>
<div class="menu" id="difficulty" name="difficulty">
<div class="item" value='0' data-value="0">Easy</div>
<div class="item" value='1' data-value="1">Normal</div>
<div class="item" value='2' data-value="2">Hardcore</div>
</div>
</div>
For example, if user select "Easy", I will get with php the value 0.
I tried:
$difficulty = ($_POST['difficulty']) ? $_POST['difficulty'] : '0';
You can access them in jQuery or Javascript:
http://robertnyman.com/2010/04/29/using-html5-custom-data-attributes-to-store-data-on-html-elements/
You could store the value in a hidden form and field and use .submit()
http://api.jquery.com/submit/
And then check for your post value. Divs do not store values, they are containers so adding 'value=0' will not work. But you can access attributes using JS or jQuery.
Edit: IGNORE BELOW I just saw your edit.
If you're using PHP, you can POST the data to another page.
<form action="process.php" method='post'>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit" />
</form>
Then on the process.php page you can access the value with the superglobal: $_POST['cars']
You can't get them from a div with just PHP. I'm guessing that there is some Javascript that is updating a hidden input somewhere on the page when the user selects an option from this stylized dropdown list. You'll need to find that hidden input, and that's where your data is coming from when the form is submitted.

Reload the page/form for refreshing the data when clicking the button

How to reload the page or form in PHP.
The scenario: I have two forms with the same design/gui. I named it main.php and process.php.
Both page also have dropdownlist, same items. The items in the dropdownlist are "Net 1" and "Net 2" and under of "Net 1" is "Bldg 1" and for "Net 2" is "Bldg 2". So in the main.php when I click the submit it will proceed to the process.php. Then process.php will display the under item of the item I choose in the dropdownlist in main.php.
My problem is:
When the user want to see the under item of "Net 2". I want is, in the page of button_process.php will just reload or refresh the data so that the user will see the items for "Net 2", what should I do?
Code for main.php:
<form action="process.php" method="post">
Advertisement Name: <input type="text" name="adName" size="50"><br/><br/>
Duration: <select id="duration"name="duration">
<option value="5 s" >5 s</option>
<option value="10 s" >10 s</option>
<option value="15 s" >15 s</option>
<option value="20 s" >20 s</option>
<option value="30 s" >30 s</option>
<option value="60 s" >60 s</option>
</select><br/><br/>
<b>Period</b> <br/>
From: <input type="text" id="datepickerfrom"name="from"> To: <input type="text" id="datepickerto"name="to">
<span id="span_select">
<select name="id">
<option value="" >- select -</option>
<?php
include 'connect.php';
$q = mysql_query("select fldNetname from tblnetwork");
while ($row1 = mysql_fetch_array($q))
{
echo "<option value='".$row1[fldNetname]."'>".$row1[fldNetname]."</option>";
}
?>
</select>
</span>
<input type="submit" name="pass" value="View Building/s">
</form>
Here's my Code for
process.php:
EDIT:
<form action="button_process.php" method="post">
echo "<div><input type='checkbox' class='checkall'> Check all</div>";
$all = mysql_query("SELECT fldBldgName FROM tblbuildings");
while ($row = mysql_fetch_array($all))
{
echo "<div><input type='checkbox' name='play[]' class='chk_boxes1' value='" . $row['fldBldgName']."'>";
echo $row['fldBldgName'];"</div>";
}
<input type="submit" name="pass" value="View Building/s">
</form>
Code for button_process.php
<?php
include("connect.php");
switch ($_POST['pass']) {
case 'View':
//here I want to reload the page.
break;
case 'Save':
echo "Add";
break;
}
?>
If reloading the page requires a user action, you will not be able to use PHP to reload the page, in this case, you would have to use Javascript.
If you want to reload a page using PHP, which will happen as the page load and before any html code is outputted, you can use this :
header('Location: '.$_SERVER['REQUEST_URI']);
If you want to refresh the page after the user has executed an action, you will need a javascript event method on an element (for exemple, onclick() on a button), and within the method you can use the following code :
window.location.reload();
If this isn't sufficient to answer your question, please provide more details as to what you want to do. There is a better way to do it than what you are doing, with more details we might be able to help you more.
A quick and dirty example of setting expanding menus on different pages. Build the menu items first then use a php script to set the parent menu item to have a active css style and have your css styles give the proper hide/show styles.
HTML
<div class="menu">
<div class="menuitem <?php echo $Page=="Net 1" ? "active" : "";?>">
<span>Net 1</span>
<div class="submenu">
<div class="submenuitem">
<span>Bldg 1</span>
</div>
</div>
</div>
</div> class="menuitem <?php echo $Page=="Net 2" ? "active" : "";?>">
<span>Net 2</span>
<div class="submenu">
<div class="submenuitem">
<span>Bldg 2</span>
</div>
</div>
</div>
</div>
CSS
.menuitem .submenu {
display:none;
}
.menuitem.active .submenu {
display:block;
}
where $Page is some php variable that holds the name of your menu item or however you want to tell your script which menu item the user is on.

Categories