I am using the jquery chosen plugin for my select elements. This is working well apart from the fact that whatever i try I cannot amend the placeholder text after a change event. I would appreciate it if someone could check my code point out my error. Many thanks
html
<div class="form-group">
<label for="rtvcompany" class="labelStyle">Company</label>
<select class="form-control chosen-select" name="rtvcompany" id="rtvcompany" data-placeholder="Select a Company...">
<option value=""></option>
<?php
while ($row = mysqli_fetch_assoc($resultcmp)) {
$name = $row["idcode_usr"];
echo "<option value=\"$name\">$name</option>";
}
?>
</select>
<div id="compmessage"></div>
<div class="servicesHelp">
<lead id="serviceHelp" class="form-text text-muted">Please select a company to proceed.</lead></div>
</div>
<div class="form-group">
<label for="rtvdept" class="labelStyle">Department</label>
<select class="form-control chosen-select" name="rtvdept" id="rtvdept" data-placeholder="Select a Dept...">
<option value=""></option>
</select>
<div id="deptmessage"></div>
<div class="servicesHelp">
<lead id="serviceHelp" class="form-text text-muted">Please select a department where your box is stored for retrieval.</lead></div>
</div>
js
$(function() {
$(document).on('change', '#rtvcompany', function() {
$(this).after('<div id="loader"><img src="/domain/admin/images/loader.gif" alt="loading files" /></div>');
$.get('/domain/admin/requests/boxes/retrieve/loadboxRtvaddr.php?rtvcompany=' + $(this).val(), function(data) {
//console.log(data);
$("#rtvdept").html(data);
$('#loader').slideUp(200, function() {
$(this).remove();
$('#rtvdept').attr('data-placeholder', 'Please select your department....');
// $("#rtvdept").data("chosen").default_text = "New Default Text"
$("#rtvdept").trigger("chosen:updated");
});
});
});
});
You are creating options without value, change this :
echo "<option>$name</option>";
to this :
echo "<option value=\"$name\">$name</option>";
Related
I have a select box gender and I want to change the the label of other fields after changing of this gender
My code is here
<label class="control-label col-sm-3">Gender</label>
<div class="col-sm-9">
<select class="form-control" id="gender" name="gender" onchange="changelabel()">
<option value="">Gender</option>
<option <?php if($res['gender']=='Female'){?> selected="selected" <?php } ?> value="Female">Female</option>
<option <?php if($res['gender']=='Male'){?> selected="selected" <?php } ?> value="Male">Male</option>
</select>
<!-- Other fields are -->
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label col-sm-3"><span id="prtttl">Wife Title</span></label>
<div class="col-sm-9">
<select class="form-control" id="partnerTtl" name="partnerTtl">
<option value="">Select</option>
<option <?php if($res['partnerTtl']=='Smt'){?> selected="selected" <?php } ?> value="Smt">Smt</option>
<option <?php if($res['partnerTtl']=='Late'){?> selected="selected" <?php } ?> value="Late">Late</option>
</select>
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label col-sm-3"><span id="prtnms">Wife Name</span> </label>
<div class="col-sm-9">
<input type="text" name="hwname" value="<?php echo $res['partnerName'] ?>" placeholder="Husband/Wife Name" class="form-control">
</div>
</div>
</div>
When user select male the the label of wife name will be the same if the user select gender female the label change to husband name is this any possible way to do this with javascript
Try this jquery
function changelabel()
{
if($("#gender").val() == 'Female')
{
$("#prtttl").text("Husband's Title");
$("#prtnms").text("Husband's Name");
}
else
{
$("#prtttl").text("Wife's Title");
$("#prtnms").text("Wife's Name");
}
}
try onchange event like this
<script type="text/javascript">
$(document).ready(function() {
$('select').on('change', function() {
data=this.value;
if (data=='female') {
$(".your class or Id").append('<span id="prtnms">Wife Name</span>');
}
})
});
</script>
Write your JS function as below:
<script>
function changelabel(){
if($("#gender").val() == 'Female')
{
$("#prtttl").html("Husband Title");
$("#prtnms").html("Husband Name");
}
else
{
$("#prtttl").html("Wife Title");
$("#prtnms").html("Wife Name");
}
}
</script>
You can do this:
function changelabel() {
if ($('#gender').val()== 'Female') {
$('#prtnms').text('Husband Name')
else
$('#prtnms').text('Wife Name');
}
But as you tagged jQuery, you can do this instead:
$("#gender").change(function() {
if ($(this).val() == 'Female') {
$('#prtnms').text('Husband Name')
else
$('#prtnms').text('Wife Name');
});
Note that, as the content is just text, I've used text() instead of html()
is there an easy way to update an html property from an HTML select object ? in the example below I would like to update name with the value from the select object when the user chooses an option.
EDIT: user can add more search criteria like below; I have a function to add similar code like below to the search form.
<input id="AS1" class="searchCriteriaInput" type="text" name="" value="" />
<select>
<?php
foreach ($fields as $key => $value) {
if ($key=="select") {
echo "<option selected value='".$key."'>".$value."</option>";
} else {
echo "<option value='".$key."'>".$value."</option>";
}
}
?>
</select>
This does what you ask, although it is not impressive to look at in the snippet, however, inspecting the input field after change shows that the name attribute has been populated.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="AS1" class="searchCriteriaInput" type="text" name="" value="" />
<select onChange="doThing(this)">
<option value="KeyOne">ValOne</option>
<option value="Key2">Val2</option>
<option value="Key3">Val3</option>
<option value="Key4">Val4</option>
<option value="Key5">Val5</option>
</select>
<script type="text/javascript">
function doThing(f){
$("#AS1").attr("name",$(f).val());
}
</script>
You can use jquery. Bind the on change event for select and set select value to required place. for your example
<input id="AS1" class="searchCriteriaInput" type="text" name="" value="" />
<select class="sel">
<?php
foreach ($fields as $key => $value) {
if($key=="select"){
echo "<option selected value='".$key."'>".$value."</option>";
}else{
echo "<option value='".$key."'>".$value."</option>";
}
};
?>
</select>
$(document).ready(function(){
$('.sel').change(function(){
var value = $(this).val();
$('#AS1').val(value);
});
})
Don't forget to add jquery library
You don't need php for it. You can do it using javascript (Jquery). Here's an example:
$(document).ready(function() {
$("#select_name option").filter(function() {
return $(this).val() == $("#animal_name").val();
}).attr('selected', true);
$("#select_name").on("change", function() {
$("#animal_name").attr("name",$(this).find("option:selected").attr("value"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_name" name="select_name">
<option value="">Please select an animal</option>
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
<option value="Cow">Cow</option>
</select>
<input type="text" id="animal_name" name="animal_name" value="" readonly="readonly">
select dropdown with diffrent output dropdown value
-- select an option --
Unifi
Streamyx
when select unifi it will show another dropdown for unifi package only
when select streamyx it will show another dropdown for streamyx package only
<div class="form-group" id="beb">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> Package List :
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select name="PACKAGE_ID_UNIFI" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);">
<option disabled selected value> -- select an option -- </option>
<?php
$result = mysqli_query($conn,"select * from unifi ORDER BY PACKAGE_NAME ASC");
while ($row=mysqli_fetch_assoc($result))
{?>
<option value="<?php echo $row["no"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group" id="bob">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> Package List :
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select name="PACKAGE_ID_STREAMYX" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);" >
<option disabled selected value> -- select an option -- </option>
<?php
$result = mysqli_query($conn,"select * from streamyx ORDER BY PACKAGE_NAME ASC");
while($row=mysqli_fetch_assoc($result))
{?>
<option value="<?php echo $row["PACKAGE_NAME"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
<?php
}
?>
</select>
</div>
</div>
this is the javascript to hide the dropdown based on what selected
<script> var a = document.getElementById('beb');
if ((value) == 'UNIFI')
{
a.style.display = '';
}
else if((value) == 'STREAMYX')
{
a.style.display = 'none';
}
var a = document.getElementById('bob');
if ((value) == 'UNIFI')
{
a.style.display = 'none';
}
else if((value) == 'STREAMYX')
{
a.style.display = '';
}
</script>
You can use jquery to select the first item (-- select an option --) in the selectbox.
You could do this with:
$('select[name="PACKAGE_ID_UNIFI"]').prop('selectedIndex',0);
and
$('select[name="PACKAGE_ID_STREAMYX"]').prop('selectedIndex',0);
I've added ID's to the select boxes so they are easyer to target in jquery:
$(function(){
$('#streamSelect').change(function(){
if( this.value === 'unifi'){
$('#unifi-contaioner').removeClass('hidden'); // show the unifi selectbox
$('#streamyx-contaioner').addClass('hidden'); // hide the streamyx selectbox
$('#streamyx').prop('selectedIndex',0); // reset the streamyx selectbox
}else{
$('#streamyx-contaioner').removeClass('hidden'); // show the streamyx selectbox
$('#unifi-contaioner').addClass('hidden'); // hide the unifi selectbox
$('#unifi').prop('selectedIndex',0); // reset the unifi selectbox
}
});
})
.hidden{
opacity: 0.2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select id="streamSelect">
<option value="unifi">unifi</option>
<option value="streamyx">streamyx</option>
</select>
</div>
<div id="unifi-contaioner">
<label for="unifi">Package List unifi:</label>
<select id="unifi" name="PACKAGE_ID_UNIFI">
<option disabled selected value> -- select an option -- </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div id="streamyx-contaioner" class="hidden">
<label for="streamyx">Package List streamyx:</label>
<select id="streamyx" name="PACKAGE_ID_STREAMYX" >
<option disabled selected value> -- select an option -- </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
You can detect user selection using the change event. You are using pure hs but also tagged jQuery. I will give the example in jQuery as that's what you should be using if you already have both on the page.
Your example also has several issues. Use seperate variables for different elements. The hiding doesn't make sense to me. I will do the example for beb anyway but I think you should rereview your question.
Instead of changing the css it would be cleaner to have a selected class in css.
var $beb = $('#beb');
var $bob = $('#bob');
$beb.on('change', function (e) {
$beb.toggleClass('selected');
});
function
My Script file is
<script type="text/javascript">
$(document).ready(function(){
$(".select2").select2();
var MaxInputs = 50; //maximum input boxes allowed
var InputsWrapper = $("#overall_wrapper"); //Input boxes wrapper ID
var AddButton = $("#AddMoreFileBox"); //Add button ID
var x = InputsWrapper.length; //initlal text box count
var FieldCount=1; //to keep track of text box added
$(AddButton).click(function (e) //on add input button click
{
if(x <= MaxInputs) //max input box allowed
{
FieldCount++; //text box added increment
//add input box
$(InputsWrapper).append('<div class="repeat_element" id="row_'+FieldCount+'"><div class="col-sm-1" id="row1_'+FieldCount+'"><input type="text" class="form-control" name="s_no[]" value="'+FieldCount+'" /></div><div class="col-sm-2" id="row1_'+FieldCount+'"><select class="form-control select2" name="part_no[]" id="part_no" onchange="choose_parts(this.value);" required><option value="">Please Select</option></select></div><div class="col-sm-3" id="row1_'+FieldCount+'"><input type="text" class="form-control" name="part_desc[]" value="" /></div><div class="col-sm-1" id="row1_'+FieldCount+'"><input type="text" class="form-control" name="part_mrp[]" value="" /></div><div class="col-sm-1" id="row1_'+FieldCount+'"><input type="text" class="form-control" name="req_qty[]" value="" /></div><div class="col-sm-1" id="row1_'+FieldCount+'"><input type="text" class="form-control" name="instock[]" value="" /></div><div class="col-sm-2" id="row1_'+FieldCount+'"><select class="form-control" name="billing_type[]"><option value="Cash">Cash</option><option value="Credit">Credit</option></select></div><div class="col-sm-1" id="row1_'+FieldCount+'"><div onclick="hiding('+FieldCount+')" class="removeclass"><div class="btn btn-danger" id="AddMoreFileBox"><i class=" fa fa-minus-circle" title="Delete"></i> </div></div></div>');
$(".select2").select2(); // Reinitialize the select2 again when the div is appended
x++; //text box increment
}
return false;
});
});
</script>
And i have a page where i call this Add button jquery and i get the second row fine but i am unable to call the PHP functions like foreach,if into the append script.
My doubt is that when i click on the plus sybmol i have called the select2 JS and it comes fine but i need to call the PHP function into it for looping of option value in the <select>.
I need to generate dynamic options in this selected tag under my JS
<select class="form-control select2" name="part_no[]" id="part_no" onchange="choose_parts(this.value);" required><option value="">Please Select</option></select>
My PHP function for getting the
function getAllActiveSpare($id)
{
$query="";
$conn=connectToDB();
if(func_num_args()==1)
{
$query="SELECT * FROM `spare` WHERE `id`='".$id."' AND `status`='1' AND `delete_status`='0'";
}
else
{
$query="SELECT * FROM `spare` WHERE `delete_status`='0' AND `status`='1' ORDER BY `id` DESC ";
}
$results = $conn->query($query);
$counts = $results->num_rows;
if($counts==0)
{
return false;
}
else
{
$rows=[];
while($row = $results->fetch_assoc())
{
$rows[] = $row;
}
return $rows;
}
}
I need to append this part alone in the JS Select TAG under append function.
<?php $parts_number = getAllActiveSpare();
if($parts_number==false)
{
?>
<option value="">No Parts Created Yet</option>
<?php
}
else
{
?>
<option value="">Please Select</option>
<?php
foreach ($parts_number as $key => $single_parts) {?>
<option value="<?php echo $single_parts['ref_part_no']; ?>"><?php echo $single_parts['ref_part_no']; ?></option>
<?php
}
}
?>
</select>
This above things alone i have tried. Can anyone help me with this . I was struck up for the past two Days.
It seems you do not understand the difference between PHP and JavaScript, or the difference between the server and client side.
Difference between Javascript and PHP
To solve your problem, you probably need to use Ajax.
https://stackoverflow.com/a/23740549/851885
I have weird situation with Select2 plugins :
When, #state is changed, it will do ajax request to get list of #city. once #city is selected, it will do ajax request to get #area list.
if I select #city option number 2, 3, etc... it will trigger #area to get the list. but if I choose option number 1, none will happen.
but once, I choose option number 2, 3, etc... then go back to choose option number 1, then it will run ajax perfectly.
pic 1 : Badung (option #1) is selected for the first time, not trigerring AJAX to get #area
pic 2 : Bangli (option #2) is selected, it's trigerring AJAX to get #area
pic 3 : Back to Badung (option #1), now it's trigerring AJAX to get #area
here's my HTML structure :
<div class="row">
<div class="col-sm-12">
<div class="form-group form-group-default form-group-default-select2 required">
<label class="">State</label>
<select id="state" class="full-width" data-init-plugin="select2" name="state">
<option select="selected"></option>
<?
for ($i = 0; $i < $num_propinsi; $i++) {
$value = $propinsi[$i]['province_id'];
$text = $propinsi[$i]['province'];
echo '<option value="'.$value.'">'.$text.'</option>';
}
?>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group form-group-default form-group-default-select2 required">
<label>City</label>
<select id="city" class="full-width" data-init-plugin="select2" name="city" disabled>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group form-group-default form-group-default-select2 required">
<label>Area</label>
<select id="area" class="full-width" data-init-plugin="select2" name="area" disabled>
</select>
</div>
</div>
</div>
and here's my jquery :
<script>
$(function() {
$("#form-flogin").validate();
$("#state").change(function() {
$("#city").html("");
$("#s2id_city").find("#select2-chosen-2").html("");
$("#s2id_area").find("#select2-chosen-3").html("");
$("#area").prop("disabled", true);
$("#flogin-submit").prop("disabled", true);
var propinsi = $("#state").val();
$.ajax({
url: "controller/ctrl.getcityarea.php?req=city&val="+propinsi,
dataType: "JSON",
success: function(json){
var city = "";
$.each(json, function(i,o){
city += "<option value="+o.id+">"+o.city_name+"</option>";
});
$("#city").append(city);
event.preventDefault();
$("#city").prop("disabled", false);
}
})
});
$("#city").change(function() {
$("#area").html("");
$("#s2id_area").find("#select2-chosen-3").html("");
var city = $("#city").val();
$.ajax({
url: "controller/ctrl.getcityarea.php?req=area&val="+city,
dataType: "JSON",
success: function(json){
var area = "";
$.each(json.rajaongkir.results, function(i,o){
area += "<option value="+o.subdistrict_id+">"+o.subdistrict_name+"</option>";
});
$("#area").append(area);
event.preventDefault();
$("#area").prop("disabled", false);
}
});
});
$("#area").change(function() {
event.preventDefault();
$("#flogin-submit").prop("disabled", false);
});
})
</script>
any idea why .change method is not working on first attempt? but works on next attempt. thank you for your help
This is because you have written a change event listener for city dropdown and first city is default selected hence when you select it again it won't change the value therefore change event listener won't get fire.
You can do one of following two options
Option 1 : put extra option as "Select City" and then select first city of your choice.
$("#city").append("<option value=''>Select City</option>");
$("#city").append(city);
Opetion 2 : trigger change event through code
$("#city").append(city).change();