I have a select input for categories that set a list (category_id + category_value) from the database using the class categories_list. Now I want to set the value of selected category using get method when a user click on a specific category from another page. My get method is working fine, but the select input doesn't fetch the get variable with php echo.
I have tried to use instead jquery $("select[name='categories_id']").val(); but it works only if i add a clicked event that i don't want it .
<div class="control-group">
<label class="control-label alignL" for="categories_id">Catégories </label>
<select id="categories_id" class="form-control common_selector categories_list" name="categories_id" value" <?php if (isset($_GET["cat"])) { echo $categorytag; } ?>" >
</select>
</div>
Please consider the following example.
<div class="control-group">
<label class="control-label alignL" for="categories_id">Catégories </label>
<select id="categories_id" class="form-control common_selector categories_list" name="categories_id">
<option value="1001">Cat 1</option>
<option value="1002">Cat 2</option>
<option value="1003" selected>Cat 3</option>
<option value="1004">Cat 4</option>
<option value="1005">Cat 5</option>
</select>
</div>
The <select> element does not have a value attribute.
Attribute
Description
autofocus
Specifies that the drop-down list should automatically get focus when the page loads
disabled
Specifies that a drop-down list should be disabled
form
Defines which form the drop-down list belongs to
multiple
Specifies that multiple options can be selected at once
name
Defines a name for the drop-down list
required
Specifies that the user is required to select a value before submitting the form
size
Defines the number of visible options in a drop-down list
See More: https://www.w3schools.com/tags/tag_select.asp
You can get the value of the element when an <option> has been selected.
$(function() {
console.log("Current Value", $("#categories_id").val());
$("#categories_id").change(function() {
console.log("Selected", $(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="control-group">
<label class="control-label alignL" for="categories_id">Catégories </label>
<select id="categories_id" class="form-control common_selector categories_list" name="categories_id">
<option value="1001">Cat 1</option>
<option value="1002">Cat 2</option>
<option value="1003" selected>Cat 3</option>
<option value="1004">Cat 4</option>
<option value="1005">Cat 5</option>
</select>
</div>
You will want to adjust your PHP to build the Select element and Options properly before sending it to the browser. Then, if you are performing some action via JavaScript or jQuery, it will be done Client side.
Related
I have a simple web app made with CodeIgniter 3 and I have created a simple dropdown menu where the user can select from a variety of options from the database.
Here is the code:
<?php
$sql4 = "SELECT DISTINCT (color), id FROM porta_color ORDER BY color ASC ";
$result4 = $conn->query($sql4);
?>
<select id="color" class="form-control selectpicker" data-size="10" data-live-search="true" data-style="btn-white" name="k_color" required >
<?php
if ($result4->num_rows > 0)
{
while($row4 = $result4->fetch_assoc())
{
if($row4['id']>0)
{?>
<option value="<?=$row4['id'];?>"><?=$row4['color'];?></option>
<?php }}}?>
</select>
Now what I want to do is based on the selection from the user to pass the value to a PHP variable.
Any idea how I might do that?
Wrap your select into form tags
and add submit or button element
<form>
<select id="color" class="form-control selectpicker" data-size="10" data-live-search="true" data-style="btn-white" name="k_color" required >
<option value="color1">Color 1</option>
<option value="color2">Color 2</option>
<option value="color3">Color 3</option>
</select>
<input type="submit" values="Choose color">
<button>Another way for submit form</button>
</form>
But true way is using framework abilities
I have a question about the "select" function. I have two input "select" functions. When I select the first input option, then I select the second input option. If I go back to the first input option to change other options, how can the second one automatically turn into "Please Select"word?
Below is my coding:
<label for="cp8" class="control-label col-lg-4">Merchant</label>
<div class="col-lg-5">
<select class="form-control required" id="branch_id3" name="branch_id3">
<option value="" selected>Please Select</option>
<!--<option value="0" selected>All</option>-->
<?php
$sql_branch = 'SELECT * FROM merchant_list;';
$arr_branch = db_conn_select($sql_branch);
foreach ($arr_branch as $rs_branch) {
echo '<option value="' . $rs_branch['id'] . '">' . $rs_branch['shop_name'] . '</option>';
}
?>
</select>
</div><br><br><br>
<label for="cp8" class="control-label col-lg-4">Merchant Types</label>
<div class="col-lg-5">
<select class="form-control required" id="merchant_type" name="merchant_type">
<option value="" selected>Please Select</option>
<option value="1">Event Sponsored</option>
<option value="2">Normal Merchant</option>
</select>
</div><br><br><br>
Below is my output picture:
Output
For example:
First I choose the Merchant option is "PALVO", then I choose the Merchant Types is "Event Sponsored". After that, if I want go back the Merchant to change other option, the Merchant Types will automatically turn to "Please Select" option. So that, my question is how to automatically make Merchant Types turn to "Please Select" option? Thanks for helping.
i hope this is what you looking for
$('#option').change(function(){
$('#type').val(0);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="option">
<option>Please Select</option>
<option>Option</option>
<option>Option1</option>
<option>Option2</option>
</select>
<select id="type">
<option value="0">Please Select</option>
<option>Type</option>
<option>Type1</option>
<option>Type2</option>
</select>
You can use jquery change for manipulating DOM element.
If you do not want to disable second select you can remove diabled attribute from select tag.
And also remove this from jquery code $("#select2").removeAttr('disabled');
$(document).ready(function(){
$("#select1").on('change',function(){
$("#select2").val('Please Select');
$("#select2").removeAttr('disabled');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Select Value:
<select id="select1">
<option>Please Select</option>
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>
<select id="select2" disabled>
<option>Please Select</option>
<option>value1</option>
<option>value2</option>
<option>value3</option>
</select>
Use .val() on select DOM , and give option's value it will be selected.
With this check what is selected in first select then use .val()
$("#events").click(function(){
if($("#events option:selected").text() == "Reset First Select"){
$("#merchants").val('Please Select');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Merchants:
<select id="merchants">
<option>Please Select</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select><br>
Event:
<select id="events">
<option>Reset First Select</option>
<option selected>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select><br>
EDIT:
I have just added that when in second option reset first option will be selected it will select first
I have issues posting my select option values from html form to php back-end
Here are my codes:
<form action="submit.php" method="POST">
<select name="approver" class="form-control" autofocus>
<option selected disabled value="0">— Select Approver —</option>
<option selected disabled value="1">User A</option>
<option selected disabled value="2">User B</option>
</select>
</form>
submit.php:
$approver = mysqli_real_escape_string($conn, $_POST['approver']);
Is there a way for php to receive the value of the option, eg. 1, instead of the text inside the option tag?
Thanks in advance
"selected disabled" attributes should be used for the first option(generally which is not really an option for the user to select). It is used so that the user cannot choose the first option again after changing the option. Remove the "selected disabled" attributes from other options.
<select name="approver" class="form-control" autofocus>
<option selected disabled value="0">— Select Approver —</option>
<option value="1">User A</option>
<option value="2">User B</option>
</select>
Hey guys I'm using the Laravel framework. I fetched data from my database and populated my drop down list like this.
<select class="form-control" id="username" name="username">
<option value="" selected>Select User</option>
#foreach($getUsers as $list)
<option value="{{$list->id}}" >{{$list->name}}</option>
#endforeach
</select>
I want to be able to click one of the options in the drop down list and send the value through a url (preferably using href) and reload the page.
You could use a simple javascript function bound to the onchange event of the select menu like this.
<script>
function offyoupop(e){
location.search='username='+e.target.value;
}
</script>
<select name='username' id='username' class='form-control' onchange='offyoupop(event)'>
<option>Please select
<option value='1'>One
<option value='2'>Two
<option value='3'>Three
<option value='4'>Four
<option value='5'>Five
</select>
I have 8 select fields with different options in each and im trying to pass each selected value into a querystring but im not sure how this work.
<form method="post">
<fieldset>
<legend class="hidden">Choose your options</legend>
<ol>
<li><label>option 1</label>
<select>
<option value="">Select one..</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</li>
<li><label>option 2</label>
<select>
<option value="">Select one..</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</li>
<li><label>option 3</label>
<select>
<option value="">Select one..</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</li>
</ol>
</fieldset>
</form>
so ive got 8 of these and I want to select a value from each one and then press submit which will then bring up a best match from the values passed...
Read about Dealing with Forms.
You must give the form elements a name, e.g.:
<li><label>option 1</label>
<select name="option1">
<option value="">Select one..</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</li>
Then you can access the value via $_POST['option1'].
Note: As you specified POST as form method, the data is not sent via the URL to your PHP script, but is contained in the request body. If you want to have the data in the URL (as querystring) you have to change the method to GET.
I'm nut sure exactly what you're looking for, but if you put a name=".." attribute into your select tags, they'll end up into the querystring?
You are missing NAME argument from the SELECT TAG
Once you have this, options will be received by the php script in $_POST array.
So, for example:
<SELECT NAME="mySelect">
<OPTION VALUE="V1">Value 1</OPTION>
<OPTION VALUE="V2">Value 2</OPTION>
...
</SELECT>
You would read the value in your php script from $_POST['mySelect']
Also, keep in mind that you need to enter ACTION tag for your form, defining the php script that will execute once you send your form.
Each <select> needs to have a name, for example, the first one could be <select name="firstSelection">. When you click submit, the browser sends something like firstSelection=1&secondSelection=&thirdSelection=1.