Hello.
Today I want to show you how to select values from dropdown, Write or insert values from dropdown and save to database and manage it.
DB table name : maternal_disease
fields: mdid, cid, shortname, status, display, createdby, createdate, updatedby, updatedate
main php file code :
<div class="col-sm-4">
<input type="hidden" name="jobskillarray" id="jobskillarray" value="">
<p id="jobskillmsg"></p>
<div id="servicesList2" class="servicesList2"> </div>
<input type="text" name="tag_name2" id="tag_name2" placeholder="Required Skills" list="skilllist2">
<button type="button" class="btn btn-primary" id="addSkillBtn2">Add This Disease</button>
<datalist id="skilllist2">
<?php foreach ($maternalDiseaseList as $tag) { ?>
<option ><?php echo $tag['shortname'] ?></option>
<?php } ?>
</datalist>
</div>
<script type="text/javascript">
$(document).ready(function() {
var quotations = [];
var quotations_id = [];
$('#addSkillBtn2').click(function(e) {
//debugger;
var len = quotations_id.length;
$("#jobskillmsg").html('');
if (len < 15)
{
let tag_name2 = $('#tag_name2').val();
let tagname2 = tag_name2.slice(0, 100);
$("#skillMsg").html('');
console.log(quotations);
//console.log(quotations_id);
//debugger
var data = {};
if ( tagname2.length >= 2 ){
//if ($.inArray(tagname2, quotations) == 0) {
if ($.inArray(tagname2, quotations) >= 0) {
console.log(quotations);
}
else {
//console.log(quotations);
//console.log(quotations_id);
//debugger;
$.ajax({
url: 'ajax.php',
type: 'POST',
dataType: 'json',
data: {set_maternal_disease: tagname2},
//processData: false,
//contentType: false,
beforeSend: function(){
$('#mydiv').show();
},
success: function(response) {
$('#mydiv').hide();
//console.log(quotations);
//console.log(quotations_id);
//debugger;
if (response.message == 'success') {
var itemname = response.data.name;
var itemid = response.data.id;
//console.log('Value Not exists');
quotations.push(itemname);
quotations_id.push(itemid);
var item = document.createElement("p");
var skillli = '<span class="skillable" data-value="'+response.data.id+'" data-name="'+response.data.name+'" id="js_'+response.data.id+'" ><label for="">'+response.data.name+'</label><i title="delete this skill" id="icon-minus2" class="red right icon-minus-sign"> x </i></span>';
item.innerHTML = skillli;
document.getElementsByClassName("servicesList2")[0].append(item);
$('#tag_name2').val('');
//console.log(quotations);console.log(quotations_id);
$('#jobskillarray').val(quotations_id);
} else if (response.message == 'duplicate') {
// setTimeout(function() {
// $("#skillMsgDuplicate").hide('blind', {}, 500)
// }, 5000);
$("#skillMsg").html("<div class='col-md-12'><div class='alert alert-warning'><strong>Sorry! </strong> Duplicate skill cannot be added. </div> </div>");
} else if (response.message == 'limit') {
// setTimeout(function() {
// $("#skillMsgLimit").hide('blind', {}, 500)
// }, 5000);
$("#skillMsg").html("<div class='col-md-12'><div class='alert alert-danger'><strong>Sorry! </strong> Maximum 5 skills are allowed. </div> </div>");
} else {
alert('Error! Try again or refresh page.');
}
},
error: function() {
$('#mydiv').hide();
alert('Error occurred while adding the skill.');
}
});
return false;
} //end if check value exist
}
}
else
{
$("#jobskillmsg").html("<div class='col-md-12'><div class='alert alert-danger'><strong>Sorry! </strong> Maximum 15 Disease are allowed. </div> </div>");
}
console.log(quotations);
console.log(quotations_id);
});
//end skill to post ajax
//remove jobpost skill by modal
$(document).on('click','#icon-minus2',
function()
{
var y = quotations_id;
//if (confirm("Are you sure?")) {
var $list = $("#servicesList");
listValue = $(this).parent().data('value');
listName = $(this).parent().data('name');
//alert(listValue);
if (listValue !== '') {
$("p span#js_"+listValue).remove();
quotations_id = jQuery.grep(quotations_id, function(value) {
return value != listValue;
});
$('#jobskillarray').val(quotations_id);
quotations = jQuery.grep(quotations, function(value) {
return value != listName;
});
//console.log(quotations_id);
//console.log(quotations);
}
//}
});
//end
});
</script>
<input type="hidden" name="jobskillarray" id="jobskillarray" value="">
<p id="jobskillmsg"></p>
<div id="servicesList2" class="servicesList2"> </div>
<input type="text" name="tag_name2" id="tag_name2" placeholder="Required Skills" list="skilllist2">
<button type="button" class="btn btn-primary" id="addSkillBtn2">Add This Disease</button>
<datalist id="skilllist2">
<?php foreach ($maternalDiseaseList as $tag) { ?>
<option ><?php echo $tag['shortname'] ?></option>
<?php } ?>
</datalist>
</div>
<script type="text/javascript">
$(document).ready(function() {
var quotations = [];
var quotations_id = [];
$('#addSkillBtn2').click(function(e) {
//debugger;
var len = quotations_id.length;
$("#jobskillmsg").html('');
if (len < 15)
{
let tag_name2 = $('#tag_name2').val();
let tagname2 = tag_name2.slice(0, 100);
$("#skillMsg").html('');
console.log(quotations);
//console.log(quotations_id);
//debugger
var data = {};
if ( tagname2.length >= 2 ){
//if ($.inArray(tagname2, quotations) == 0) {
if ($.inArray(tagname2, quotations) >= 0) {
console.log(quotations);
}
else {
//console.log(quotations);
//console.log(quotations_id);
//debugger;
$.ajax({
url: 'ajax.php',
type: 'POST',
dataType: 'json',
data: {set_maternal_disease: tagname2},
//processData: false,
//contentType: false,
beforeSend: function(){
$('#mydiv').show();
},
success: function(response) {
$('#mydiv').hide();
//console.log(quotations);
//console.log(quotations_id);
//debugger;
if (response.message == 'success') {
var itemname = response.data.name;
var itemid = response.data.id;
//console.log('Value Not exists');
quotations.push(itemname);
quotations_id.push(itemid);
var item = document.createElement("p");
var skillli = '<span class="skillable" data-value="'+response.data.id+'" data-name="'+response.data.name+'" id="js_'+response.data.id+'" ><label for="">'+response.data.name+'</label><i title="delete this skill" id="icon-minus2" class="red right icon-minus-sign"> x </i></span>';
item.innerHTML = skillli;
document.getElementsByClassName("servicesList2")[0].append(item);
$('#tag_name2').val('');
//console.log(quotations);console.log(quotations_id);
$('#jobskillarray').val(quotations_id);
} else if (response.message == 'duplicate') {
// setTimeout(function() {
// $("#skillMsgDuplicate").hide('blind', {}, 500)
// }, 5000);
$("#skillMsg").html("<div class='col-md-12'><div class='alert alert-warning'><strong>Sorry! </strong> Duplicate skill cannot be added. </div> </div>");
} else if (response.message == 'limit') {
// setTimeout(function() {
// $("#skillMsgLimit").hide('blind', {}, 500)
// }, 5000);
$("#skillMsg").html("<div class='col-md-12'><div class='alert alert-danger'><strong>Sorry! </strong> Maximum 5 skills are allowed. </div> </div>");
} else {
alert('Error! Try again or refresh page.');
}
},
error: function() {
$('#mydiv').hide();
alert('Error occurred while adding the skill.');
}
});
return false;
} //end if check value exist
}
}
else
{
$("#jobskillmsg").html("<div class='col-md-12'><div class='alert alert-danger'><strong>Sorry! </strong> Maximum 15 Disease are allowed. </div> </div>");
}
console.log(quotations);
console.log(quotations_id);
});
//end skill to post ajax
//remove jobpost skill by modal
$(document).on('click','#icon-minus2',
function()
{
var y = quotations_id;
//if (confirm("Are you sure?")) {
var $list = $("#servicesList");
listValue = $(this).parent().data('value');
listName = $(this).parent().data('name');
//alert(listValue);
if (listValue !== '') {
$("p span#js_"+listValue).remove();
quotations_id = jQuery.grep(quotations_id, function(value) {
return value != listValue;
});
$('#jobskillarray').val(quotations_id);
quotations = jQuery.grep(quotations, function(value) {
return value != listName;
});
//console.log(quotations_id);
//console.log(quotations);
}
//}
});
//end
});
</script>
ajax.php
//display maternal disease
if(isset($_POST['set_maternal_disease'])){
$id_edit = string_sanitize(trim($_POST['set_maternal_disease']));
$userid = $_SESSION['userid'];
$cid = $_SESSION['cid'];
$createddate = date("Y-m-d H:i:s");
$disease = mb_substr($id_edit, 0, 100);
$sql = "SELECT shortname, mdid FROM `maternal_disease` WHERE `shortname` = '".$disease."' AND `cid` = '".$cid."' AND `status` = '1' AND `display` = '1' ";
$myquery = mysqli_query($db_conx, $sql);
if(mysqli_num_rows($myquery) == 1)
{
$row = mysqli_fetch_assoc($myquery);
$mdid = $row['mdid'];
$shortname = $row['shortname'];
} elseif (mysqli_num_rows($myquery) == 0) {
//insert data
$sql = "INSERT INTO `maternal_disease` (`cid`, `shortname`, `createdby`, `createddate`) VALUES ('".$cid."', '".$disease."', '".$userid."', '".$createddate."')";
$insertDisease = mysqli_query($db_conx, $sql);
if ($insertDisease === TRUE){
$mdid = mysqli_insert_id($db_conx);
$shortname = $disease;
}
} else {
}
$responseData = [
'message' => 'success',
'data' => ['name'=> $shortname,
'id' => $mdid
],
];
echo json_encode($responseData);
}
if(isset($_POST['set_maternal_disease'])){
$id_edit = string_sanitize(trim($_POST['set_maternal_disease']));
$userid = $_SESSION['userid'];
$cid = $_SESSION['cid'];
$createddate = date("Y-m-d H:i:s");
$disease = mb_substr($id_edit, 0, 100);
$sql = "SELECT shortname, mdid FROM `maternal_disease` WHERE `shortname` = '".$disease."' AND `cid` = '".$cid."' AND `status` = '1' AND `display` = '1' ";
$myquery = mysqli_query($db_conx, $sql);
if(mysqli_num_rows($myquery) == 1)
{
$row = mysqli_fetch_assoc($myquery);
$mdid = $row['mdid'];
$shortname = $row['shortname'];
} elseif (mysqli_num_rows($myquery) == 0) {
//insert data
$sql = "INSERT INTO `maternal_disease` (`cid`, `shortname`, `createdby`, `createddate`) VALUES ('".$cid."', '".$disease."', '".$userid."', '".$createddate."')";
$insertDisease = mysqli_query($db_conx, $sql);
if ($insertDisease === TRUE){
$mdid = mysqli_insert_id($db_conx);
$shortname = $disease;
}
} else {
}
$responseData = [
'message' => 'success',
'data' => ['name'=> $shortname,
'id' => $mdid
],
];
echo json_encode($responseData);
}
