Display drop down selected option in php - php

I want to display a simple html drop down box and selected value want to print.
<select name="v">
<option value="fkt">Flipkart</option>
<option value="snd">Snapdeal</option>
</select>
When the flipkart is selected php echo should print "Flipkart".
When the snapdeal is selected php echo should print "Snapdeal".

Use jQuery
$(document).ready(function(){
$(".showDescriptionTextbox").val($(".Product").val());//to initialize
$(".showDescriptionDiv").text($(".Product").val());//to initialize
$(".Product").change(function(){
$(".showDescriptionTextbox").val($(".Product").val());
$(".showDescriptionDiv").text($(".Product").val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="v" class="Product" id="dropdown">
<option value="fkt">Flipkart</option>
<option value="snd">Snapdeal</option>
</select>
<br/>
<br/>
value in textarea: <input type="text" class="showDescriptionTextbox">
<div>
or you can display value in div: <span class="showDescriptionDiv"></span>
</div>

<select name="v" class='Product'>
<option value="fkt">Flipkart</option>
<option value="snd">Snapdeal</option>
</select>
<textarea class='showDescription'></textarea> <br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
$('.Product').change(function(){
var Product = $('.Product').val();
$(".showDescription").val(Product);
});
});
</script>

Check for it.
function shop(shop)
{
$("#show").val(shop);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select onchange="shop(this.value)">
<option value="Flipkart">Flipkart</option>
<option value="Snapdeal">Snapdeal</option>
</select>
<br/>
<br/>
<input type="text" id='show'>

Related

create variable of select option name instead of value in php

I have a select field and i am using my option value as a variable for some further work but i would like to create a second variable for the name of my option to use elsewhere.
This is my form
<form action="second.php" method="post" class="form">
Client:<select class="default" id="client" name="client" required>
<option value="" selected>Select Client</option>
<option value="clienta" name"Client A">Client A</option>
<option value="clientb" name "Client B">Client B</option>
</select>
</form>
In my second.php file i am getting the value for client like this:
$client = $_POST["client"];
Im not sure how to get the name for client instead of value.
i have tried:
$client_name = $_POST["client.name"];
$client_name = $_POST["client[name]"];
$client_name = $_POST["client(name)"];
But none of these work, they all come back blank when i want to return the name of the option e.g.
"Client A" instead of "clienta"
Does anyone know how i could get to the name field instead of the value from my select?
If you Need Both value and Name. the best way to archive is by combining them in value
<?php
if (isset($_POST['client']))
{
$pair = explode("/", $_POST["client"]);
$name = $pair[0];
$value = $pair[1];
print "Key: $name<br />";
print "Value: $value<br />";
}
?>
<form method="post" action="" name="form">
<select name="client">
<option value="clienta/Client A">Client A</option>
<option value="clientb/Client B">Client B</option>
</select>
<input name="submit" type="submit">
</form>
You don't need add attribute name <option> element:
<form action="second.php" method="post" class="form">
Client:<select multiple="multiple" class="default" id="client" name="client[]" required>
<option value="" selected>Select Client</option>
<option value="ClientA">Client A</option>
<option value="ClientB">Client B</option>
</select>
</form>
In php:
$clients = $_POST['client']; // will be array with selected options
Use Like Below Code
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal" action="#">
<div class="form-group">
<label class="control-label col-sm-2" for="client">Client:</label>
<div class="col-sm-6">
<select class="form-control" id="client" name="client" required>
<option value="" selected>Select Client</option>
<option value="clienta" name="Client A">Client A</option>
<option value="clientb" name="Client B">Client B</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" class="btn btn-default" id="submit_btn" name="submit_btn" value="Submit">
</div>
</div>
</form>
</body>
</html>
<script>
$('#submit_btn').on('click', function(){
var option_value = $('#client').val();
var option_name = $('#client').find('option:selected').attr('name');
$.ajax({
type:"post",
url:"second.php",
data:"option_value="+option_value+"&option_name="+option_name,
success: function(data){
console.log(data);
}
});
});
</script>
second.php
<?php
echo $option_value = $_POST['option_value'];
echo $option_name = $_POST['option_name'];
?>
<form action="second.php" method="post" class="form">
Client:<select class="default" id="client" data-name="client" required>
<option value="" selected>Select Client</option>
<option value="clienta" data-name="Client A">Client A</option>
<option value="clientb" data-name="Client B">Client B</option>
<input type="button" id ="button" value="send">
$(document).ready(function(){
$('#button').click(function(){
$.ajax({
type: 'POST',
url: 'second.php',
data: {'clinet_val':$('#client').val(),'clinet_name':$('#client').find(':selected').data('name')},
success:function(response)
{
console.log(response);
}
});
});
});

How to get the value id from datalist and display title?

How to get the value id from datalist and display title?
<input list="A" name="states" class="form-control states" placeholder="Select your state ..">
<datalist id="A" >
<?php
$sql_states = $DB_con->prepare("SELECT * FROM US_STATES ORDER BY ID ");
$sql_states->execute();
while($row_states=$sql_states->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row_states['ID'].$row_states['STATE_NAME'];?>" ></option>
<?php
}
?>
</datalist>
Make a custom attribute in options called data-id and you can get the id with help of jquery. lets the following code.
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<input list="browsers" id="input">
<datalist id="browsers">
<option data-id="op1" value="Internet Explorer">
<option data-id="op2" value="Firefox">
<option data-id="op3" value="Chrome">
<option data-id="op4" value="Opera">
<option data-id="op5" value="Safari">
</datalist>
<input type="text" id="selectedBrowser" />
<script type="text/javascript">
$(function(){
$('#input').change(function(){
var abc = $("#browsers option[value='" + $('#input').val() + "']").attr('data-id');
$('#selectedBrowser').val(abc)
alert(abc);
});
});
</script>

show div if one of the speciefied value selected in multiple select

Here i want the div to be shown if the specified value is present or selected and the div should be hide if the specified value is not selected.
here is my code
<select name="result" id="result" class="form-control select2" style="width: 70%" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="q">Q</option>
</select>
here is html
<div class="form-group" id="qaranty_count_full">
<label for="recipient-name" class="col-form-label">Count:</label>
<input type="number" required name="qaranty_count" class="form-control" id="qaranty_count" value="1">
</div>
Here is the script
<script type="text/javascript">
$(document).ready(function(){
$('#qaranty_count_full').hide();
$("#result").change(function(){
if($('option:selected', this).val()=='q')
{
$('#qaranty_count_full').show();
$('#qaranty_count').prop('required', true);
}
else
{
$('#qaranty_count_full').hide();
$('#qaranty_count').prop('required', false);
}
});
});
</script>
in this case if i choose q first time the div becomes visible and if i choose q as second or third value the div is not becoming visible,the div should remain visible if q is selected,hope understood my problem
You can try this code.
$(document).ready(function(){
$("#result").change(function(){
if($.inArray("q", $(this).val()) !== -1){
$('#qaranty_count_full').show();
$('#qaranty_count').prop('required', true);
}else{
$('#qaranty_count_full').hide();
$('#qaranty_count').prop('required', false);
}
});
});
Here is a codepen I have created.
https://codepen.io/smitraval27/pen/BrpPPN
You could do like this, using .each, and loop the selected array.
Stack snippet
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="result" id="result" class="form-control select2" style="width: 70%" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="q">Q</option>
</select>
<div class="form-group" id="qaranty_count_full">
<label for="recipient-name" class="col-form-label">Count:</label>
<input type="number" required name="qaranty_count" class="form-control" id="qaranty_count" value="1">
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#qaranty_count_full').hide();
$("#result").change(function(){
$('#qaranty_count_full').hide();
$('#qaranty_count').prop('required', false);
$('option:selected', this).each(function(i,sel){
if ($(sel).val() == 'q') {
$('#qaranty_count_full').show();
$('#qaranty_count').prop('required', true);
}
});
});
});
</script>

PHP AJAX Change value based on combobox

What I want is every time I have change the value from combobox (value from combobox is from database ) the input type will change too
here
<div class="col-md-12" >
<label>Charge</label>
<select id="name" name="name" class="form-control">
<?php
while ($reserve=mysqli_fetch_array($charge)) { ?>
<option value=" <?php echo $reserve['name']?>">
<?php echo $reserve['name']; ?>
</option><?php } ?>
</select>
</div>
<div class="col-md-12">
<br>
<label>Price</label>
<input type="number" class="form-control" id="Price" name="Price" disabled>
</div>
on database the name has a corresonding price for example chair has 200 price
what I want is every time I changed the combobox the value at inputtype will change too
I am not sure why you use ajax if you want to show option value . please check this code .
$('#name').change(function () {
var option_value = $(this).val();
$('#Price').val(option_value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="name" name="name">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="col-md-12">
<br>
<label>Price</label>
<input type="number" class="form-control" id="Price" name="Price" disabled>
</div>
</form>
so update select code using your this code
<select id="name" name="name" class="form-control">
<?php
while ($reserve=mysqli_fetch_array($charge)) { ?>
<option value=" <?php echo $reserve['name']?>">
<?php echo $reserve['name']; ?>
</option><?php } ?>
</select>
You need to add Jquery code to accomplish this task.
Your Html :
<div class="col-md-12" >
<label>Charge</label>
<select id="name" name="name" id="name" class="form-control">
<?php while ($reserve=mysqli_fetch_array($charge)) { ?>
<option value=" <?php echo $reserve['name']?>">
<?php echo $reserve['name']; ?>
</option><?php } ?>
</select>
</div>
<div class="col-md-12"><br>
<label>Price</label>
<input type="number" class="form-control" id="Price" name="Price" disabled>
</div>
Jquery Code :
$( document ).ready(function() {
$("#name").change(function () {
var value = this.value;
$('#Price').val(value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select id="name" name="name" class="form-control" onchange="callAjax(this)">
<?php
while ($reserve=mysqli_fetch_array($charge)) { ?>
<option value=" <?php echo $reserve['name']?>">
<?php echo $reserve['name']; ?>
</option><?php } ?>
</select>
<script>
function callAjax(val){
var selectedVal = val.value;
alert(selectedVal+" "+val)
$.ajax({
url: "<some_Url>", // Use PHP url from where you can get Data from Database
data: selectedVal,
success: function(result){
$("#Price").val(result);
}});
}
</script>

selectize.js not sending all selected option but only the last one

I have few select dropdown working nicely with selectize.js. On form post, it appears it only send the last option selected. So for example, if the user select's: A, B, C in the form post var_dump($_POST); only C appears. Same is the case with other select.
I went through the documentation and searched online but not able to rectify, I am sure its something really trivial but till I know, I don't know :(
Would greatly appreciate any help! Thank you!
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://brianreavis.github.io/selectize.js/js/selectize.js"></script>
<?php
if(isset($_POST["save"])){
echo '<pre>';
print_r($_POST);
echo '</pre>';
}
?>
<form action="" method="post">
<label>Select Class(s)</label>
<select multiple id="classname" name="classname[]" required class="form-control">
<option value="1">NUR</option>
<option value="2">KG</option>
<option value="3">PREP</option>
<option value="4">I</option>
<option value="5">II</option>
</select>
<label>Subjects</label>
<select multiple id="subjects" name="subjects[]" required class="form-control">
<option value="1">English</option>
<option value="2">EVS</option>
<option value="3">Maths</option>
<option value="4">Science</option>
<option value="5">Social</option>
</select>
<label>Examinations</label>
<select multiple="multiple" id="exams" name="exams[]" required="true" class="form-control">
<option value="1">Formative Assessment I</option>
<option value="2">Formative Assessment II</option>
<option value="3">Formative Assessment III</option>
<option value="4">Formative Assessment IV</option>
<option value="5">Annual</option>
</select>
<input type="submit" name="save" value="save" />
</form>
<script>
$(document).ready(function () {
$('#exams').selectize({
hideSelected: 'true'
});
$('#subjects').selectize({
hideSelected: 'true'
});
$('#classname').selectize({
hideSelected: 'true'
});
});
</script>

Categories