How can I fetch state from selected country in edit time?
This is for country:
<div class="col-md-6">
<select class="select2 form-control custom-select " style="width: 100%; height:36px;" name="country" onChange="getState(this.value);" id="country">
<option>Select Country</option>
<?php foreach($countries as $coun) {
foreach($ed as $edit) /*edit mode*/
{
if($edit->country_id==$coun->id)
{
?>
<option value="<?php echo $coun->id; ?>" selected="selected"> <?php echo $coun->name; ?> </option>
<?php
}}
?>
<option value="<?php echo $coun->id; ?>"> <?php echo $coun->name; ?> </option>
<?php
} ?>
</select>
</div>
This is for state:
<div class="col-md-6">
<select class="select2 form-control custom-select" style="width: 100%; height:36px;" name="state" id="state-list" onChange="getCity(this.value);">
<option>Select State</option>
</select>
</div>
function getState(val) {
$.ajax({
type: "POST",
url: "getState.php",
data:'country_id='+val,
success: function(data){
$("#state-list").html(data);
//getCity();
}
});
}
Try the code below:
function getState(val) {
$.ajax({
type: "POST",
url: "getState.php",
data:{country_id:val},
success: function(data){
$("#state-list").html(data);
//getCity();
}
});
}
Related
I have form with few inputs and two selects. When I select brand i want to see model options. Everything is working. But when i click submit, vehicle_model field is empty. Fields in $_POST are filled except vehicle_model field. I don't know why.
<div class="form-group">
<select class="form-control brand-select" name="brand" required="">
<option selected="true" value="1">MAN</option>
<option value="2">Volvo</option>
<option value="3">Renault</option>
<option value="4">DAF</option>
</select>
</div>
<div class="form-group" id="ajax_model">
<select class="form-control" name="vehicle_model" required="">
<option selected="" value="1">XS1</option>
<option value="2">XS2</option>
</select>
</div>
$(".brand-select").change(function() {
var id_brand = $(this).val();
var vehicle_type = <?php echo $type;?>;
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>" + "vehicle/ajax_model",
data: {
'id_brand': id_brand,
'vehicle_type': vehicle_type
},
dataType: 'text',
success: function(data) {
$("#ajax_model").html(data);
}
});
});
My full code for form. AJAX is working - I get models after selected brand. But when I click "save" PHP doesn't see $vehicle_model. But only when i run AJAX. When I refresh page and don't change brand, everything is working.
<table id="tabela" class="table table-bordered table-striped">
<tbody>
<form action="http://192.168.0.200:9000/vehicle/update_information" method="post" accept-charset="utf-8">
<tr>
<td>Number:</td>
<td>
<div class="form-group"><input type="text" class="form-control" autocomplete="off" value="12345" name="number"></div>
</td>
</tr>
<tr>
<td>VIN:</td>
<td>
<div class="form-group"><input type="text" class="form-control" autocomplete="off" maxlength="17" minlength="17" value="12345678901234567" name="vin"></div>
</td>
</tr>
<tr>
<td>Brand:</td>
<td>
<div class="form-group">
<select class="form-control brand-select" name="brand" required>
<option selected="true" value='1'>MAN</option>
<option value='2'>Volvo</option>
<option value='3'>Renault</option>
<option value='4'>DAF</option>
</select>
</div>
</td>
</tr>
<tr>
<td>Model:</td>
<td>
<div class="form-group" id="ajax_model">
<select class="form-control" name="vehicle_model" required>
<option selected value="1">XS1</option>
<option value="2">XS2</option>
</select>
</div>
</td>
</tr>
<tr>
<td>Kilometers</td>
<td>
<div class="form-group"><input type="text" class="form-control" value="100 km" disabled></div>
</td>
</tr>
<tr>
<td>Comment:</td>
<td>
<textarea class="form-control" rows="5" name="comment" id="comment"></textarea>
<input type="hidden" name="id_vehicle" value="137" />
</td>
</tr>
<tr>
<td colspan="2"><button type='submit' class='btn btn-md btn-success' style="float:right;margin-top:10px;width:80px;">Save</button>
</td>
</tr>
</form>
</tbody>
</table>
Because you forgot to send vehicle_model
just try like this
<script>
$( ".brand-select" ).change(function() {
var id_brand = $(this).val();
var vehicle_model=$("select[name=vehicle_model]").val()
var vehicle_type = <?php echo $type;?>;
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>" + "vehicle/ajax_model",
data: {
'id_brand': id_brand,
'vehicle_type': vehicle_type,
'vehicle_model':vehicle_model},
dataType: 'text',
success: function(data){
$( "#ajax_model" ).html( data );
}
});
});
</script>
Here is my code
<div class="form-group">
<label for="salary" class="control-label">Department:*
</label>
<select class="form-control" id="selDepartment"
name="selDepartment" autofocus="autofocus">
<option value="-1" onmouseout="" ="">Select
Department</option>
<?php
$query="SELECT * FROM department_master";
$results=mysqli_query($con,$query);
foreach ($results as $dm_department) {
?>
<option value="<?php echo $dm_department["dm_department"];?>";?>
<?php echo $a=$dm_department["dm_department"];?></option>
<?php
}
?>
</select>
</div>
<div class="form-group">
<label for="salary" class="control-label">Designation:*
</label>
<select class="form-control" id="selDesignation"
name="selDesignation" autofocus="autofocus">
<option value="-1" onmouseout="" ="">Select
Designation</option>
<?php
$query="SELECT * FROM designation_master";
$results=mysqli_query($con,$query);
foreach ($results as $dm_designation) {
?>
<option value="<?php echo $dm_designation["dm_designation"];?>";?>
<?php echo $dm_designation["dm_designation"];?></option>
<?php
}
?>
</select>
</div>
How to select only particular designations from the department and here is my code.
Please include JS library before script
<select class="form-control" id="selDepartment" name="selDepartment" autofocus="autofocus" onchange='xyz(this.value)'>
<script>
function xyz(temp){
$.ajax({
type:'post',
url: "abc.php",
data: "department="+temp
success: function(result){
$("#selDesignation").html(result);
}});
</script>
In abc.php
$department=$_POST['department'];
$html="<option value="-1" onmouseout="" ="">Select
Designation</option>";
$query="SELECT * FROM designation_master where department=$department";
$results=mysqli_query($con,$query);
foreach ($results as $dm_designation) {
$html=$html+" <option value=$dm_designation['dm_designation']> $dm_designation['dm_designation']</option>';
}
echo $html;
What I want is every time I have change the value from combobox (value from combobox is from database ) the input type will change too
here
<div class="col-md-12" >
<label>Charge</label>
<select id="name" name="name" class="form-control">
<?php
while ($reserve=mysqli_fetch_array($charge)) { ?>
<option value=" <?php echo $reserve['name']?>">
<?php echo $reserve['name']; ?>
</option><?php } ?>
</select>
</div>
<div class="col-md-12">
<br>
<label>Price</label>
<input type="number" class="form-control" id="Price" name="Price" disabled>
</div>
on database the name has a corresonding price for example chair has 200 price
what I want is every time I changed the combobox the value at inputtype will change too
I am not sure why you use ajax if you want to show option value . please check this code .
$('#name').change(function () {
var option_value = $(this).val();
$('#Price').val(option_value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="name" name="name">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="col-md-12">
<br>
<label>Price</label>
<input type="number" class="form-control" id="Price" name="Price" disabled>
</div>
</form>
so update select code using your this code
<select id="name" name="name" class="form-control">
<?php
while ($reserve=mysqli_fetch_array($charge)) { ?>
<option value=" <?php echo $reserve['name']?>">
<?php echo $reserve['name']; ?>
</option><?php } ?>
</select>
You need to add Jquery code to accomplish this task.
Your Html :
<div class="col-md-12" >
<label>Charge</label>
<select id="name" name="name" id="name" class="form-control">
<?php while ($reserve=mysqli_fetch_array($charge)) { ?>
<option value=" <?php echo $reserve['name']?>">
<?php echo $reserve['name']; ?>
</option><?php } ?>
</select>
</div>
<div class="col-md-12"><br>
<label>Price</label>
<input type="number" class="form-control" id="Price" name="Price" disabled>
</div>
Jquery Code :
$( document ).ready(function() {
$("#name").change(function () {
var value = this.value;
$('#Price').val(value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select id="name" name="name" class="form-control" onchange="callAjax(this)">
<?php
while ($reserve=mysqli_fetch_array($charge)) { ?>
<option value=" <?php echo $reserve['name']?>">
<?php echo $reserve['name']; ?>
</option><?php } ?>
</select>
<script>
function callAjax(val){
var selectedVal = val.value;
alert(selectedVal+" "+val)
$.ajax({
url: "<some_Url>", // Use PHP url from where you can get Data from Database
data: selectedVal,
success: function(result){
$("#Price").val(result);
}});
}
</script>
I have a script to echo the user's selection:
<script>
function onSuccess(data, status)
{
data = $.trim(data);
$("#car-check").text(data);
}
function onError(data, status)
{
// handle an error
}
$(document).ready(function() {
$("#submit").click(function(){
var formData = $("#car-locationform").serialize();
$.ajax({
type: "POST",
url: "pages/callajax.php",
cache: false,
data: formData,
success: onSuccess,
error: onError
});
return false;
});
});
</script>
The selection area:
<ul class="print-menu">
<li>
<label for="select-choice-0" class="select">Parking Method:</label>
<select name="parkingoption" id="parkingoptions" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
<option value="">Select One</option>
<option value="Self Parking">Self Parking</option>
<option value="auto">Valet Parking</option>
</select>
</li>
<li>
<div class="self carlocation">
<h1>Enter Car Location:</h1>
<label for="select-choice-0" class="select">Floor:</label>
<select name="locationfloor" id="locationfloor" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
<option value="">Floor Select</option>
<option value="1">F1</option>
<option value="2">F2</option>
<option value="3">F3</option>
<option value="4">F4</option>
</select>
</div>
</li>
<li>
<div class="self car-position">
<label for="select-choice-0" class="select">Row:</label>
<select name="select-choice-15" id="positionrow" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
<option value="">Row Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</div>
</li>
<li>
<div class="self car-section">
<label for="select-choice-0" class="select">Section:</label>
<select name="select-choice-15" id="positionrow" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
<option value="">Section Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
</select>
</div>
</li>
<li>
<div class="self car-section">
<label for="select-choice-0" class="select">Spot:</label>
<select name="select-choice-15" id="position-row" data-theme="b" data-overlay-theme="d" data-native-menu="false" tabindex="-1">
<option value="">Spot Select</option>
<option value="1-A">1-A</option>
<option value="2-B">2-B</option>
<option value="3-C">3-C</option>
<option value="4-D">4-D</option>
<option value="5-E">5-E</option>
<option value="6-F">6-F</option>
<option value="7-G">7-G</option>
</select>
</div>
</li>
<div class="self car-submit">
<button id="submit" type="submit" name="submit" value="submit" data-theme="b">Submit</button>
</div>
</ul>
<div id="car-check"></div>
Ajax Page:
<?php
$parktype = $_POST["parkingoption"];
$carfloor = $_POST["locationfloor"];
echo "<h1>Park Type: $parktype </h1>" ;
echo "<br/>";
echo "<span> Park Type: $parktype </span>";
?>
what ever the user selects will end up in #car-check. But for some reason the HTML inside of the echo just comes out as text. I only started with $parktype for the time being just to test.
Any help will greatly be appreciated, thanks!
UPDATE --
Thanks everyone I feel completely stupid not noticing that.
Change $("#car-check").text(data); to $("#car-check").html(data);
Use dataType:'html' :
$.ajax({
type: "POST",
dataType:'html',
url: "pages/callajax.php",
cache: false,
data: formData,
success: onSuccess,
error: onError
});
And change:
$("#car-check").text(data);
To:
$("#car-check").html(data);
Here is my code,
This is my form part, this is basically divided into
two main actions using jquery,
1) First action :, Based on Selection
from :'Academic Year' selection, 'Course' selection & 'Class'
selection , i used jquery ajax post method to load data from DB to All
5 set of IDs. .... Hey this part work Fine..
2) [my probs comes here
-->], Second Action :, when i select anyone of IDs, it shud show or
display new value of text box instead of default value, based on data
from DB by using similar ajax post method
========================================================================
<form name="aone" id="aone" action="mattendance.php" method="POST" enctype="multipart/form-data">
<div> <div style='padding-top:20px;'>
Academic Year :
<select name="academic" id="academic">
<option value="0"> --- Select ---- </option>
<option value="1990-91">1990-91 </option>
<option value="1991-92">1991-92 </option>
<option value="1992-93">1992-93 </option>
<option value="1993-94">1993-94 </option>
<option value="1994-95">1994-95 </option>
<option value="1995-96">1995-96 </option>
<option value="1996-97">1996-97 </option>
<option value="1997-98">1997-98 </option>
<option value="1998-99">1998-99 </option>
<option value="1999-00">1999-00 </option>
<option value="2000-01">2000-01 </option>
<option value="2001-02">2001-02 </option>
<option value="2002-03">2002-03 </option>
<option value="2003-04">2003-04 </option>
<option value="2004-05">2004-05 </option>
<option value="2005-06">2005-06 </option>
<option value="2006-07">2006-07 </option>
<option value="2007-08">2007-08 </option>
<option value="2008-09">2008-09 </option>
<option value="2009-10">2009-10 </option>
<option value="2010-11">2010-11 </option>
<option value="2011-12">2011-12 </option>
<option value="2012-13">2012-13 </option>
<option value="2013-14">2013-14 </option>
<option value="2014-15">2014-15 </option>
<option value="2015-16">2015-16 </option>
<option value="2016-17">2016-17 </option>
<option value="2017-18">2017-18 </option>
<option value="2018-19">2018-19 </option>
<option value="2019-20">2019-20 </option>
</select>
</div>
<div style='padding-top:15px;'>
<label>Select Course : </label>
<input type="radio" name="course" class="course" value="SDC">SDC
<input type="radio" name="course" class="course" value="GDC" checked="defaultChecked" />GDC
</div>
<div style='padding-top:15px;'>
<label>Select Class : </label>
<input type="checkbox" name="first" id="first" value="I Year" >I Year
<input type="checkbox" name="second" id="second" value="II Year">II Year
<input type="checkbox" name="third" id="third" value="III Year">III Year
</div>
<div style='padding-top:25px;'>
<label> Date : </label>
<span class="demo">
<input type="text" name="date" class="datepicker">
</span>
<span> FN : <input type='checkbox' name='actfnone' value='0'> </span>
<span > AN : <input type='checkbox' name='actanone' value='0'> </span>
</div>
<div style='padding-top:10px;'>
<div style='padding-top:5px;'>
ID No: 1 <span style="padding-left:10px;"> <select name="sId1" class="sId" onchange="Javascript: callone(this.options[this.selectedIndex].value);"> </select> </span><span> <input type="text" id="nameone" value=""> </span>
</div>
<div style='padding-top:5px;'>
ID No: 2 <span style="padding-left:10px;"> <select name="sId2" class="sId" onchange="Javascript: calltwo(this.options[this.selectedIndex].value);"> </select> </span><span > <input type="text" id="nametwo" value=""> </span>
</div>
<div style='padding-top:5px;'>
ID No: 3 <span style="padding-left:10px;"> <select name="sId3" class="sId" onchange="Javascript: callthree(this.options[this.selectedIndex].value);"> </select></span><span > <input type="text" id="namethree" value=""> </span>
</div>
<div style='padding-top:5px;'>
ID No: 4 <span style="padding-left:10px;"> <select name="sId4" class="sId" onchange="Javascript: callfour(this.options[this.selectedIndex].value);"> </select> </span><span > <input type="text" id="namefour" value=""> </span>
</div>
<div style='padding-top:5px;'>
ID No: 5 <span style="padding-left:10px;"> <select name="sId5" class="sId" onchange="Javascript: callfive(this.options[this.selectedIndex].value);"> </select> </span> <span > <input type="text" id="namefive" value=""> </span>
</div>
</div>
</div>
<p align="center">
<input type="submit" value="SUBMIT" onclick="javascript: return ATcheck()" >
<input type="hidden" name="add" value="add" />
</p>
</form>
Jquery Area [Works fine] :
Action Part one :
<script>
function popfield(acyr,crs,cls) {
$.ajax({
type : "POST",
url : "mattendance.php",
cache: false,
data : "academic="+ acyr +"&course="+ crs +"&class="+ cls, success: function(data) {
$(".sId").html(data).show();
}
});
}
$("#aone").ready(function() {
$("#academic").change(function () {
var acval = $(this).find("option:selected").text();
});
$("input:radio[name=course]").click(function() {
var csval = $('input[name=course]:checked', '#aone').val();
});
$("#first").click(function () {
if ($("#first").is(":checked")) {
var sclass = $('input[name=first]:checked').val();
$(":checkbox").click(popfield($("#academic").find("option:selected").text(),$('input[name=course]:checked', '#aone').val(),$('input[name=first]:checked').val()));
}
});
$("#second").click(function () {
if ($("#second").is(":checked")) {
var sclass = $('input[name=second]:checked').val();
$(":checkbox").click(popfield($("#academic").find("option:selected").text(),$('input[name=course]:checked', '#aone').val(),$('input[name=second]:checked').val()));
}
});
$("#third").click(function () {
if ($("#third").is(":checked")) {
var sclass = $('input[name=third]:checked').val();
$(":checkbox").click(popfield($("#academic").find("option:selected").text(),$('input[name=course]:checked', '#aone').val(),$('input[name=third]:checked').val()));
}
});
});
Action Part two [Problem is here] :
function callone(sid) {
alert('alert one :'+ sid);
var dataString = "Id="+ sid ;
$.ajax({
type : "POST",
url : "mattendance.php",
data : dataString,
success: function(data) {
$("#nameone").html(data);
}
});
} }
[PHP part for Action Two :]
<?
// Call to Names from Ajax
if($_POST["Id"]!="")
{
$dbselect=mysql_query("SELECT * FROM `tblNewStudent` WHERE `IdNo`='".$_POST["Id"]."' ORDER BY `SNo` ASC ");
$row = mysql_fetch_object($dbselect);
print $row->Name;
}
?>
I tried alot by seeing examples but cant able to display new value in
text field n got wierd , seriously looking forward to ur best
answers..
Thanks in Advance , {Raymond Herbert}
Try using following
$('#nameone').val(data);
instaed of
$("#nameone").html(data);