We Keep Coding

How i get the values in select option using javascript

I am fetching acno from table when i select a party name in option.I have so far tired i get the acno from the table but it is not place in the option box.
My controller code:
public function get_states2()
{
$name = $this->input->post('name');
$result = $this->db->query("SELECT TAcNo FROM tipup_payment LEFT OUTER JOIN parmaster on parmaster.pcode = tipup_payment.TName WHERE PName='$name' ")->result_array();
echo json_encode($result);
}
My View page code:
<div class="col-md-6">
<div class="form-group form-group-xs">
<div class="col-lg-9">
Party Name:
<select class="form-control countries" name="City">
<option></option>
<?php foreach ($PName as $row ): ?>
<option value="<?php echo trim($row['PName']); ?>"><?php echo trim($row['PName']); ?></option><?php endforeach ?>
</select>
</div>
</div>
<div class="form-group form-group-xs">
<div class="col-lg-9">
AcNo:
<select multiple="multiple" style="height: 85px;" id="Name" class="form-control states">
<option value=""></option>
</select>
<?php echo form_error('Area', '<div class="text-danger">', '</div>'); ?>
</div>
</div>
<div id="item">
<input type="checkbox" name="item">With Details</center></div>
</div>
</div>
My Script Code:
<script type="text/javascript">
$(document).ready(function(){
$('.countries').change(function(){
var name = $('.countries').val();
$.ajax({
type: "POST",
url: "<?php echo base_url();?>Tieup/get_states2",
data:{name:name},
datatype: 'json',
success: function (data) {
/*get response as json */
alert(data);
var result = jQuery.parseJSON(data);
var no = result.TAcNo;
$("#Name").val(no);
/*ends */
}
});
});
});
</script>
This is my view page when i select a party name it should display the acno in acno option box( it down the party name).

give a class or id to ur dropdown
ur html
<select class="product">
</select>
ur jquery code
loop through all ur value and set it in ur option value one by one and at the end inject all ur html to ur select option using .html()
var value = [{"TAcNo":"341"}]
var options = '<option value="">Select</option>';
$(value).each((index, item) => { //loop through your elements
console.log(item)
options += '<option value="'+item.TAcNo+'">'+item.TAcNo+'</option>';
});
$('.product').html(options);
Hope it helps

Solution
you need to trigger change like this to update select value
$("#Name").val(no).change();

Add second SELECT on change of first SELECT (PHP/AJAX) Not working as it should

firstly, let me express that I have tried four methods (All slightly different) that all seem to produce the same issue, which is no data being outputted, even simple echo 'test' to rule out a DB issue (and also trying TEST in html on the called page, no result.
Here is a snapshot of the HTML and Javascript:
(document).on('change','category_id',function(){
var id = $(this).val();
$.ajax({
method: 'POST',
url: 'supportgetsubcats.php',
data: {'subcatid' : id},
success: function(data){
$('#subcatresponse').hide().html(data).fadeIn(); // update the DIV
}
});
});
<div class="form-group">
<label class="col-sm-2 control-label">Category *</label>
<div class="col-sm-4">
<select class="form-control" class="category_id" name="category_id" id="category_id">
<option value="" selected="selected">-- Select --</option>
<?php
$query="select * from support_categories where hide = '0' or hide is NULL order by name ASC";
$rs=sqlsrv_query($conn,$query);
while($row=sqlsrv_fetch_array($rs))
{
extract($row);
?>
<option value="<?php echo $id; ?>"><?php echo $name; ?></option>
<?php
}
?>
</select>
</div>
</div><!-- form-group -->
<div class="form-group">
<div id="subcatresponse" name="subcatresponse" class="col-sm-4">
</div>
</div><!-- form-group -->
Here is the PHP that is called:
<?php require_once("includes/header.php");
error_reporting(E_ALL);
echo 'TEST';
if(isset($_POST["subcatid"])){
// Capture selected country
$category = $_POST["subcatid"];
$query="select * from support_subcategories where parent_category = '" . $category . "' order by name ASC";
$rsp=sqlsrv_query($conn,$query);
$subCatArr = array();
while($row=sqlsrv_fetch_array($rsp))
{
$subcat = $row['name'];
array_push($subCatArr, $category, $subcat);
}
// Display city dropdown based on country name
if($category == '-- Select --'){
} else {
echo '<label class="col-sm-2 control-label">Sub Category</label>';
echo '<select class="form-control" name="subcategory_id" id="subcategory_id">';
foreach($subCatArr[$category] as $value){
echo '<option value="'. $value .'">'. $value .'</option>';
}
echo "</select>";
}
}
?>
I get no response, not even basic text back, so I am not entirely sure what is wrong with the AJAX call, jQuery is included and proven to be working as the menu system on this interface won't display without jQuery so I am confident that is not the issue.
It looks like for whatever reason, the data from the HTML Select is not being passed to the AJAX call for POST.
Any thoughts greatly appreciated, TIA.

Try changing
(document).on('change', 'category_id', function() {
to
$(document).on('change', '#category_id', function() {
The second parameter to the on call takes a selector, but you seem to be passing in the name of the element instead. The name of the element is used when trying to access the element in PHP, and you use the selector (id, class, element) in JavaScript.
Alternatively, you could also use
$('#category_id').on('change', function()
You haven't posted it in your question, but in case you don't have it, it is always a good idea to only execute your jQuery code after the page has finished loading, otherwise your code may be trying to access an element that hasn't been loaded yet.
Surround your jQuery code with
$(document).ready(function() {
// Run jQuery code
}

add type='POST' to your ajax call
Also change this
(document).on('change','category_id',function(){
to
$(document).on('change','category_id',function(){

Loading image being displayed only on the 1st result in while loop

Loading image being displayed below the button of 1st result in while loop no matter which button is clicked from which result. For example, if I click submit button on the first result the loading image is displayed below it. That's okay. But when I click on the submit button of any other result except the first then also the loading image is displayed below the first result only and not below the submit button of that particular result.
<?php while($a = $stmt->fetch()){ ?>
<form method="post" action="">
<input type="hidden" value="<?php echo $mbs_id; ?>" class="memid">
<select class="validity" class="upgrade-valsel">
<?php while($mv = $mval->fetch()){ extract($mv); ?>
<option value="<?php echo $mv_id; ?>"><?php echo $mv_validity; if($mv_validity == 1){ echo " month"; }else{ echo " months"; } ?></option>
<?php } ?>
</select>
<input type="submit" value="Upgrade" class="submit">
<div class="center-align" style="margin-left: -20px"><img src="images/loading.gif" width="auto" id="loading-rent" style="margin-right: 0px; height: 40px"></div>
</form>
<?php } ?>
Script
$(document).ready(function() {
$(".submit").click(function () {
var dataString = {
memid: $(this).parent().find(".memid").val(),
memname: $(this).parent().find(".memname").val(),
validity: $(this).parent().find(".validity").val()
};
$.confirm({
title: 'Confirm!',
content: 'Are you sure you want to upgrade your membership to ' + dataString.memname + '?',
buttons: {
confirm: function () {
$.ajax({
type: "POST",
dataType: "json",
url: "upgrade-process.php",
data: dataString,
cache: true,
beforeSend: function () {
$("#submit").hide();
$("#loading-rent").show();
$(".message").hide();
},
success: function (json) {
setTimeout(function () {
$(".message").html(json.status).fadeIn();
$("#submit").show();
$("#loading-rent").hide();
}, 1000);
}
});
},
cancel: function () {
$.alert('<span style="font-size: 23px">Upgrade Cancelled!</span>');
}
}
});
return false;
});
});

Use .classes when it comes to generating a number of elements with a loop.
Use #id for unique elements.
To fix your code do the following:
add and fix any missing class
replace all id attributes in your code with class
use event delegation to listen for click event on any submit button. Read the following: jQuery API Docs on event delegation

On the following line you have set an id tag for the loading image; this has to be unique for each iteration of the while loop otherwise you get problems like you're experiencing. Either use unique ids and/or use javascript to select the nearest loading image to display.
<div class="center-align" style="margin-left: -20px"><img src="images/loading.gif" width="auto" id="loading-rent" style="margin-right: 0px; height: 40px"></div>

Data not getting fetched through ajax

I have a page index.php that has the following code
<div class="form-group">
<select name="assignto" id="assignid">
<option value="">Choose</option>
<option value="all">All</option>
<option value="selective">Selective</option>
</select>
</div>
<div class="form-group" id="displaydata"></div>
<div class="form-group" id="recruiter"></div>
Ajax code used on this page is
<script>
$(document).ready(function(){
$('#assignid').change(function(){
var assignid_id = $('#assignid').val();
console.log($('#assignid'))
if(assignid_id != 0)
{
$.ajax({
type:'post',
url:'a_fetchrecruiter_skill.php',
data:{id:assignid_id},
cache:false,
success: function(returndata){
$('#displaydata').html(returndata);
console.log(returndata)
}
});
}
})
})
</script>
<script>
$(document).ready(function(){
$('#areaid').change(function(){
var areaid_id = $('#areaid').val();
console.log($('#areaid'))
if(areaid_id != 0)
{
$.ajax({
type:'post',
url:'a_fetchrecruiter.php',
data:{id:areaid_id},
cache:false,
success: function(returndata){
$('#recruiter').html(returndata);
console.log(returndata)
}
});
}
})
})
</script>
When the value is selected from first dropdown the second dropdown gets fetched from a_fetchrecruiter_skill.php page with proper values.
Code on a_fetchrecruiter_skill.php page is
if($assignid_id=='selective')
{ ?>
<label for="input01" class="col-sm-2 control-label" style="color:black; font-weight:bold; font-size:15px; margin-top: -8px;">Select area </label>
<div class="col-sm-10">
<?php
$sql="SELECT * FROM recruiter_skill group by recruiter_skill";
$result = mysqli_query($con,$sql);
?>
<select name="assignto" class="form-control" id="areaid">
<?php
if(mysqli_num_rows($result)>0)
{?>
<option value="">Choose</option>
<?php
while($row=mysqli_fetch_assoc($result))
{?>
<option value="<? echo $row['recruiter_skill'];?>"><? echo $row['recruiter_skill'];?></option>
<?}
}
else
{?>
<option value="">No value available</option>
<?}?>
</select>
</div>
<?}
?>
Now the issue is that when the user selects value from second dropdown then the values should get displayed from a_fetchrecruiter.php page, but the second ajax is not working. it is not carrying the values to a_fetchrecruiter.php I tried to print data through console.log but nothing appears there.Can anyone plz point out the error

You are doing lazy loading of content. Whenever the content is loaded dynamically you need to bind the event to the child with respect to already existing parent.
For example:
$('#areaid').change(function(){
should change to
$('body').on('change', '#areaid', function(){

The element with #areid does not exist after page is loaded and therefore the change event doesn't fire.
You have to use jquery's delegate function:
http://api.jquery.com/delegate/
$('#displaydata').delegate('#areaid','change', function(){
var areaid_id = $('#areaid').val();
console.log($('#areaid'))
if(areaid_id != 0)
{
$.ajax({
type:'post',
url:'a_fetchrecruiter.php',
data:{id:areaid_id},
cache:false,
success: function(returndata){
$('#recruiter').html(returndata);
console.log(returndata)
}
});
}
})

You have to bind change event to #areaid after you have loaded it from ajax, not on $(document).load

jQuery on change dropdown call web service to load options

I have a form with a dropdown list and a variable amount of options (in the form of checkboxes and text inputs).
What I want to achieve is onchange value of the dropdown list, call a web service and load the various options below it. I know roughly I have to use jQuery's onchange event and have Ajax load the markup into the div.
But how exactly do I achieve that?
I am using Bootstrap 3, and some of my form code is below. I am not sure how to write my Javascript or Ajax part, though.
Dropdown list
<div class="form-group">
<label for="inputBranch" class="col-lg-2 control-label">Branch</label>
<div class="col-lg-10">
<select class="form-control" id="resBranch">
<?php
// print all branch name
// if is same as merchantID, mark as selected
foreach($branchesArray as $branch) {
if($branch['merchantID'] == $merchantID) {
echo "<option selected>" . $branch['name'] . "</option>";
} else {
echo "<option>" . $branch['name'] . "</option>";
}
}
?>
</select>
</div>
</div>
Options
<div class="form-group">
<label for="" class="col-lg-2 control-label">Options</label>
<div class="col-lg-10">
<?php
foreach ($featuresArray as $feature) {
?>
<div class="checkbox">
<label>
<input type="checkbox" value="<?php echo $feature['customValue']; ?>">
<?php echo $feature['customValue']; ?>
</label>
</div>
<?php
} // end foreach
?>
</div>
</div>

You could send an ajax request with the currently selected form option to a php web service which returns the html to add to the form.
The js could look something like this:
$( document ).ready(function () {
$('select').change(function () {
$.get('ajax.php?option=' + $('select').val(), function(data) {
if(data == "error")
{
//handle error
}
else {
$('div.ajax-form').append(data); //create an element where you want to add
//this data
}
});
});
});
The php might look like this:
if(isset($_GET['option'])) {
if($_GET['option'] == 1)
{
//echo form data for option one here
}
elseif($_GET['option'] == 2)
{
//echo form options for option two here
}
elseif($_GET['option'] == 3)
{
//echo form options for option two here
}
//other options here
else
{
echo "error"; //select value not correct
}
}