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.
Related
On button click event, I want to redirect to a specific section of page (a form in my case) and also put a focus on that section.
How do I achieve that focus?
<button class="btn btn-primary" id="addNewRequest" onclick="window.location='<?php echo Utility::getBaseUrl();?>leave/request/#addEmergencyLeave'">Add New Request</button>
Here's a form I want to point to and focus
<div>
<form id="addEmergencyLeave" method="POST" action="<?php echo Utility::getBaseUrl();?>addEmergencyLeave">
<select name="user_id" class="select2-container form-control" id="employee_list">
<option></option>
<option></option>
</select>
<select id="EmergencyLeaveType" class="select2-container form-control" name="EmergencyLeaveType">
<option></option>
<option value="2">Personal Leave</option>
<option value="1">Sick Leave</option>
<option value="6">Substitute/Others Leave</option>
<option value="7">Special Leave</option>
</select>
<select name="emergency_leave_length" class="select2-container form-control" id="emergency_leave_length">
<option></option>
<option value="0">Full Day</option>
<option value="1">First Half</option>
<option value="2">Second Half</option>
</select>
<div class="form-group">
<button class="btn btn-default" type="submit" value="" name="EmergencyLeaveSubmit">Submit and Approve Leave</button>
</div>
</form>
</div>
I have managed to redirect to that specific #addEmergencyLeave portion but couldn't put a focus on it.
Any help is very much appreciated. Thanks.
What do you mean, when saying focus a form? If you'd like to focus first select in your form just use #employee_list in your href.
Another way is to use an autofocus attribute on your select, but I think it's not exactly what you was looking for.
You can't focus a form, you can only focus a form element, and it is usually achieved using javascript.
Add this code into your HTML (before the closing </body> element), it will check if the hash #addEmergencyLeave is in the URL, and in this case it will focus on the form's first element:
<script>
function onload() {
if (location.href.indexOf('#addEmergencyLeave') != -1) {
document.getElementById('employee_list').focus();
}
}
window.addEventListener('load', onload, false);
</script>
addEventListener is the correct way to add an event listener on javascript, here it is the load event on the window element, usually if you use jQuery you will prefer the document ready event which is way faster.
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;
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
I have an HREF with various data-attributes (about 8) that come from a PHP query and loaded into a table. When you click the button, it takes the data-attributes via jQuery and sends them to a modal window, where I can use them in a form.
I can open the window and place the attributes into an INPUT field with no problem.
What I would like to do is place the attribute in the first OPTION in a SELECT dropdown.
Here is the button with the attributes:
<tr><td><a href='' class='modAccount'
data-modcode=".$row[partner_code]."
data-modname=\"".$row[partner_name]."\"
data-boiler=\"".$row[boilerplate]."\"
data-surcharges=\"".$row[no_new_surcharges]."\"
data-ccalog=\"".$row[cca_logistics]."\"
data-toggle='modal'>Click</a></td></tr>
I have quite a few data-attributes. I had to eliminate a few for this question.
Here is the jQuery used to retrieve the data-attributes and send them to a modal window, called modifyModal.
Here is the jQuery:
$(function()
{
$('.modAccount').click(function(e)
{
e.preventDefault();
$partnerCode = $(this).attr('data-modcode');
$partnerName = $(this).attr('data-modname');
$boiler = $(this).attr('data-boiler');
$surcharges = $(this).attr('data-surcharges');
$ccalog = $(this).attr('data-ccalog');
// the 5 below currently populate the INPUT fields for the ID's listed
$('#modpartnerCode').val($partnerCode);
$('#modpartnerName').val($partnerName);
$('#modplatform').val($platform); // <- should go to dropdown
$('#modboiler').val($boiler); // <- should go to dropdown
$('#modsurcharges').val($surcharges); // <- should go to dropdown
});
});
$(document).on("click", ".modAccount", function ()
{
$('#modifyModal').modal('show');
});
As you've probably read in the note above, I can send the attributes to the INPUT fields with their respective IDs.
I need to be able to populate the first OPTION of a dropdown SELECT field.
I don't think I need to show the MODAL window code. As stated, I can populate the INPUT fields using the ID's I listed.
How can I get the IDs to populate the dropdown SELECT first OPTION value?
Here is the code for the modal:
<div class="modal fade" id="modifyModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
</div>
<div class="modal-body">
<form role="form" action="api/modifyAcct.php" method="get" id="modAcctForm" name="modAcctForm">
<input readonly type="text" class="form-control" id="modpartnerName" name="modpartnerName" />
<input readonly type="text" class="form-control" id="modpartnerCode" name="modpartnerCode" />
<select class="form-control" id="modboiler" name="modboiler" />
<option value=""></option> // <- #modboiler goes here
<option value="Y">Yes</option>
<option value="N">No<option>
</select>
<select class="form-control" id="modsurcharges" name="modsurcharges" />
<option value=""></option> // <- #modsurcharges goes here
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
<select class="form-control" id="modplatform" name="modplatform" />
<option value=""></option> // <- #modplatform goes here
<option value="Y"></option>
<option value="N"></option>
</select>
</div>
</div>
</div>
</div>
Use jquery to select the first option and set the value.
$('#modplatform option:first').val($platform);
$('#modboiler option:first').val($boiler);
$('#modsurcharges option:first').val($surcharges);
I have a multi-select box which allows me to select multiple values and then add them to a second select box when I click on an arrow. Now this part works fine and I can select multiple values. However when I pass the values of the second select box to variable, to a PHP page the variable only shows the value of the last item in the list and not all of them.
Javascript Code
<script type="text/javascript">
$().ready(function() {
$('#add').click(function() {
return !$('#select1 option:selected').remove().appendTo('#select2');
});
$('#remove').click(function() {
return !$('#select2 option:selected').remove().appendTo('#select1');
});
});
</script>
HTML CODE
<form action="insert_email_visitor_list1.php" method="get" name="form1" target="_self" id="form1">
<select multiple id="select1" class="mulitiselect" name="select1">
<option value="1">Date/Time</option>
<option value="2">Company</option>
<option value="3">Location</option>
<option value="4">Nof Pages / Visit</option>
<option value="5">Traffic Source</option>
<option value="6">Search Term</option>
<option value="7">Report</option>
<option value="8">Classification</option>
<option value="9">Owner</option>
<option value="10">Phone</option>
<option value="11">Town</option>
<option value="12">City</option>
<option value="12">Country</option>
<option value="12">Hostname</option>
</select>
<img src="images/add-arrow.png" alt="" />
selected Columns
<img src="images/remove-arrow.png" alt="" />
<select multiple id="select2" name="select2" class="mulitiselect"></select>
<div class="bottom-img"><img src="images/popup-bottomimg.png" alt="" /></div>
<button>
<img src="images/info-icon.png" alt="" />
</button>
<input type="submit" name="send" id="send" value="Submit" />
</form>
PHP CODE
$select2 = $_GET['select2'];
echo "$select2";
Basically I am just after some advice as to if i am doing this the correct way?
Thanks
The field you pass to PHP must be named with a [], e.g. select2[]. Without that, PHP will treat the passed in values as a single value, and only the LAST value passed in would ever bee put into $_GET.
Using [] on the name tells PHP to treat it as a multi-valued field and it will create an array in $_GET, e.g.
$_GET['select2'][0] => 'first option selected';
$_GET['select2'][1] => 'second option selected';
etc...
Remember that the multiple parameter is a purely client-side thing, and PHP has no way of knowing that it was a multi-select. It willy simply see the equivalent of
select2=foo&select2=bar&select2=baz
arrive in the POST/GET, and select the last value passed in.