How can I have to values at once from select options through JavaScript function?
Here is my code:
<select name="ledger" id="ledger" onchange="setDebit(this.value)" required>
<option value="" >Select</option>
<?php
$ledgerResult = $this->db->query('SELECT * FROM ledger WHERE account_type = "Creditors" ORDER BY name');
$ledgerData = $ledgerResult->result();
for ($c = 0; $c < count($ledgerData); ++$c) {
$ledger_id = $ledgerData[$c]->id;
$ledger_name = $ledgerData[$c]->name;
$ledger_credit = $ledgerData[$c]->credit; ?>
<option value="<?php echo $ledger_id;?>"><?php echo $ledger_name;?></option>
}
</select>
<script>
function setDebit(ele){
document.getElementById("set_debit").value = ele;
}
</script>
I am getting $ledger_id and sending this value through setDebit() to the script. But what I need is to send $ledger_credit. I can do it by setting it as option value instead of $ledger_id; but I also need value of selectas $ledger_id.
How can I set $ledger_id as option value, but send $ledger_credit through setDebit(this.value)?
<option value="<?php echo $ledger_id.":".$ledger_credit;?>"><?php echo $ledger_name;?></option>
function setDebit(ele){
var Value = document.getElementById("ledger").val();
var Parts = Value.split(":");
var LedgerID = Parts[0];
var LedgerCredit = Parts[1];
}
If you are not using jquery.
<option value="<?php echo $ledger_id."||".$ledger_credit; ?><?php echo $ledger_name;?> </option>
<script>
function setDebit(){
var details = document.getElementById("ledger").value;
var allData = details.split("||");
var ledger_id = allData[0];
var ledger_credit = allData[1];
console.log(ledger_id);
console.log(ledger_credit);
}
</script>
You have to set the attribute multiple in the HTML part:
http://www.w3schools.com/tags/att_select_multiple.asp
After that you can have a look at this question for further info:
How to get all selected values of a multiple select box using JavaScript?
You can add an atribute data-credit in yours options
<option value="<?php echo $ledger_id;?>" data-credit="<?php echo $ledger_credit;?>"><?php echo $ledger_name;?></option>
And in the setDebit function:
var ledger_credit = $('option:selected', "#ledger").data('credit');
You must use jquery in this solution
Related
I made a similar question yesterday, but couldn't come up with a solution since then, so i went and refined my code a bit to a logic that seemed more plausible to work.
However, it didn't.
I want to have only a couple of options in a combobox available to the user, depending on what option was pre-selected. Here is the Combobox:
<SELECT class=caixas id=cbostatus style="WIDTH: 3cm;" tabIndex=25 name=cbostatus onchange= "StatusTest(); hideField();" >
<option selected></option>
<option value="Planned" id="optionPlanned" <?php if ($row['task_status']=='Planned') echo 'selected="selected"';?>>Planned</option>
<option value="Started" id="Started" <?php if ($row['task_status']=='Started') echo 'selected="selected"';?>>Started</option>
<option value="Available" id="Available" <?php if ($row['task_status']=='Available') echo 'selected="selected"';?>>Available</option>
<option value="Finished" id="Finished" <?php if ($row['task_status']=='Finished') echo 'selected="selected"';?>>Finished</option>
<option value="Impeded" id="Impeded" <?php if ($row['task_status']=='Impeded') echo 'selected="selected"';?>>Impeded</option>
</SELECT>
For example, when "Planned" is selected, the only other available option should be "Started". So i went and made a Javascript, for a Onchange Event, like so:
function hideField(){
var e = document.getElementById("cbostatus");
var strUser = e.options[e.selectedIndex].value;
if( strUser == 'Planned' ) {
document.getElementById("Impeded").style.display = 'none';
document.getElementById("Available").style.display = 'none';
document.getElementById("Finished").style.display = 'none';
}
}
And for some reason, it is wrong. Any ideas?
(Also, i'd aprecciate if you didn't suggest using Jquery, as i have never used before and don't really have time to learn for this)
I suggest you start with an empty select, and add the options dynamically.
var e=document.getElementById("cbostatus");
var strUser = 'Planned'; // get this value from somewhere, maybe a hidden field
if( strUser == 'Planned' ) {
e.options[e.length]=new Option("Planned", "optionPlanned", true, true);
e.options[e.length]=new Option("Started", "Started");
} else if ..
Use this code.
Html
<select class=caixas id=cbostatus style="WIDTH: 3cm;" tabIndex=25 name=cbostatus>
<option selected></option>
</select>
jQuery
var insertoption = "";
first add options in ready function
$(document).ready(function()
{
insertoption += "<option value='Planned' id='Planned'>Planned</option>";
insertoption += "<option value='Started' id='Started'>Started</option>";
insertoption += "<option value='Available' id='Available'>Available</option>";
insertoption += "<option value='Finished' id='Finished'>Finished</option>";
insertoption += "<option value='Impeded' id='Impeded'>Impeded</option>";
$("#cbostatus").append(insertoption);
insertoption = "";
});
This is create your option
and now create onchange function
$("#cbostatus").on("change",function()
{
if($("#cbostatus").val() == "Planned")
{
$("#cbostatus").children().remove();
insertoption = "<option value='Started' id='Started'>Started</option>";
$("#cbostatus").append(insertoption);
}
});
I am new in PHP and JS. This function use to get only one vales.
In my program dept1 values are 5 and 1st value select onchange in 1, 2nd select onchange in 2, 3rd value select onchange in 3. so any idea to give code for switch case.
<script>
function deptchange()
{
var x = document.getElementById("dept1").value;
document.getElementById("dept2").value = 2;
}
</script>
<input class="form-last-name form-control" id= 'dept1'
onchange="deptchange()" list="dept" value='<?php echo $dept; ?>' name="department"/>
<datalist id="dept">
<option>
<?php
include 'dblayer.php';
$query = mysqli_query($mysqli,"SELECT department FROM department");
while($row=mysqli_fetch_array($query))
{
echo "<option value='". $row['department']."'>".$row['department'] .'</option>';
}
?>
</option>
</datalist>
<input type="hidden" id='dept2' value=' 'class="form-first-name form-control" />
You can use array with push, So after finished your 5 selection all 5 values push to values array.
<script>
var values = [];
function deptchange()
{
values.push(document.getElementById("dept1").value);
}
</script>
To get the stored elements from array.
var firstElement = values[0];
datalist's option should have value attribute. and there is no need to put closing tag. it's different from select's option.
<datalist id="dept">
<?php
include 'dblayer.php';
$query = mysqli_query($mysqli,"SELECT department FROM department");
while($row=mysqli_fetch_array($query)) {
echo "<option value='". $row['department']."'>';
}
?>
</datalist>
This is my main page where I select a option field.
opt1.php:
<html>
<div>
<select id="mn" onchange = "show(this.id)" >
<option value="3">hello</option>
<option value="4">hiii</option>
<option value="5">byee</option>
</select>
</div>
<?php include 'OPT2.php'?>
</html>
This is my javascript where I get the value from above select and pass to opt2.php
function show(s1){
var s1 = document.getElementById(s1);
var ch = s1.value;
$.post('OPT2.php', {variable: ch});
}
This is my opt2.php page to display the sub select.
<?php
$con = #$_POST['ch'];
echo "SELECT MODEL:<select id=sb name=sb >";
echo "<option name=$con>$con</option>";
echo "</select>";
?>
Actually this is not generating the intended result.
Is there any logical or processing mistake?
you need to make ajax call to opt2.php to get that data
so your opt1.php should look like
<html>
<div>
<select id="s1" onchange = "show(this.id)" >
<option value="3">hello</option>
<option value="4">hiii</option>
<option value="5">byee</option>
</select>
<select id="s2">
<option>--</option>
</select>
</div>
<?php include 'OPT2.php'?>
</html>
and your javascript
<script type="text/javascript">
$("#s1").change(function(){
$('#s2').find('option').remove().end(); //clear the city ddl
var block_no = $(this).find("option:selected").text();
var s1 = document.getElementById(s1);
var ch = s1.value;
//do the ajax call
$.ajax({
url:'OPT2.php',
type:'GET',
data:{variable:s1},
dataType:'json',
cache:false,
success:function(data)
{
//data=JSON.parse(data); //no need if dataType is set to json
var ddl = document.getElementById('s2');
for(var c=0;c<data.length;c++)
{
var option = document.createElement('option');
option.value = data[c];
option.text = data[c];
ddl.appendChild(option);
}
},
error:function(jxhr){
alert("Pls Reload the page");
}
});
});
I get users from mysql query. I show this users into table and add a HTML into php file to all users to change a value:
...
do {
echo "<td > <a>".$row["username"]."</a> </td> \n";
echo "<td > <a>".$row["name"]."</a> </td> \n";
echo "<td > <select id='sel'> <option value='admin'>Admin</option> <option value='user'>User</option> </select> </td> \n";
} while ($row = mysql_fetch_array($result));
echo "</tbody></table> \n";
...
How can I get the option selected??
I'm trying get this in javascript but always get the same first value, independet value selected.
function myFunction() {
var e = document.getElementById("sel");
var strUser = e.options[e.selectedIndex].value;
}
Thanks!
Use the jquery .change function.
Fiddle :- https://jsfiddle.net/a2abaL44/1/
<script type="text/javascript">
$("#sel").change(function(){
var selectVal = $(this).val();
})
</script>
https://api.jquery.com/change/
Because your loop will be executed multiple times (once for each user in the database), you will have many <select> elements with the same ID. You cannot have the same ID given to many different elements, and this is why your JavaScript is only returning the value of the first <select>.
If you tell me what you are needing the selected value for, I can update the answer further.
Your code is fine, Change your select to <select id="sel" onchange="myFunction();">
<script type="text/javascript">
function myFunction() {
var e = document.getElementById("sel");
var strUser = e.options[e.selectedIndex].value;
alert(strUser);
}
</script>
I'm having a problem with filtering HTML select options witch are based html input. For example:
If i write t-shirt in my input i want to see only T-shirts in my select options
My code looks like this...
<input type="text" name="search" id="inputdata" onkeyup="filter()">
<select name="select[]" id="filtersimilar" multiple>
<?php foreach ($all as $row) { ?>
<option value="<?php echo $row->id_product; ?>" itemid="<?php echo $row->name; ?>"><?php echo $row->name; ?></option>
<?php } ?>
</select>
And JS / Jquery code is:
<script>
function filter(){
inp = $('#inputdata').val();
$("#filtersimilar").change(function() {
var options = $(this).data('options').filter('[itemid=' + inp + ']');
$('#select2').html(options);
});
}
</script>
Have you checked jquery.filter documentation? (http://api.jquery.com/filter/) As #Elfentech pointed out, your referring to something that does not exist (options).
I recommend you make all options invisible with "style="display:none;", and when you do the filtering give the filtered options a "display:block;". But still, your filter method looks really out of standard. Check the documentation to understand how filtering works.
Right answer for me was this one
$(function() {
var opts = $('#filtersimilar option').map(function(){
return [[this.value, $(this).text()]];
});
$('#inputdata').keyup(function(){
var rxp = new RegExp($('#inputdata').val(), 'i');
var optlist = $('#filtersimilar').empty();
opts.each(function(){
if (rxp.test(this[1])) {
optlist.append($('<option/>').attr('value', this[0]).text(this[1]));
}
});
});
});