I have code in which I try to echo the value of a select with onclick.
I have a select which is getting its data from a database. Now I want that the option I click on is echoed into the text box. But I fail.
Here is my code:
<?php
require_once('functions.php');
$cont = new pacra3();
$segments = $cont->getSegment();
?>
<!DOCTYPE html>
<html>
<head>
<title>Popup contact form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="js/jquery-ui.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
function get_main_sector(myid){
var id = document.getElementById("segment_id").value;
alert(id);
$(document).ready(function() {
$("#segment_id")({
onSelect: function(Text, inst) {
$("#dt_title input[type='text']").val($("#dt_title input[type='text']").attr('data-title')+Text);
}
})
});
}
</script>
</head>
<body>
<span id="spanSegmentData">
<select name="segment_id" id="segment_id" STYLE="width: 300px" onchange="get_main_sector(this.value)">
<option value="">[--Select Segment------]</option>
<?php
if(is_array($segments) && !empty($segments)) {
foreach($segments as $segment) {
echo '<option value="'.$segment->ID.'"';
echo '>';
echo $segment->title;
echo '</option>';
}
}
?>
</select>
</span>
<span id="dt_title">
<input name="title" type="text" value=" MB | <?php echo $segment->title;?> | " data-title="MB | <?php echo $segment->title;?> | " style="width:300px"/ readonly>
</span>
</body>
</html>
For that you don't need php. It's done client side.
Get value of select item :
$("#idoftheselect").val();
Get the option text selected of the select :
$("#idoftheselect").find(":selected").text();
Set a input values :
$("#idoftheinput").val("All your string content or var");
Here an example :
$(".myselect").change(function(){
var res = $(".myselect").find(":selected").map(function () {
if($(this).val()!="")
return $(this).text();
else
return "";
}).get().join(" ");
$("#inputid").val(res);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="myselect">
<option value="">Choose</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="myselect">
<option value="">Choose</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<input type="text" id="inputid" placeholder="Here selected item">
Updated code
$("#segment_id").change(function () {
var id = $(this).val();
$("#title").val($("#segment_id option:selected").text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="spanSegmentData">
<select name="segment_id" id="segment_id" STYLE="width: 300px" >
<option value="">[--Select Segment------]</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</span>
<span id="dt_title"> <input id="title" name="title" type="text" value=" "
data-title="MB" style="width:300px" readonly> </span>
If you are trying to get the selected item value in to the text box, completely remove this part of your code (I think this is useless)
MB | <?php echo $segment->title;?> | "data-title="MB | <?php echo $segment->title;?> |
for your answer=>
Remove the "onchange" event from select element:
<select name="segment_id" id="segment_id" STYLE="width: 300px">
Inside script (put this script area at the end of the code ... better that way)
<script>
$( document ).ready(function() {
$("#segment_id").on('change', function () {
var id = document.getElementById("segment_id").value;
alert(id);
$("#title").val($$("#segment_id option:selected").text());
});
});
</script>
the complete answer will be :
<?php
require_once('functions.php');
$cont = new pacra3();
$segments = $cont->getSegment();
?>
<!DOCTYPE html>
<html>
<head>
<title>Popup contact form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="js/jquery-ui.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
</head>
<!-- Body Starts Here -->
<body>
<span id="spanSegmentData">
<select name="segment_id" id="segment_id" STYLE="width: 300px">
<option value="">[--Select Segment------]</option>
<?php
if(is_array($segments) && !empty($segments))
{
foreach($segments as $segment)
{
echo '<option value="'.$segment->ID.'"';
echo '>';
echo $segment->title;
echo '</option>';
}
}
?>
</select>
</span>
<span id="dt_title"> <input name="title" type="text" value="" data-title="" style="width:300px"/ readonly> </span>
<script type="text/javascript">
$(document).ready(function () {
$("#segment_id").on('change', function () {
var id = document.getElementById("segment_id").value;
alert(id);
$("#title").val($$("#segment_id option:selected").text());
});
});
</script>
</body>
</html>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
</head>
<body>
<!-- Based on https://codepen.io/bahiirwa/pen/OjNYZb -->
<div class="container">
<h2>Demo dependent lists</h2>
<div class="row">
<div class="col-md-3">
<select class="form-control" name="select1" id="select1">
<option value="">--Please choose an option--</option>
<option value="1000">1000</option>
<option value="1500">1500</option>
<option value="1800">1800</option>
<option value="2000">2000</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" name="select2" id="select2">
<option value="1000" data-section1="1000">500</option>
<option value="1500" data-section1="1500">750</option>
<option value="1800" data-section1="1800">900</option>
<option value="2000" data-section1="2000">1000</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" name="select3" id="select3">
<option value="1000" data-section2="1000">250</option>
<option value="1500" data-section2="1000">450</option>
<option value="1800" data-section2="1000">500</option>
<option value="2000" data-section2="1000">750</option>
</select>
</div>
<div class="col-md-3">
<select class="form-control" name="select4" id="select4">
<option value="1000" data-section3="1000">250</option>
<option value="1500" data-section3="1000">450</option>
<option value="1800" data-section3="1000">500</option>
<option value="2000" data-section3="1000">750</option>
</select>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
//Reference: https://jsfiddle.net/fwv18zo1/
$(document).ready(function() {
var $order_name = $('#order-name');
var $output = $('#output');
var $select1 = $('#select1');
var $select2 = $('#select2');
var $select3 = $('#select3');
var $select4 = $('#select4');
var $options2 = $select2.find('option');
var $options3 = $select3.find('option');
var $options4 = $select4.find('option');
$select1.on('change', function(event) {
$select2.html(
$options2.filter(
function() {
return $(this).data('section1') == $select1[0].selectedOptions[0].value;
}
)
);
$select2.trigger('change');
}).trigger('change');
$select2.on('change', function(event) {
$select3.html(
$options3.filter(
function() {
return $(this).val() == $select2[0].selectedOptions[0].value;
}
)
);
}).trigger('change');
$select3.on('change', function(event) {
$select4.html(
$options4.filter(
function() {
return $(this).val() == $select3[0].selectedOptions[0].value;
}
)
);
}).trigger('change');
$select4.on('change', function(event) {
$select3.html(
$options4.filter(
function() {
// return $(this).data('section3') == $select4[0].selectedOptions[0].value;
return $(this).val() == $select4[0].selectedOptions[0].value;
}
)
);
}).trigger('change');
});
</script>
</html>
In this code, I am unable to do the thing which is happening in the second and third options, but not in the fourth option. I have created a demo dependent lists in which when user chooses the first option then the second option automatically comes with filtered data. Then again user have to select from the third option filtered data, but in the fourth option it doesn't automatically fetch the filtered data instead it's asking the user to select data from given options which the code doesn't want. For example, suppose I have chosen the first option 1000, then in the second option 500 comes automatically similarly in the third option but not in the fourth option. How can I code so that the fourth option also comes automatically filtered data.
I have form with 2 inputs, country name and country rating (0-5) and submit button to add country. When button is clicked it executes addCountry function.
I always get an error as message and I don't know why $_POST['country'] and $_POST['ratings'] are not showing.
Function looks like this:
<script>
function addCountry(){
var $country="country";
var $ratings="ratings";
$.ajax({
type:"POST",
url:"../actions/addCountry.php",
data:{ $country: "country", $ratings: "ratings" },
success:function(result){
alert(result);
}
});
}
</script>
Php script should get country name and rating, it looks like this:
<?php
if(isset($_POST['country']) &&
isset($_POST['ratings'])){
$country= $_POST['country'];
$ratings = $_POST['ratings'];
echo $country;
echo "is country. You rated it: ";
echo $ratings;
}
else{
echo "Error";
}
?>
Html looks like this:
<head>
<link rel="stylesheet" href="../styles/styles.css">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"src= "../actions/mapData.php"></script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery
3.1.1.min.js"></script>
</head>
<body>
<div id="map" style="width: 90%; height: 20%;"></div>
</body>
<body>
<form autocomplete="off" method="POST">
<div class="autocomplete" style="width:100%;">
<input id="country" type="text" name="country" placeholder="Country">
<label for="ratings"> Rate this country: </label>
<select id="ratings" name="ratings">
<option value="one"> 1 </option>
<option value="two"> 2 </option>
<option value="three"> 3 </option>
<option value="four"> 4 </option>
<option value="five"> 5 </option>
</select>
</div>
<input type="submit" id="add" value="Add Country" onclick="addCountry()"/>
</form>
The problem is with your script.
<script>
function addCountry(){
var $country="country";
var $ratings="ratings";
$.ajax({
type:"POST",
url:"../actions/addCountry.php",
data:{ country: $country, ratings: $ratings },
success:function(result){
alert(result);
}
});
}
</script>
The data passed to the page is in the form name : value and you were giving it wrongly.
Hello i have a dropdown which is fetching data from a database. Forget about the database, i have a text box in front of the dropdown select. The logic is if i type in the text the value should be selected automatically from the dropdown if the value typed in the text not matched with the values in the dropdown, then the user can select the dropdown. Any help would be much appreciated.
Here is my html code!
<div class="form-group">
<label class="col-sm-4 control-label">Scheme**</label>
<div class="col-sm-4">
<select class="form-control" name="scheme" id="scheme">
<?php
for ($column = 'A'; $column <= $lastcol; $column++) {
echo '<option value="' . $column . '">' . $worksheet->getCell($column . '1')->getValue() . '</option>';
}
?>
</select>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="txt_scheme" name="txt_scheme" placeholder="Or Type here">
</div>
</div>
In dropdown i m getting these values
QC code
Analyte
Assay Value
Assigned Value
STANDARDDEVIATION
ACCEPTABLEMIN
ACCEPTABLEMAX
Sample ID
Date
Try this code, then you can modified with your need.
$("#product").on("change keyup paste", function(){
var valuefound ='';
$("#platformid option").each(function(i){
if($(this).text().substring(0, 2).toLowerCase()==$("#product").val().substring(0, 2).toLowerCase() ){ valuefound = $(this).val(); } });
$('option:selected', 'select[name="platformid"]').removeAttr('selected'); $('#platformid option[value="' + valuefound + '"]').prop('selected', true); })
Working fiddle here https://jsfiddle.net/8xfqeb9y/
<label for="">Enter Value</label>
<input type="text" class="textVal">
<select name="" id="listItems">
</select>
var listItems = ["One","Two","Three","Four","Five","Six"];
for (var i = 0; i < listItems.length; i++) {
console.log(listItems[i]);
$("#listItems").append("<option>" + listItems[i] + "</option>")
}
$(".textVal").on("focusout",function(){
for (var i = 0; i < listItems.length; i++) {
console.log(listItems[i]);
if(listItems[i] == $(this).val()) {
$("#listItems").val($(this).val());
}
}
})
check now that values and texts are different and you can even select now by typing one
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#txtselect").keyup(function(){
$("#selbox > option").each(function() {
if($(this).text()==$("#txtselect").val())
{
$(this).attr('selected', 'selected');
}
});
});
});
</script>
</head>
<body>
<select id="selbox">
<option val="select">select</option>
<option val="123">one</option>
<option val="abc">two</option>
<option val="23sfd">three</option>
<option val="27345">four</option>
</select>
<input type="text" id="txtselect"/>
</body>
</html>
check this you will get solution run snippet and type "one"
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#txtselect").keyup(function(){
$("#selbox").val($("#txtselect").val());
});
});
</script>
</head>
<body>
<select id="selbox">
<option val="select">select</option>
<option val="one">one</option>
<option val="two">two</option>
<option val="three">three</option>
<option val="four">four</option>
</select>
<input type="text" id="txtselect"/>
</body>
</html>
Try this
<script type="text/javascript">
function getselected(elem)
{
var textvalue = $(elem).val();
if(textvalue != '')
{
$('select').removeAttr('disabled');
$('select option').removeAttr('selected');
$('select option').each(function(){
if ($(this).html().indexOf(textvalue) > -1)
{
$('select').val($(this).attr('value'));
}
});
}
else
{
$('select').val('');
$('select').attr('disabled','disabled');
}
}
</script>
<input type="text" name="name" value="" onkeydown="getselected(this)">
<select disabled="disabled">
<option value="">Select</option>
<option value="1">QC code</option>
<option value="2">Analyte</option>
<option value="3">Assay Value</option>
<option value="4">Assigned Value</option>
<option value="5">STANDARDDEVIATION</option>
<option value="6">ACCEPTABLEMIN</option>
<option value="7">ACCEPTABLEMAX</option>
<option value="8">Sample ID</option>
<option value="9">Date</option>
</select>
I have a script that uses a multidimensional array to give me convertions by reference :
var sizechanges = Array(
Array (6,8,10,12), //type A
Array(4,6,8,10)); //typeb
When a dropdown is changed in the html the value is obtained and a second dropdown is populated- code below (this works) and the log is as expected.
$(document).ready(function(){
$("#size0").on('change',function(){
var b0 = $('#size0').val();
var i = sizechanges[b0].length;
var blohtmml = ("<option>PLEASE SELECT</option>");
x = 0;
while ( x < i ) {
blohtmml += ("<option value='" + x + "'>" + sizechanges[b0][x] + "</option>") ;
console.log(sizechanges[b0][x]); works
x++;
}
$('#size1').html(blohtmml); //works
});
});
So the above works. Where I am having trouble is accessing the content added by html() method. My code is below:
$("#butt").on('click',function(){ //button id is #butt
var b1 = $('#size1').val();//size dropdown
var b2 = $('#size2').val();// country to dropdown
console.log(b1,b2); //nothing in log
var result = sizechanges[b2][b1];
console.log(result); //nothing in log
});
I can see that the source is not updated and was wondering how I can access the added content. I read many questions on append but can not find anything on html(). I guessing the solutions are similar but do not understand why the .on method is not finding the new HTML.
Lastly I am not getting any result for b2 which is a dropdown unaffected by the html insertion.
My HTML is added below for completeness.
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body style="background-color: lightblue;">
<form><label>I AM IN</LABEL><select id="size0" class="size0">
<option>PLEASE SELECT
</option>
<option value="1">
UK
</option>
<option value="0">
US
</option>
</select><br>
<label>size to convert </label>
<select id="size1" class="size1">
<option>PLEASE SELECT
</option>
</select><br>
<label>IS IN </label>
<select class="size2" id="size23">
<option>PLEASE SELECT</option>
<option value="1"> UK</option>
<option value="0"> US</option>
</select><br>
<button id="butt" type="button" >GET SIZE</button>
</form>
<div id="blobla"></div>
<div id="blobla2"></div>
</body>
</html>
Any help solving my problem will be greatly appreciated
Change:
<select class="size2" id="size23">`
to:
<select class="size2" id="size2">
And you might have better luck.
$(document).ready(function(){
var sizechanges = Array(
Array (6,8,10,12), //type A
Array(4,6,8,10)); //typeb
$("#size0").on('change',function(){
var b0 = $('#size0').val();
var i = sizechanges[b0].length;
var blohtmml = ("<option>PLEASE SELECT</option>");
x = 0;
while ( x < i ) {
blohtmml += ("<option value='" + x + "'>" + sizechanges[b0][x] + "</option>") ;
console.log(sizechanges[b0][x]); //works
x++;
}
$('#size1').html(blohtmml); //works
});
$("#butt").on('click',function(){ //button id is #butt
var b1 = $('#size1').val();//size dropdown
var b2 = $('#size2').val();// country to dropdown
console.log(b1,b2); //nothing in log
var result = sizechanges[b2][b1];
console.log(result); //nothing in log
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<form><label>I AM IN</LABEL><select id="size0" class="size0">
<option>PLEASE SELECT
</option>
<option value="1">
UK
</option>
<option value="0">
US
</option>
</select><br>
<label>size to convert </label>
<select id="size1" class="size1">
<option>PLEASE SELECT
</option>
</select><br>
<label>IS IN </label>
<select class="size2" id="size2">
<option>PLEASE SELECT</option>
<option value="1"> UK</option>
<option value="0"> US</option>
</select><br>
<button id="butt" type="button" >GET SIZE</button>
</form>
<div id="blobla"></div>
<div id="blobla2"></div>
I want to click on a image and redirect to a url that has the subdomain $platform and filter $search_filter. This is what i have so far. Help please?
<head>
<script>
function search_platform() {
var $platform=document.getElementById("search_platform").value;
var $search_filter=document.getElementById("search_filter").value;
if ($platform !== '0') {
document.location.href='http://www.' + $platform + 'domain.com/index.php?filter_name=' + $search_filter;
}
}
</script>
</head>
<body>
<select id="search_platform">
<option value="0" selected="selected"><?php echo 'Select Platform'; ?></option>
<option value="platform1">Platform 1</option>
<option value="platform1">Platform 1</option>
<option value="platform1">Platform 1</option>
</select>
<input type="text" name="filter_name"/>
<img src="test.png" width="264" height="110" onclick="search_platform()"/>
</body>
Try this :
<head>
<script>
function search_platform() {
//Removed $ from variables name
var platform=document.getElementById("search_platform").value;
var search_filter=document.getElementById("search_filter").value;
if (platform !== '0') {
document.location.href='http://www.' + platform + 'domain.com/index.php?filter_name=' + search_filter;
}
}
</script>
</head>
<body>
<select id="search_platform">
<option value="0" selected="selected"><?php echo 'Select Platform'; ?></option>
<option value="platform1">Platform 1</option>
<option value="platform1">Platform 1</option>
<option value="platform1">Platform 1</option>
</select>
<input type="text" name="filter_name" id="search_filter"/> <!-- Added id -->
<img src="test.png" width="264" height="110" onclick="search_platform()"/>
</body>
You're missing the ID in the input field:
<input type="text" name="filter_name" id="search_filter"/>
I think your issue is getting value from select element. try below
<script>
function search_platform() {
var $platform=document.getElementById("search_platform").value;
var $selectedplatform = platform.options[platform.selectedIndex].value;
var $search_filter=document.getElementById("search_filter").value;
if ($platform !== '0') {
document.location.href='http://www.' + $selectedplatform + 'domain.com/index.php?filter_name=' + $search_filter;
}
}
</script>
I try to modify all your code to make it more standard.
<head>
<script type="text/javascript">
function search_platform() {
var platform=document.getElementById("search_platform").value;
var search_filter=document.getElementById("search_filter").value;
if (platform !== '0') {
document.location.href='http://www.' + platform + '.domain.com/index.php?filter_name=' + search_filter;
}
}
</script>
</head>
<body>
<select id="search_platform">
<option value="0" selected="selected"><?php echo 'Select Platform'; ?></option>
<option value="1mmtform1">Platform 1</option>
<option value="platform2">Platform 2</option>
<option value="platform3">Platform 3</option>
</select>
<input type="text" name="filter_name" id="search_filter"/>
<img src="test.png" width="264" height="110" onclick="javascript:search_platform()" />
</body>