I want bootstrap-datetimepicker only Year and Month - codeigniter

Now, Bootstrap datetimepicker viewed YYYY-DD-MM format.
But, I want only YYYY-DD format.
For example, Like the picture above.
Now Source.
Also it did not resolve to remove the DD to the source.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="col-md-5">
<label style="margin-top: 8px;margin-left: 33px; white-space:nowrap;">datetimepicker</label>
</div>
<div class="col-md-7">
<input class="form-control" type="text" name="daterange" value='<?php if(isset($_GET['to']) && $_GET['to'] != '') { echo #$_GET['to']." - ".#$_GET['from']; } ?>' />
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({
<?php if(isset($_GET['to']) && $_GET['to'] != '') { ?>startDate:'<?php echo #$_GET['to']; ?>',<?php } ?>
<?php if(isset($_GET['to']) && $_GET['to'] != '') { ?>endDate:'<?php echo #$_GET['from']; ?>',<?php } ?>
timePicker: false,
timePicker24Hour: false,
format: 'YYYY-MM-DD'
}, function(start, end)
{
location.href = "/Driving/drivingHistoryList?to="+start.format('YYYY-MM-DD')+"&from="+end.format('YYYY-MM-DD')+"<?php echo "&userid=".#$_GET['userid']."&carid=".#$_GET['carid']."&goal=".#$_GET['goal']."&order=".#$_GET['order']."&order_type=".#$_GET['order_type']."&page=".#$_GET['page']."&count=".#$_GET['count']; ?>";
});
});
</script>

Try this.
$('input[name="daterange"]').datepicker( {
format: "mm-yyyy",
viewMode: "months",
minViewMode: "months"
});

Try this
$("#datepicker").datepicker( {
format: "mm-yyyy" // yyyy-mm
});
Bootstrap DatePicker format - bootstrap-datepicker.readthedocs.io

Set 'viewMode' and 'format'. Try
$('input[name="daterange"]').datetimepicker({
<?php if(isset($_GET['to']) && $_GET['to'] != '') { ?>startDate:'<?php echo #$_GET['to']; ?>',<?php } ?>
<?php if(isset($_GET['to']) && $_GET['to'] != '') { ?>endDate:'<?php echo #$_GET['from']; ?>',<?php } ?>
viewMode: 'years',
format: 'MM/YYYY'
}

Related

Image is not uploading in CI

I am new in CI and I am trying to upload image but dont know why its not uploading,
Here is my view,
<form action="<?php echo site_url('admin/test/'.$param2.'/add'); ?>" enctype="multipart/form-data" method="post" id = 'mcq_form'>
<input type="hidden" name="question_type" value="mcq">
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="attachment" name="attachment" onchange="changeTitleOfImageUploader(this)">
<label class="custom-file-label" for="attachment"><?php echo get_phrase('attachment'); ?></label>
</div>
</div>
<div class="text-center">
<button class = "btn btn-success" id = "submitButton" type="button" name="button" data-dismiss="modal"><?php echo get_phrase('submit'); ?></button>
</div>
</form>
<script>
$('#submitButton').click( function(event) {
$.ajax({
url: '<?php echo site_url('admin/test/'.$param2.'/add'); ?>',
type: 'post',
data: $('form#mcq_form').serialize(),
success: function(response) {
if (response == 1) {
success_notify('<?php echo get_phrase('question_has_been_added'); ?>');
}else {
error_notify('<?php echo get_phrase('no_options_can_be_blank_and_there_has_to_be_atleast_one_answer'); ?>');
}
}
});
showLargeModal('<?php echo site_url('modal/popup/test/'.$param2); ?>', '<?php echo get_phrase('test'); ?>');
});
</script>
on Controller I am trying to get image data but dont know why its not fetching,
print_r($_FILES['attachment']['name']);
die();
I don't understand, what I am missing. Please help me out.
You can try it like this
<input type="file" name="logo" class="form-control" value="">
in your controller
$logo = '';
if (!empty($_FILES['logo']['name'])) {
/* Conf Image */
$file_name = 'profile_' . time() . rand(100, 999);
$configImg['upload_path'] = './uploads/profile/';
$configImg['file_name'] = $file_name;
$configImg['allowed_types'] = 'png|jpg|jpeg';
$configImg['max_size'] = 2000;
$configImg['max_width'] = 2000;
$configImg['max_height'] = 2000;
$configImg['file_ext_tolower'] = TRUE;
$configImg['remove_spaces'] = TRUE;
$this->load->library('upload', $configImg, 'logo');
if ($this->logo->do_upload('logo')) {
$uploadData = $this->logo->data();
$logo = 'uploads/profile/' . $uploadData['file_name'];
} else {
$this->custom_errors['logo'] = $this->logo->display_errors('', '');
}
}

how can i show this $data value in the form input field?

how to show $data value in form input field?
<head>
<script>
$(function () {
$("#task_id").change(function () {
var task_id = $(this).val();
var url = "status/tasks/get_task_info/" + task_id;
$.ajax({
url: url,
beforeSend: function () {
$(".load-taskinfo").html('<img src="images/ajax/ajax-loader10.gif">');
},
success: function (response) {
$data = JSON.parse(response);
}
});
});
});
</script>
</head>
<body>
<div class="span3">
<div class="control-group <?php echo (form_error('progress_percent')) ? 'error' : ''; ?>">
<label class="control-label" for="progress_percent">Progress (In %) :</label>
<div class="controls">
<?php echo form_input(array(
'name' => 'progress_percent',
'id' => 'progress_percent',
'maxlength' => 160
)); ?>
<?php if (form_error('progress_percent')) : ?>
<span class="help-inline">
<?php echo form_error('progress_percent'); ?>
</span>
<?php endif; ?>
</div>
</div>
</div>
</body>
In your success callback, use jQuery selector to select the input by ID or by name, and fill its value.
success: function (response) {
var $data = JSON.parse(response);
$('#progress_percent').val($data);
}

Display message is Not working for out of stock products

please visit link1 , you can see there is option to find shipping is available or not for particular zip code : image1
here shipping charges are working for instock products but not for out-of -stock products.
Form.phtml
app/design/frontend/default/default/template/webdevlopers/productpageshipping/estimate/form.phtml
<?php if ($this->isFieldVisible('postcode')): ?>
<li class="item">
<label for="search"<?php if ($this->isFieldRequired('postcode')):?> class="required" <?php endif;?>>
<?php if ($this->isFieldRequired('postcode')):?>
<em>*</em>
<?php endif;?>
<?php echo Mage::helper('webdevlopers_productpageshipping')->__('') ?>
</label>
<div class="search">
<input placeholder="Enter your PIN Code"
class="input-text validate-postcode<?php if ($this->isFieldRequired('postcode')):?> required-entry<?php endif;?>"
type="text" id="estimate_postcode"
name="estimate[postcode]"
value="<?php echo $this->htmlEscape($this->getFieldValue('postcode')) ?>"
onkeydown="if (event.keyCode == 13) { return false;}" />
</div>
</li>
<?php endif; ?>
Script
<script type="text/javascript">
var $ = jQuery.noConflict();
(function($) {
$(document).ready(function(){
$('#estimate_postcode').keydown(function(e){
var items = $$(['.shipping-estimation-form input',
'.shipping-estimation-form select',
'#product_addtocart_form input',
'#product_addtocart_form select']);
var estimationUrl = '<?php echo $this->jsQuoteEscape($this->getEstimateUrl());?>';
var parameters = Form.serializeElements(items, true);
console.log("zipcode onkeypress worked");
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == '13'){
//disable default enter action
e.preventDefault();
console.log("Enter button was pressed");
$('#shipping-estimate-loading-message').show();
$('#shipping-estimate-results').hide();
new Ajax.Updater('shipping-estimate-results', estimationUrl, {
parameters: parameters,
onComplete: function() {
console.log("ajax updater worked");
$('#shipping-estimate-loading-message').hide();
$('#shipping-estimate-results').show();
$('#unique_id').hide();
//$('unique_id').hide();
$('estimate_postcode').val()
}
});
};
});
});
}) ( jQuery );
function estimateProductShipping()
{
var estimationUrl = '<?php echo $this->jsQuoteEscape($this->getEstimateUrl());?>';
var items = $$(['.shipping-estimation-form input',
'.shipping-estimation-form select',
'#product_addtocart_form input',
'#product_addtocart_form select']);
var validationResult = true;
// Check the valid input
if (!items.map(Validation.validate).all()) {
return;
}
var parameters = Form.serializeElements(items, true);
$('shipping-estimate-loading-message').show();
$('shipping-estimate-results').hide();
new Ajax.Updater('shipping-estimate-results', estimationUrl, {
parameters: parameters,
onComplete: function() {
console.log("ajax updater worked");
$('shipping-estimate-loading-message').hide();
$('shipping-estimate-results').show();
// $('#unique_id').hide();
$('unique_id').hide();
$('estimate_postcode').val()
}
});
}
//]]>
</script>
complete code of the file : https://gist.github.com/anonymous/ebe868508b2c21e9c032
result.phtml
app/design/frontend/default/default/template/webdevlopers/productpageshipping/estimate/result.phtml
<div class="block block-shipping-estimate block-shipping-results">
<div class="block-title">
<strong><span>
<?php echo Mage::helper('webdevlopers_productpageshipping')->getShiptitle(); ?>
</span></strong>
</div>
<div class="block-content">
<?php if ($this->getResult()):?>
<dl>
<?php foreach ($this->getResult() as $code => $_rates): ?>
<dt><?php echo $this->getCarrierName($code) ?></dt>
<dd>
<ul>
<?php foreach ($_rates as $_rate): ?>
<li<?php if ($_rate->getErrorMessage()) echo ' class="error-msg"';?>>
<?php if ($_rate->getErrorMessage()): ?>
<?php echo $_rate->getErrorMessage() ?>
<?php else: ?>
<?php
// echo $_rate->getMethodTitle()
?>
<?php $_excl = $this->getShippingPrice($_rate->getPrice(), $this->helper('tax')->displayShippingPriceIncludingTax()); ?>
<?php $_incl = $this->getShippingPrice($_rate->getPrice(), true); ?>
<!-- sat -->
<p>
<?php echo "Shipping is available";?>
</p>
<p class="vship1">
<?php echo "Selling Price + " . str_replace('.00','',$_excl) . " Delivery ";?>
</p>
<!-- sat -->
<?php if ($this->helper('tax')->displayShippingBothPrices() && $_incl != $_excl): ?>
(<?php echo Mage::helper('webdevlopers_productpageshipping')->__('Incl. Tax'); ?> <?php echo $_incl; ?>)
<?php endif; ?>
<?php endif ?>
</li>
<?php endforeach; ?>
</ul>
</dd>
<?php endforeach; ?>
</dl>
<?php else: ?>
<?php //echo $this->getMessagesBlock()->toHtml(); ?>
<?php echo Mage::helper('webdevlopers_productpageshipping')->getResult(); ?>
<?php endif;?>
</div>
</div>
app/code/community/webdevolopers/productpageshiping/Block/estimate/ Result.php
<?php
class WebDevlopers_ProductPageShipping_Block_Estimate_Result extends WebDevlopers_ProductPageShipping_Block_Estimate_Abstract
{
public function getResult()
{
return $this->getEstimate()->getResult();
}
public function hasResult()
{
return $this->getResult() !== null;
}
public function getCarrierName($code)
{
$carrier = Mage::getSingleton('shipping/config')->getCarrierInstance($code);
if ($carrier) {
return $carrier->getConfigData('title');
}
return null;
}
public function getShippingPrice($price, $flag)
{
return $this->formatPrice(
$this->helper('tax')->getShippingPrice(
$price,
$flag,
$this->getEstimate()
->getQuote()
->getShippingAddress()
)
);
}
public function formatPrice($price)
{
return $this->getEstimate()
->getQuote()
->getStore()
->convertPrice($price, true);
}
}
changing the settings in System > Config > Inventory
Easiest way to do this is select all products you want to allow to be backordered, then select Update attributes from the actions drop down and click submit. then shipping problem will not be problem.

keep all selected values after submit

I'm stuck with this script I'm using:
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="includes/css/style.css" type="text/css" rel="stylesheet" />
<link href="includes/css/wt-gallery.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="includes/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="includes/js/configuratie.js"></script>
<script type="text/javascript" src="includes/js/jquery.wt-gallery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
$('#wait_1').show();
$('#result_1').hide();
$.get("func.php", {
func: "drop_1",
drop_var: $('#drop_1').val()
}, function(response){
$('#result_1').fadeOut();
setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
});
return false;
});
$('#wait_2').hide();
$('#drop_2').change(function(){
$('#wait_2').show();
$('#result_2').hide();
$.get("func.php", {
func: "drop_2",
drop_var: $('#drop_2').val()
}, function(response){
$('#result_2').fadeOut();
setTimeout("finishAjax2('result_2', '"+escape(response)+"')", 400);
});
return false;
});
$('#wait_3').hide();
$('#drop_3').change(function(){
$('#wait_3').show();
$('#result_3').hide();
$.get("func.php", {
func: "drop_3",
drop_var: $('#drop_3').val()
}, function(response){
$('#result_3').fadeOut();
setTimeout("finishAjax3('result_3', '"+escape(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response) {
$('#wait_1').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
function finishAjax2(id, response) {
$('#wait_2').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
function finishAjax3(id, response) {
$('#wait_3').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
function finishAjax_tier_three(id, response) {
$('#wait_2').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
function finishAjax_tier_four(id, response) {
$('#wait_3').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
function finishAjax_tier_five(id, response) {
$('#wait_4').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
</script>
</head>
<?php
$website = "it";
// configuratie file en db connect
include "includes/inc/config.inc.php";
include('db.php');
include_once "class/slider.class.php";
include('func.php');
$slideralbum = new slideralbum($dbo);
$sliders = $slideralbum->getSliderItems($website);
?>
<body>
<p>
<form name="product" action="" method="post">
<select name="drop_1" id="drop_1">
<option value="" selected="selected" disabled="disabled">Selecteer Merk</option>
<?php getTierOne(); ?>
</select>
<span id="wait_1" style="display: none;">
<img alt="Please Wait" src="ajax-loader.gif"/>
</span>
<span id="result_1" style="display: none;"></span>
<span id="wait_2" style="display: none;">
<img alt="Please Wait" src="ajax-loader.gif"/>
</span>
<span id="result_2" style="display: none;"></span>
<span id="wait_3" style="display: none;">
<img alt="Please Wait" src="ajax-loader.gif"/>
</span>
<span id="result_3" style="display: none;"></span>
<span id="wait_4" style="display: none;">
<img alt="Please Wait" src="ajax-loader.gif"/>
</span>
<span id="result_4" style="display: none;"></span>
<INPUT TYPE="button" VALUE="Refresh" onclick='location.reload()'>
</form>
</p>
<p>
<?php if(isset($_POST['submit'])){
$drop = $_POST['drop_1'];
$drop_2 = $_POST['drop_2'];
$drop_3 = $_POST['drop_3'];
$drop_4 = $_POST['drop_4'];
$drop_5 = $_POST['drop_5'];
?>
<table border="1" bordercolor="#B5B5B5" style="background-color:#FFFFFF" width="250" cellpadding="3" cellspacing="3">
<tr>
<td>Merk:</td>
<td><?php echo $drop;?></td>
</tr>
<tr>
<td>Model:</td>
<td><?php echo $drop_2;?></td>
</tr>
<tr>
<td>Bouwjaar:</td>
<td><?php echo $drop_3;?></td>
</tr>
<tr>
<td>Kleur:</td>
<td><?php echo $drop_4;?></td>
</tr>
</table>
<?php
}
?>
<div id="banner-block"> <!-- Begin of Slideshow -->
<div class="container">
<div class="wt-gallery" style="width:920px; height:375px;">
<div class="main-screen">
<?php if(isset($_POST['submit'])){
$drop = $_POST['drop_1'];
$drop_2 = $_POST['drop_2'];
$drop_3 = $_POST['drop_3'];
$drop_4 = $_POST['drop_4'];
$drop_5 = $_POST['drop_5'];
?>
<img src="images/<?php echo $drop_5;?>" alt="<?php echo $drop_5;?>" width="920" height="360"/>
<?php
}
?>
<noscript>
<!-- placeholder image when javascript is off -->
<img src="../images/triworks_abstract27.jpg" alt=""/>
</noscript>
</div>
<div class="cpanel">
<div class="thumbs-back"></div>
<div class="thumbnails">
<ul>
<?php $sliders = $slideralbum->getSliderItems($website, NULL);
foreach($sliders as $slider){
?>
<li effect="none">
<div>
<a href="<?php echo $slider->slider_img; ?>" height="360" width="720" alt="<?php echo $slider->slider_img; ?>" />
<img src="<?php echo $slider->slider_tmb; ?>" height="70" width="125" alt="<?php echo $slider->slider_tmb; ?>" />
</a>
</div>
<div class="data">
</div>
</li>
<?php
}
?>
</ul>
</div>
<div class="thumbs-fwd"></div>
</div>
</div>
</div>
</div>
</body>
</html>
func.php
<?php
//**************************************
// Page load dropdown results //
//**************************************
function getTierOne()
{
$result = mysql_query("SELECT DISTINCT make FROM vehicles ORDER BY make ASC")
or die(mysql_error());
while($tier = mysql_fetch_array( $result ))
{
?>
<option value="<?php echo $tier['make'];?>"<?php echo (isset($_POST['drop_1']) && $_POST['drop_1'] == $tier['make']) ? ' selected="selected"' : '' ; ?>><?php echo $tier['make'];?></option>
<?php
}
}
//**************************************
// First selection results //
//**************************************
if (isset($_GET['func'])&& $_GET['func'] == "drop_1" ) {
drop_1($_GET['drop_var']);
}
function drop_1($drop_var)
{
include_once('db.php');
$result = mysql_query("SELECT DISTINCT model FROM vehicles WHERE make='$drop_var' ORDER BY model")
or die(mysql_error());
echo '<select name="drop_2" id="drop_2">
<option value=" " disabled="disabled" selected="selected">Selecteer Model</option>';
while($drop_2 = mysql_fetch_array( $result ))
{
echo '<option value="'.$drop_2['model'].'">'.$drop_2['model'].'</option>';
}
echo '</select>';
echo "<script type=\"text/javascript\">
$('#wait_2').hide();
$('#drop_2').change(function(){
$('#wait_2').show();
$('#result_2').hide();
$.get(\"func.php\", {
func: \"drop_2\",
drop_var: $('#drop_1').val(),
drop_var2: $('#drop_2').val()
}, function(response){
$('#result_2').fadeOut();
setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400);
});
return false;
});
</script>";
}
//**************************************
// Second selection results //
//**************************************
if (isset($_GET['func'])&& $_GET['func'] == "drop_2" ) {
drop_2($_GET['drop_var'], $_GET['drop_var2']);
}
function drop_2($drop_var, $drop_var2)
{
include_once('db.php');
$result = mysql_query("SELECT DISTINCT year FROM vehicles WHERE make='$drop_var' AND model='$drop_var2'")
or die(mysql_error());
echo '<select name="drop_3" id="drop_3">
<option value=" " disabled="disabled" selected="selected">Selecteer Jaar</option>';
while($drop_3 = mysql_fetch_array( $result ))
{
echo '<option value="'.$drop_3['year'].'">'.$drop_3['year'].'</option>';
}
echo '</select>';
echo "<script type=\"text/javascript\">
$('#wait_3').hide();
$('#drop_3').change(function(){
$('#wait_3').show();
$('#result_3').hide();
$.get(\"func.php\", {
func: \"drop_3\",
drop_var: $('#drop_1').val(),
drop_var2: $('#drop_2').val(),
drop_var3: $('#drop_3').val()
}, function(response){
$('#result_3').fadeOut();
setTimeout(\"finishAjax_tier_four('result_3', '\"+escape(response)+\"')\", 400);
});
return false;
});
</script>";
}
//**************************************
// Third selection results //
//**************************************
if (isset($_GET['func'])&& $_GET['func'] == "drop_3" ) {
drop_3($_GET['drop_var'], $_GET['drop_var2'], $_GET['drop_var3']);
}
function drop_3($drop_var, $drop_var2, $drop_var3)
{
include_once('db.php');
$result = mysql_query("SELECT DISTINCT color FROM vehicles WHERE make='$drop_var' AND model='$drop_var2' AND year='$drop_var3'")
or die(mysql_error());
echo '<select name="drop_4" id="drop_4">
<option value=" " disabled="disabled" selected="selected">Selecteer Kleur</option>';
while($drop_4 = mysql_fetch_array( $result ))
{
if ($drop_4['color'] != "") {
echo '<option value="'.$drop_4['color'].'">'.$drop_4['color'].'</option>';
}
}
echo '</select>';
echo "<script type=\"text/javascript\">
$('#wait_4').hide();
$('#drop_4').change(function(){
$('#wait_4').show();
$('#result_4').hide();
$.get(\"func.php\", {
func: \"drop_4\",
drop_var: $('#drop_1').val(),
drop_var2: $('#drop_2').val(),
drop_var3: $('#drop_3').val(),
drop_var4: $('#drop_4').val()
}, function(response){
$('#result_4').fadeOut();
setTimeout(\"finishAjax_tier_five('result_4', '\"+escape(response)+\"')\", 400);
});
return false;
});
</script>";
}
//**************************************
// Fourth selection results //
//**************************************
if(isset($_GET['func'])&& $_GET['func'] == "drop_4" ) {
drop_4($_GET['drop_var'], $_GET['drop_var2'], $_GET['drop_var3'], $_GET['drop_var4']);
}
function drop_4($drop_var, $drop_var2, $drop_var3, $drop_var4)
{
include_once('db.php');
$result = mysql_query("SELECT * FROM vehicles WHERE make='$drop_var' AND model='$drop_var2' AND year='$drop_var3' AND color='$drop_var4'")
or die(mysql_error());
while($drop_5 = mysql_fetch_array( $result ))
{
if ($drop_5['img'] != "") {
echo '<input type="checkbox" name="drop_5" id="drop_5" style="display:none;" checked value="'.$drop_5['img'].'"/>';
}
}
echo '<input type="submit" name="submit" value="Submit" />';
}
?>
After I selected all my dropdown items and press submit it is working good but all the selected values are gone...
If you want to change color you have to go to the whole dropdown list again. Is it possible to keep all the selected values after submit?
Thanks in advance
Kind Regards
Joep
You are using GET requests to display each dropdown list in turn, and then using a POST request to submit your completed form. You should make sure that all the dropdowns are displayed after the POST request.
In index.php, I think you could try something like that :
<span id="result_1" style="display: none;">
<?php
if (isset($_POST['submit']) {
drop_1($_POST['drop_1']);
}
?>
</span>
...
<span id="result_2" style="display: none;">
<?php
if (isset($_POST['submit']) {
drop_2($_POST['drop_1'], $_POST['drop_2']);
}
?>
</span>
...
<span id="result_3" style="display: none;">
<?php
if (isset($_POST['submit']) {
drop_3($_POST['drop_1'], $_POST['drop_2'], $_POST['drop_3']);
}
?>
</span>
etc...
Anyway, the idea is to reuse the functions that build your dropdowns, based on the values in the $_POST.

How to use AJAX to populate state list depending on Country list?

I have the code below that will change a state dropdown list when you change the country list.
How can I make it change the state list ONLY when country ID number 234 and 224 are selected?
If another country is selected it should be change into this text input box
<input type="text" name="othstate" value="" class="textBox">
The form
<form method="post" name="form1">
<select style="background-color: #ffffa0" name="country" onchange="getState(this.value)">
<option>Select Country</option>
<option value="223">USA</option>
<option value="224">Canada</option>
<option value="225">England</option>
<option value="226">Ireland</option>
</select>
<select style="background-color: #ffffa0" name="state">
<option>Select Country First</option>
</select>
The javascript
<script>
function getState(countryId)
{
var strURL="findState.php?country="+countryId;
var req = getXMLHTTP();
if (req)
{
req.onreadystatechange = function()
{
if (req.readyState == 4)
{
// only if "OK"
if (req.status == 200)
{
document.getElementById('statediv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
Just check the countryId value before you do the AJAX request and only perform the request if the countryId is in the allowable range. In the case where the countryId doesn't match, I would hide the select (probably clear it's value, too) and show an already existing input that was previously hidden. The reverse should be done if an allowable country is chosen.
jQuery example below:
<form method="post" name="form1">
<select style="background-color: #ffffa0" name="country" onchange="getState(this.value)">
<option>Select Country</option>
<option value="223">USA</option>
<option value="224">Canada</option>
<option value="225">England</option>
<option value="226">Ireland</option>
</select>
<select style="background-color: #ffffa0" name="state">
<option>Select Country First</option>
</select>
<input type="text" name="othstate" value="" class="textBox" style="display: none;">
</form>
$(function() {
$('#country').change( function() {
var val = $(this).val();
if (val == 223 || val == 224) {
$('#othstate').val('').hide();
$.ajax({
url: 'findState.php',
dataType: 'html',
data: { country : val },
success: function(data) {
$('#state').html( data );
}
});
}
else {
$('#state').val('').hide();
$('#othstate').show();
}
});
});
I think the simple thing to do is to provide a state dropdown and a text entry box with different ids. Set the display of both to none and then you just need to surround your contents of getState() with
if (countryId == 233 || countryId == 234) {
/* Ajax state population here */
dropdownId.display = 'block';
textEntryId.display = 'none';
}
else {
textEntryId.display = 'block';
dropdownId.display = 'none';
}
(where dropdownId and textEntryId are the ids of the relevant UI components) so you enable/display the display for the state dropdown or the text entry upon selection.
JQuery is all well and good, but I wouldn't introduce it just to solve this problem.
EDIT: here is a solution that works quite well for the task, adapting the lines of Tvanfosson:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">
</script>
<script>
$(function() {
$('#country').change( function() {
var val = $(this).val();
if (val == 223 || val == 224) {
$('#othstate').val('').hide();
$.ajax({
url: 'findState.php',
dataType: 'html',
data: { country : val },
success: function(data) {
$('#state').html( data );
}
});
}
else {
$('#state').val('').hide();
$('#othstate').show();
}
});
});
</script>
<select style="background-color: #ffffa0" name="country" id=country >
<option>Select Country</option>
<option value="223">USA</option>
<option value="224">Canada</option>
<option value="225">England</option>
<option value="226">Ireland</option>
</select>
<select style="background-color: #ffffa0" name="state">
<option>Select Country First</option>
</select>
<input type="text" name="othstate" id=othstate value="" class="textBox" style="display: none;">
As you can see, I eliminated the <form> element which is not absolutely necessary but can be added (and then has to be used properly in case JS is deactivated at the users end. See
here.
I also eliminated the onchange event which is being replaced by the 'change()` jquery function.
**index.html**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Populate City Dropdown Using jQuery Ajax</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select.country").change(function(){
var selectedCountry = $(".country option:selected").val();
$.ajax({
type: "POST",
url: "ajaxServer.jsp",
data: { country : selectedCountry }
}).done(function(data){
$("#response").html(data);
});
});
});
</script>
<style>
select { width: 10em }
</style>
</head>
<body>
<form>
<table>
<tr>
<td> <label>Country:</label></td>
<td> <select class="country">
<option>Select</option>
<option value="usa">United States</option>
<option value="india">India</option>
<option value="uk">United Kingdom</option>
</select>
</td>
</tr>
<tr><td >
<label>States:</label></td>
<td> <select id="response">
<option>Select State</option>
</select>
</td></tr>
</table>
</form>
</body>
</html>
**ajaxServer.jsp**
<option>Select State</option>
<%
String count=request.getParameter("country");
String india[]={"Mumbai", "New Delhi", "Bangalore"};
String usa[]={"New Yourk", "Los Angeles","California"};
String uk[]={"London", "Manchester", "Liverpool"};
String states[];
if(count.equals("india"))
{
for(int i=0;i<=2;i++)
{
out.print("<option>"+india[i]+"</option>");
}
}
else if(count.equals("usa"))
{
for(int i=0;i<usa.length;i++)
{
out.print("<option>"+usa[i]+"</option>");
}
}
else if(count.equals("uk"))
{
for(int i=0;i<=2;i++)
{
out.print("<option>"+uk[i]+"</option>");
}
}
%>
VK API just select country , get it id and select city from
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
var _getCountry = function() {
$j.ajax({
url: "http://api.vk.com/method/database.getCountries",
data: {
'v': 5.5,
'need_all': 0,
'code' : 'RU,UA,BY,KZ,KG,LV,EE'
// 'count': 10
},
dataType: 'jsonp',
success: function(data, status) {
if (status !== 'success') {
return false;
}
console.log(data.response, status);
$j.each(data.response.items, function(i, item) {
console.log("each country");
var newOption = '<option id="' + item.id + '" value="' + item.title + '">' + item.title + '</option>';
country_options.push(newOption);
});
document.getElementById('countrylist').innerHTML = country_options;
}
});
}
var _getCity = function(country_id) {
$j.ajax({
url: "http://api.vk.com/method/database.getCities",
data: {
'v': 5.61,
'need_all': 0,
'country_id': country_id
},
dataType: 'jsonp',
success: function(data, status) {
if (status !== 'success') {
return false;
}
console.log(data.response, status);
$j.each(data.response.items, function(i, item) {
console.log("each city");
var newOption = '<option id="' + item.id + '" value="' + item.title + '">' + item.title + '</option>';
city_options.push(newOption);
});
document.getElementById('citylist').innerHTML = city_options;
}
});
}
var city_options = [];
var country_options = [];
$j(document).ready(function () {
_getCountry();
$j('#country').on('input',function() {
var opt = $j('option[value="'+$j(this).val()+'"]');
var countryid = opt.attr('id');
_getCity(countryid);
});
});
</script>
<div class="form-group">
<label class="col-lg-4 control-label">Страна:</label>
<div class="col-lg-8">
<div class="controls">
<input name="country" list="countrylist" id="country" class="form-control" />
<datalist id="countrylist">
</datalist>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-4 control-label">Город:</label>
<div class="col-lg-8">
<input name="city" list="citylist" id="city" class="form-control"/>
<datalist id="citylist">
</datalist>
</div>
</div>
////////////////// connection file con.php rishabh
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(! $conn ) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db( 'testajax' );
?>
/////////////////////////// index.php rishabh
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<?php
include('con.php');
?>
<form>
<div class="frmDronpDown">
<div class="row">
<table><tr><td><label>Country:</label><br/>
<select name="country" id="country" data-name="country" class="demoInputBox" onChange="getCountry(this.value);">
<option value="">Select Country</option>
<?php
$sql = mysql_query("SELECT distinct country FROM statecont ");
while($result=mysql_fetch_array($sql)){
?>
<option value="<?php echo $result['country']; ?>"><?php echo $result['country']; ?></option>
<?php
}
?>
</select> </td>
<td>
<label>Phone:</label><br/>
<select name="phone" id="phone" data-name="phone" class="demoInputBox" onChange="getPhone(this.value);">
<option value="">Select Country</option>
<?php
$sql = mysql_query("SELECT distinct phone FROM statecont ");
while($result=mysql_fetch_array($sql)){
?>
<option value="<?php echo $result['phone']; ?>"><?php echo $result['phone']; ?></option>
<?php
}
?>
</select>
</td></tr></table>
</div>
<div id="state-list"></div>
</div>
</form>
<script>
function getCountry(val) {
var dataname = $('#country').attr('data-name');
console.log(dataname);
$.ajax({
type: "POST",
url: "data.php",
data: {
value_name: val,
colomn_name: dataname
},
success: function (data){
$("#state-list").html(data);
}
});
}
function getPhone(val) {
var dataname = $('#phone').attr('data-name');
console.log(dataname);
$.ajax({
type: "POST",
url: "data.php",
data: {
value_name: val,
colomn_name: dataname
},
success: function (data){
$("#state-list").html(data);
}
});
}
</script>
// ////////////////////data file data.php rishabh
<?php
$val = $_POST["value_name"];
$colomn = $_POST["colomn_name"];
include('con.php');
$sql_aa = mysql_query("SELECT * FROM statecont where ".$colomn."='$val'"); ?>
<table>
<tr><td>State</td><td>Countery</td></tr>
<?php while($result_aa=mysql_fetch_array($sql_aa)){ ?>
<tr><td><?php echo $result_aa['state']; ?></td><td><?php echo $result_aa['country']; ?></td></tr>
<?php } ?>
</table>

Resources