I have a code like this
$(function() {
$('#book_id').change(function(){
$('#book_code').show();
var get_value = $(this).val();
$( "#book_code" ).html( get_value );
});
});
<td>
<select id="book_id" name="book_name" class="form-control">
<option value="">Select Book</option>
<?php while($row=mysql_fetch_array($book_query)){?>
<option value="<?php echo $row['book_code'];?>">
<?php echo $row['book_name']; ?>
</option>
<?php }?>
</select>
</td>
<td>
<div id="book_code">
<input type="text" class="form-control" value="" disabled="disabled" placeholder="Book Code" />
</div>
</td>
What i want to do is
On each select event, i need to show the book code inside a input text box (not editable)
The above code works but doesn't show the value inside the input box
How can I do that?
In other words, on each select event display the book code inside a text box
Thanks,
Kimz
You may try this (Working Example) :
$(function() {
$('#book_id').on('change', function(){
$('#book_code').find('input').val($(this).val());
});
});
You have to pass the class of input as well
$(function() {
$('#book_id').change(function(){
var get_value = $(this).val();
$( "#book_code .form-control" ).val( get_value );
});
});
Related
How to make filter using ajax i want to get single option value for each selection and when click on filter button it sends data to getproductlistcb controller.
please help
HTML CODE is-
<div class="filter-category">
<form>
<input type="submit" value="filter" class="btn filter-btn">
<div class="user-category-select">
<select required="" name="sort" form="filter-form" class="btn filter-form-select" >
<option value="" disabled="">Sort</option>
<option value="popularity" selected="">Most Popular</option>
<option value="highest-rated">Highest Rated</option>
<option value="newest">Newest</option>
<option id="aesc" value="price-low-to-high">Lowest Price</option>
<option id="desc" value="price-high-to-low">Highest Price</option>
</select>
<label class="filter-category-select"><i class="fa fa-angle-down" aria-hidden="true"></i></label>
</div>
</form>
</div>
AjaX-
<script type="text/javascript">
$(document).ready(function(){
$('.btn filter-form-select').on('change',function(){
var data=$('#search_form');
$.ajax({
type: "POST",
url: "<?php echo $this->url('page', array('controller' => 'page', 'action' => 'getproductlistcb')); ?>",
data:data,
success:function(data){
console.log(data);
alert(data);
$("#").html(data);
}
});
});
});
</script>
Did you try to use :option in selector? For example, in that way: $('select.filter-form-select option:selected').val();?
I think you are looking for DOM-selector like that:
$('.filter-form-select option:selected').
So, in your case, in your code the code below might be helpful:
var $formData = $('#search_form');
var $formFilters = $formData.find('select.filter-form-select');
var $firstFilter = $formFilters.first();
var $option = $firstFilter.find('option:selected');
var optionText = $option.length ? $option.text() : null;
var optionValue = $option.length ? $option.val() : null;
Be aware, that $formFilters is not just one element, it's jQuery object that represents a set of DOM elements.
An additional way, try to debug and check what you have in your this-context and event:
$('.btn filter-form-select').on('change',function(event) {
console.log('clicked: ' + event.target.nodeName);
console.log('Context: ' + this);
});
I hope, something from that will help you a bit.
I have an issue. I need to set the select value as text in the select box using jQuery but unable to do it.
<select name="countryCode" class="chosen-select" id="countryCode" required>
<?php foreach ($countrydata as $key => $value) {
if ($value['con_code']=='IN') {
$select='selected';
}else{
$select='';
}
?>
<option data-text="<?php echo $value['country']; ?>" value="<?php echo $value['dial_code']; ?>" <?php echo $select; ?>><?php echo $value['country']; ?></option>
<?php } ?>
</select>
My script part is given below.
$('#countryCode').find(':selected').html($('#countryCode').find(':selected').attr('value')); // already changed onload
$('#countryCode').on('change mouseleave', function () {
$('#countryCode option').each(function () {
$(this).html($(this).attr('data-text'));
});
$('#countryCode option:selected').html($('#countryCode option:selected').attr('value'));
$(this).blur();
});
$('#countryCode').on('focus', function () {
$('#countryCode option').each(function () {
$(this).html($(this).attr('data-text'));
});
});
What I need is that when the user selects any text, it's value will be shown to the user. In my code it's not happening like this.
1st: a little optimization of your JS :
$('#countryCode option:selected').html($(this).val());// already changed onload
Now, how to select an option using JS :
$(function() {
var $sel = $('.chosen-select');
$('#exists').click(function() {
$sel.val('option3');
console.log($sel.val());
});
$('#disabled').click(function() {
$sel.val('option2');
console.log($sel.val());
});
$('#noExist').click(function() {
$sel.val('option5');
console.log($sel.val());
});
$sel.on('change', function() {
console.log($sel.val());
});
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<button id="exists">Select 3rd option</button>
<button id="disabled">Select disabled option</button>
<button id="noExist">Select inexistant option</button>
<select class="chosen-select">
<option>option1</option>
<option disabled>option2</option>
<option>option3</option>
<option selected>option4</option>
</select>
<button onclick="console.clear();">X</button>
As you can see, only existant and not disabled options can be selected.
should be something like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
$('#countryCode').on('change', function(){
var val = $(this).val();
$(this).find("option").each(function(){
$(this).text($(this).attr("data-text"));
});
$(this).find(":selected").text(val);
}).trigger("change");
});
</script>
<select id="countryCode" class="chosen-select">
<option data-text="A Text" value="A value">A Text</option>
<option data-text="B Text" value="B value">B Text</option>
<option data-text="C Text" value="C value" selected>C Text</option>
</select>
hello i want to display data of business3's data according to business2's and business2's data according to business1's dropdown list but on change() of business1 i got data in response but I didn't get second on change() in dropdown list.
<!-- ajax code for first business starts here -->
<script>
$(document).on('change', 'select.Business1', function(){
var business1 = $('select.Business1 option:selected').val();
alert(business1);
var value = $(this).val();
$.ajax({
type:"POST",
data: { business1:business1 },
url: '<?php echo site_url('client_area/select_business_sub_cat'); ?>',
success : function (data){
$('#business2').empty();
$('#business2').append(data);
}
});
});
</script>
<!-- ajax code for first business ends here -->
// This script is not working. i can't find second change event.
<!-- ajax code for second business starts here -->
<script>
$(document).on('change','#business2',function(){
alert('Change Happened');
});
</script>
<!-- ajax code for second business ends here -->
I have tried with live() method also so alert called on first dropdown selection and then the ajax request calls so second drop down fills (Alternate for second script) ,
<script>
$(document).live('change', '#business2', function() {
alert('Change Happened');
});
</script>
Model function
public function select_business_sub_cat()
{
$business1 = $this->input->post('business1');
$result_sub_cat1 = $this->db->query("select category.id,subcategory.* From category LEFT JOIN subcategory ON category.id = subcategory.category_id where category.id = '$business1'");
$row_cat1 = $result_sub_cat1->result();
$data = array(
'id' => $row_cat1['0']->id,
'name' => $row_cat1['0']->name
);
echo "<option value='" . $row_cat1['0']->id . "'>" . $row_cat1['0']->name . "</option>";
// return $this->output->set_output($data);
}
View --
<div class="form-group">
<label>Business 1</label>
<select name="txtBusiness1" id="" style="height: 30px;width: 100%;" class="Business1">
<option value=""> Select Business </option>
<?php
$result_cat1 = $this->db->query("select * from category");
$row_cat1 = $result_cat1->result();
?>
<?php foreach($row_cat1 as $item){ ?>
<option value="<?php echo $item->id; ?>"><?php echo $item->name; ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label>Business 2</label>
<select name="txtBusiness2" id="business2" style="height: 30px;width: 100%;" class="Business2">
<option value=""> Select Business2 </option>
</select>
</div>
<div class="form-group">
<label>Business 3</label>
<select name="txtBusiness4" id="business3" style="height: 30px;width: 100%;" class="Business3">
<option value=""> Select Business3 </option>
<?php echo $abc; ?>
</select>
</div>
Maybe that's because by calling $('#business2').html(data); you remove the event handlers, from jQuery documentation: http://api.jquery.com/html
When .html() is used to set an element's content, any content that was
in that element is completely replaced by the new content.
Additionally, jQuery removes other constructs such as data and event
handlers from child elements before replacing those elements with the
new content.
One option would be to use empty and append like this
$('#business2').empty();
$('#business2').append(data);
instead of $('#business2').html(data);
The Script which is not working for you !!!
<script>
$(document.body).on('change','#business2',function(){
alert('Change Happened');
});
</script>
Try this in place of the above script :
$(document).on("change", "#business2", function(){
alert('Change Happened');
});
I have a simple jquery function that reflects the selected value of a dropdown to textbox but the problem is that the console says that my function was undefined. I put the function inside the onchange event of the dropdown. Please note that all of my jquery functions was on the bottom of the page..
and here is the dropdown:
<div class="form-group">
<label class="control-label">Operation</label>
<select class="form-control" id="operationName" name="operationName">
<option value="">-SELECT-</option>
<?php
foreach($operation as $val)
{
?>
<option value="<?php echo $val['OperationName'];?>"><?php echo $val['OperationName'];?></option>
<?php
}
?>
</select>
<span class="text-danger"><?php echo form_error('operation');?></span>
<input type="text" class="form-control" id="deldays" name="deldays"
value="" />
this is the operation array model
function getDeliveryDays($str)
{
$this->db->select('DeliveryDays');
$this->db->from('operation');
$this->db->where('OperationName',$str);
return $this->db->get()->result();
}
this is the controller:
public function getDays()
{
$id = $this->input->post('q');
$data['days'] = $this->wip_model->getDeliveryDays($id);
echo json_encode($data);
}
I took the working in my other project and use it in my current project but still the same result and when I inspect it in the dev tools, the said script is missing in view source but it's present in IDE:
this is the code:
function showDeliveryDay(operation)
{
$.ajax({
type: "POST",
url: "<?php echo site_url('wip/getDays/');?>",
data: {q:operation},
success: function(data){
console.log(data);
},
});
}
Thanks in advance....
Does you put the function inside domready? If so, remove that and placed it outside like so :
<script>
function showDays() {
var x = document.getElementById("operationName").value;
document.getElementById("deldays").innerHTML = x;
}
// domready here
$(function(){...}); // or $(document).ready(function(){...});
</script>
Make sure you are including your jquery in your code. try this:
jQuery( document ).ready(function() {
jQuery( "#operationName" ).change(function() {
var pVal = jQuery("#operationName").val();
jQuery("#deldays").val(pVal);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="control-label">Operation</label>
<select class="form-control" id="operationName" name="operationName">
<option value="">-SELECT-</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</select>
<span class="text-danger"></span>
<input type="text" class="form-control" id="deldays" name="deldays"
value="" />
</div>
You can refer this code
Html
<div class="form-group">
<label class="control-label">Operation</label>
<select class="form-control" id="operationName" name="operationName">
<option value="">-SELECT-</option>
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</select>
<span class="text-danger"></span>
<input type="text" class="form-control" id="deldays" name="deldays"
value="" />
Js code
jQuery( document ).ready(function() {
jQuery('#operationName').on('change', function(){
var p=jQuery(this).val();
jQuery("#deldays").val(p);
});
});
You can view demo here
For some reason, a form I am submitting via POST is sending the option text rather than the option value for a form. This is my select declaration:
<select name = "newfreq">
<option val='1'>every week</option>
<option val='2'>every 2 weeks</option>
</select>
When I print out my $_POST array in PHP. I have:
[newfreq] => every 2 weeks
I am particularly new to jquery, which I am using to present the form modally, so I am pasting the full form/div and javascript below in case it's relevant:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script>
$(function() {
var dialog, form,
dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
});
form = dialog.find( "form" ).on( "submit", function( event ) {
// event.preventDefault();
});
$( "#create-user" ).button().on( "click", function() {
dialog.dialog( "open" );
});
});
</script>
<input id = "create-user" type="submit" tabindex="-1" value = "Change deal" >
<div id="dialog-form" >
<form method = "post" action = "details.php">
<fieldset>
<label for="name">Number of hours</label>
<input type="text" name="newhours" id="name" value = <?php echo $totalhours; ?> class="text ui-widget-content ui-corner-all">
<label for="email">Frequency</label>
<select name = "newfreq">
<option val='1'><?php echo return_frequency($typedeal ,1)?></option>
<option val='2'><?php echo return_frequency($typedeal ,2); ?></option>
</select>
<input type = "hidden" name = "included" value = '<?php echo $included;?>'/>
<input type = "hidden" name = "id" value = '<?php echo $id_bus;?>'/>
<br>
<input type="submit" tabindex="-1" >
</fieldset>
</form>
</div>
return_frequency() is a php function that returns "every 2 weeks" or "every week" depending on the input.
What am I missing here?
<option val='1'> should be <option value='1'>
I know its probably Jquery that confused you since they use .val a lot but actual HTML uses value and so does normal Javascript use .value.
I think since you didn't properly specify a value your browser must be putting the text in value for you somehow. Don't rely on that, however, since I think that's probably a bug and not all browsers will do it.
change to:
<select name = "newfreq">
<option value='1'>every week</option>
<option value='2'>every 2 weeks</option>
</select>