Develop Reference

Dropdown Onchange and Passing JavaScript Value to PHP

Hello I have a problem on how should I send a JavaScript value to PHP.
Here is my form:
Dropdown Question from database:
fiddle code
<form action="action/survey">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Select Question</label>
<div class="col-sm-10">
<select class="form-control" id="mySelect" onchange="option()">
<?php
$sql = mysqli_query($con,"SELECT *,(SELECT GROUP_CONCAT(answer) AS `option`FROM `survey_anweroptions` WHERE survey_qID = sq.survey_qID) `option` FROM `survey_questionnaire`sq WHERE sq.survey_ID = $id");
while ($q = mysqli_fetch_array($sql)) {
?>
<option value="<?php echo $q[0]?>"><?php echo $q[2]?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label " for=""></label>
</div>
<?php
$sql = mysqli_query($con,"SELECT *,(SELECT GROUP_CONCAT(answer) AS `option`FROM `survey_anweroptions` WHERE survey_qID = sq.survey_qID) `option` FROM `survey_questionnaire`sq WHERE sq.survey_ID = 1 AND survey_qID = 1");
$d1= mysqli_fetch_array($sql);
?>
<div class="form-group">
<label class="control-label col-sm-2" for="">Question</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="" placeholder="" value="<?php echo $d1[2]?>">
</div>
</div>
<?php
$variable = $d1[3];
$z = 1;
$piece = explode(",", $variable);
foreach ($piece as $key => $value) {
?>
<div class="form-group">
<label class="control-label col-sm-2" for="">Option <?php echo $z?> </label>
<div class="col-sm-10">
<input type="text" class="form-control" id="" placeholder="" value="<?php echo $value?>">
</div>
</div>
<?php
$z++;
}
?>
<div class="text-center">
<button type="submit" class="btn btn-default" name="">Update</button>
</div>
</form>
JavaScript:
function option(){
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
}
What I want is if I select 1 value on the drop-down, the value of option must be sent to a PHP variable in this query:
SELECT *, (
SELECT GROUP_CONCAT(answer) AS `option`
FROM `survey_anweroptions`
WHERE survey_qID = sq.survey_qID
) `option`
FROM `survey_questionnaire`sq
WHERE sq.survey_ID = 1
AND survey_qID = (**the value of option will go here**)

You should use name instead of id. and do print_r($_POST) to check weather post data coming or not. also you dont need javascript for this until you are using ajax to call your php script

like #Coder said you the inputs send to the server with it's name attribute not id attribute
you should change the select element to
<select class="form-control" id="mySelect" name="my_select" onchange="option()">
and retrieve it's value with
$_POST['my_select'] // if you use POST method on form submition
$_GET['my_select'] // if you use GET method on form submition
$_REQUEST['my_select'] // if you accept any method

Delayed execution of Javascript

In my project I have a modal window where a cascading dropdownlist is shown for two properties (Family, TypeID) of a class (Machine).
The issue:
The dependant dropdownlist populates only when the modal window has been open for the second time. On the first time, nothing happens:
Here is a picture of how it works for a better understanding:
Notice that the row that says Modelo (Modelo is the name for TypeID) is empty in the first moment, but once re-opened, it populates with the expected information.
The code:
Note The Javascript is located in the Index page that contains the link to the modal window
This modal window is used when a New Machine is Created, or Edited.
For that reason, in the first section of the Javascript, I check in which situation I am and check if the Machine property: MchName, has a value.
In case it doesn't have a value, I assign the value of the variable items to the property TypeID that should be shown when the Modal opens.
#section scripts{
<script src="~/js/machine-index.js" asp-append-version="true"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#FamilyID').change(function () {
var url = '#Url.Content("~/")' + "Machines/GetModel";
var ddlsource = "#FamilyID";
$.getJSON(url, { FamilyID: $(ddlsource).val() }, function (data) {
var items = '';
$("#TypeID").empty();
$.each(data, function (i, model) {
items += "<option value='" + model.value + "'>" + model.text + "</option>";
});
$('#TypeID').html(items);
});
});
$('#modal-action-machine').on('shown.bs.modal', function () {
var test = "#MchName";
if ($(test).val()) {
} else {
var items = "<option value='0'>-- Seleccione Modelo --</option>";
$('#TypeID').html(items);
}
});
});
</script>
<script type="text/javascript">
$(function () {
$('.datepicker').datepicker({
"autoclose": true,
format: 'dd/mm/yyyy'
}).datepicker("setDate", new Date());
});
</script>
<script src="~/lib/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
}
Get Method:
[HttpGet]
public IActionResult CreateEdit(int? id)
{
//Lista de Familias
List<MachineFamily> FamilyList = new List<MachineFamily>();
FamilyList = (from family in _context.MachineFamilies
select family).ToList();
FamilyList.Insert(0, new MachineFamily { FamilyID = 0, FamilyDescription = "-- Seleccione Familia --" });
ViewBag.ListofFamily = FamilyList;
ViewBag.TypeID = string.Empty;
return PartialView("~/Views/Shared/Machines/_Create.cshtml");
}
JsonResult:
public JsonResult GetModel(int FamilyID)
{
List<MachineType> ListaModelos = new List<MachineType>();
ListaModelos = (from model in _context.MachineTypes
where model.FamilyID == FamilyID
select model).ToList();
ListaModelos.Insert(0, new MachineType { TypeID = 0, TypeDescription = "-- Seleccione Modelo --" });
return Json(new SelectList(ListaModelos, "TypeID", "TypeDescription"));
}
View: Modal
#model Application.Models.ApplicationviewModels.MachineIndexData
#using Application.Models
<form asp-action="CreateEdit" role="form">
#await Html.PartialAsync("_ModalHeader", new ModalHeader
{ Heading = String.Format("Actualización de Modelo") })
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="modal-body form-horizontal">
<input type="hidden" asp-for="Id" />
<div class="form-group">
<label asp-for="FamilyID" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="FamilyID" class="form-control"
asp-items="#(new SelectList(ViewBag.ListofFamily,"FamilyID","FamilyDescription"))"></select>
</div>
</div>
<div class="form-group">
<label asp-for="TypeID" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="TypeID" class="form-control"
asp-items="#(new SelectList(ViewBag.TypeID,"TypeID","TypeDescription"))"></select>
</div>
</div>
<div class="form-group">
<label asp-for="BrandID" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="BrandID" class="form-control" asp-items="ViewBag.BrandID">
<option value="">-- Seleccione Marca --</option>
</select>
<span asp-validation-for="BrandID" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="SupplierID" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="SupplierID" class="form-control" asp-items="ViewBag.SupplierID">
<option value="">-- Seleccione Proveedor --</option>
</select>
<span asp-validation-for="SupplierID" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="StoreID" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="StoreID" class="form-control" asp-items="ViewBag.StoreID">
<option value="">-- Seleccione Tienda --</option>
</select>
<span asp-validation-for="StoreID" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="MchName" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="MchName" class="form-control" />
<span asp-validation-for="MchName" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="NumDevices" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input id="NumDevices" asp-for="NumDevices" class="form-control" readonly />
<span asp-validation-for="NumDevices" class="text-danger"></span>
<input id="getNum" type="range" min="" max="10" step="1" onchange="fetch()" class="form-control" />
</div>
</div>
<div class="form-group">
<label asp-for="FechaCompra" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input data-format="0:dd/MM/yyyy" type="datetime" asp-for="FechaCompra" class="form-control datepicker" />
<span asp-validation-for="FechaCompra" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="CostoMaq" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="CostoMaq" class="form-control" />
<span asp-validation-for="CostoMaq" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="MachineStatus" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select name="MachineStatus" asp-for="MachineStatus" class="form-control" disabled>
<option value="0">Operativo</option>
<option value="1" selected="selected">Nuevo Item</option>
<option value="2">Reparación</option>
</select>
<input type="hidden" name="MachineStatus" value="1" />
<span asp-validation-for="MachineStatus" class="text-danger"></span>
</div>
</div>
#await Html.PartialAsync("_ModalFooter", new ModalFooter { })
</div>
</form>
Final notes: I believe that to fix this I should change the Javascript. Can someone please explain to me why this happens and how to fix it?
Update: Attempting to assign a new id to the ´MchName´ field and send it to the Script
View:
<div class="form-group">
<label asp-for="MchName" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input id="MchName2" asp-for="MchName" class="form-control" />
<span asp-validation-for="MchName" class="text-danger"></span>
</div>
</div>
Script:
$('#modal-action-machine').on('shown.bs.modal', function () {
var test = document.getElementById("MchName2").value;
if (test) {
} else {
var items = "<option value='0'>-- Seleccione Modelo --</option>";
$('#TypeID').html(items);
}
});
No luck tho.
Update: Second attempt
View:
<div class="form-group">
<label asp-for="MchName" class="col-md-2 control-label"></label>
<div class="col-md-10" id="MchName2">
<input asp-for="MchName" class="form-control" />
<span asp-validation-for="MchName" class="text-danger"></span>
</div>
</div>
Script:
$('#modal-action-machine').on('shown.bs.modal', function () {
var test = "#MchName2 #MchName";
if ($(test).val()) {
} else {
var items = "<option value='0'>-- Seleccione Modelo --</option>";
$('#TypeID').html(items);
}
});

You should wrap both shown.bs.modal event handlers in one single document.ready function.
Every time when shown.bs.modal event is fired, it will bind a change event handler to your select element. You should bind it only once.
script type="text/javascript">
$(document).ready(function () {
$('#FamilyID').change(function () {
var url = '#Url.Content("~/")' + "Machines/GetModel";
var ddlsource = "#FamilyID";
$.getJSON(url, { FamilyID: $(ddlsource).val() }, function (data) {
var items = '';
$("#TypeID").empty();
$.each(data, function (i, model) {
items += "<option value='" + model.value + "'>" + model.text + "</option>";
});
$('#TypeID').html(items);
});
});
$('#modal-action-machine').on('shown.bs.modal', function () {
var test = "#MchName";
if ($(test).val()) {
} else {
var items = "<option value='0'>Select</option>";
$('#TypeID').html(items);
}
});
});

I have found an answer that works for this specific case.
The first thing that was wrong was evaluate a variable that is not defined inside an ifstatement.
$('#modal-action-machine').on('shown.bs.modal', function () {
var test = "#MchName";
if ($(test).val()) {
In this code I was assigning the value of #MchName to testbut in a first moment, #MchName does not get defined until the modal opens for a first time, and for that, not executing the rest of the code.
Second: A turn around was to use click event of the Create button to identify if I'm in a case of a New Machine or just an update.
For this I will declare a global variable and assign it the value of zero.
If the Create button is clicked, assign this variable the value of 1, and if this is true, assign the default value that was intended to the #TypeID variable.
After the modal closes, re-asign the global variable to zero. This, for the case that another button (Update) is hitted to call the modal.
This is the code:
var global = this;
var wasclicked = 0;
$(document).ready(function () {
document.getElementById("modalbutton").onclick = function () {
global.wasclicked = 1;
};
$('#modal-action-machine').on('hidden.bs.modal', function () {
global.wasclicked = 0;
});
$('#modal-action-machine').on('shown.bs.modal', function () {
if (global.wasclicked == 1) {
var items = "<option value='0'>-- Seleccione Modelo --</option>";
$('#TypeID').html(items);
}
});
With this, the project works as intended.
Thanks for the help!

How to generate a input type dropdown using javascript?

Hi I am using codeigniter. I am adding row dynamically using javascript when button is clicked.
Here is my script
<script>
function displayResult() {
var row = document.getElementById("test").insertRow(-1);
row.innerHTML = '<td><input type="text" name="employee[]" value="" style="width:80px;"/></td><td><input type="text" name="start_time[]" value="" style="width:35px;"/></td><td><input type="text" name="pid[]" style="width:35px;"/></td><td><input type="text" name="description[]" class="description" value="" style="width:145px;"/></td><td><input type="text" class="type" value="" style="width:45px;"/></td><td><input type="text" class="qty_prch" value="" style="width:45px;"/></td><td><input type="text" class="qty_used" value="" style="width:45px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td><td><input type="text" value="" style="width:70px;"/></td>';
}
</script>
Here in this script I am generating a row with many textbox. Now I need to have a form_dropdown instead of the first text box in the script(employee[])
My form_dropdown code:
Here I get the data from the controller file. I have this employee detail in my database
<?php
//form data
$attributes = array('class' => 'form-horizontal', 'id' => '');
$options_employee = array('' => "Select");
foreach ($employee as $row)
{
$options_employee[$row['name']] = $row['name'];
}
?>
This is how I use it in view page.
<?php
echo '<div class="control-group">';
echo '<div class="controls">';
echo form_dropdown('employee', $options_employee, set_value('employee[]'), 'class="span2"');
echo '</div>';
echo '</div">';
?>
How to do this can someone help me code?
Edit 01:

Dropdowns are really easy in JS when you have the data array.
You can use the JS native map function with arrays to easily render menus like the following.
JSON/Object:
$options_employee: [
'Michael',
'John',
'Sam'
]
HTML :
<div id="employee-menu">
<div class="control-group">
<div class="controls">
<select name="employee" class="span2">
<option></option>
</select>
</div>
</div>
</div>
JS:
mag.module("employee-menu", {
view: function(state, props) {
state.option = props.$options_employee.map(function(employee, key) {
return {
_value: key,
_text: employee
}
})
}
}, props)
Here is the full working example: http://jsbin.com/pexifodari/edit?html,js,output
Hope that helps!

Multiple selection doesnt post selected id

I have an option panel in which you can select multiple variables. but when i select an variable it wont post the id in the database.
html form:
<form class="form-inline">
<div id="d1" title="Nieuwe afspraak" style="display: none">
<label class="control-label">Werknemer(s):</label>
<select name="werknemer[]" data-placeholder="werknemer..." id="werknemer" multiple="multiple" class="chzn-select" style="width:300px;" tabindex="4">
<option value=""></option>
<?if($werknemers !=null):foreach($werknemers as $row):?>
<option value='<?=$row->idWerknemer;?>'><?=$row->Voornaam;?> (<?=$row->Achternaam;?>)</option>
<?endforeach;endif;?>
</select><br />
<div class="control-group">
<label class="control-label">Titel:</label>
<div class="controls">
<input type="text" name="username" placeholder="Titel" id="name"/>*
</div>
</div>
<div class="control-group">
<label class="control-label">Omschrijving:</label>
<div class="controls">
<input type="text" name="userdesc" placeholder="Beschrijving" id="desc"/>*
</div>
</div>
<button style="float:right; margin-right:34px;" onclick="toggle_div_fun('sectiontohide');">Geavanceerd</button>
<div id="sectiontohide" style="display:none;">
<div class="control-group" >
<label class="control-label">Project:</label>
<div class="controls">
<select onChange='$("#klant").val("NULL");$("#klant").trigger("liszt:updated");' name="project" data-placeholder="Project..." class="chzn-select" id="project" style="width:160px;" tabindex="4">
<option value="NULL"></option>
<?if($projecten_titel !=null):foreach($projecten_titel as $row):?>
<option value='<?=$row->idProject;?>'><?=$row->Titel;?> (<?=$row->Naam;?>)</option>
<?endforeach;endif;?>
</select><br /><br /></div>
</div><div class="control-group" >
<label class="control-label">Klant:</label>
<div class="controls">
<select onChange='$("#project").val("NULL");$("#taak").val("NULL");$("#project").trigger("liszt:updated");$("#taak").trigger("liszt:updated");' name="klant" data-placeholder="Klant..." class="chzn-select" id="klant" style="width:160px;" tabindex="4">
<option value="NULL"></option>
<?if($klanten !=null):foreach($klanten as $row):?>
<option value='<?=$row->idKlant;?>'><?=$row->Naam;?></option>
<?endforeach;endif;?>
</select><br /><br /></div>
</div><div class="control-group" >
<label class="control-label">Taak:</label>
<div class="controls">
<select onChange='$("#klant").val("NULL");$("#klant").trigger("liszt:updated");' name="taak" data-placeholder="Klant..." class="chzn-select" id="taak" style="width:160px;" tabindex="4">
<option value="NULL"></option>
<?if($taken !=null):foreach($taken as $row):?>
<option value='<?=$row->idTaak;?>'><?=$row->Titel1;?></option>
<?endforeach;endif;?>
</select><br /><br /></div>
</div>
</div>
<div class="control-group">
<label class="control-label">Van:</label>
<div class="controls">
<input type="startdate" name="userstart" placeholder="Starttijd" id="start"/>*
<input type="time" name="mytime" value="00:00:00" placeholder="starttime" id="starttime"/>
</div>
</div>
<div class="control-group">
<label class="control-label">Tot:</label>
<div class="controls">
<input type="einddate" name="userend" placeholder="Eindtijd" id="end"/>*
<input type="time" name="mytime" value="00:00:00" placeholder="endtime" id="endtime"/>
</div>
</div>
<div class="control-group">
<label class="control-label">Color:</label>
<div class="controls">
<select name="color[]" id="colorstatus" data-placeholder="colors..." class="chzn-select" tabindex="4">
<?if($colors !=null):foreach($colors as $row):?>
<option value='<?=$row->colortag;?>'><?=$row->soort;?></option>
<?endforeach;endif;?>
</select><br />
</div>
</div></div>
<div id="d2" title="Checking Empty..." style="display:none;">
<p>Vul alstublieft wat in....!</p>
</div>
</div>
nieuwe afspraak.js:
$(function () {
// Dialog Open
$("#d1").dialog({
autoOpen: false,
height: 'auto',
width: 'auto',
modal: true,
closeOnEscape:true,
resizable:false,
show:'fade',
buttons: {
"Add": function() {
var id = $("#id").val(),
werknemer = $('#werknemer').val(),
project = $('#project').val(),
klant = $('#klant').val(),
taak = $('#taak').val(),
name = $('#name').val(),
desc = $('#desc').val(),
start = $('#start').val(),
starttime = $('#starttime').val(),
end = $('#end').val(),
endtime = $('#endtime').val();
colorstatus = $('#colorstatus').val();
if(id=='' || werknemer=='' || name=='' || desc=='' || start=='' || end=='')
{
//alert("Please do not empty....!",title="Hello");
$("#d2").dialog("open");
$("#d2").dialog({
buttons:{
"OK":function(){
$(this).dialog("close");
$("#id:first").focus();
}
}
});
exit;
}//End if statement
$.post('../testcalendar/db/process.php',{
user_id: id, user_werknemer: werknemer, user_project: project, user_klant: klant,user_taak: taak, user_name: name, user_desc: desc, user_start: start, user_starttime: starttime, user_end: end, user_endtime: endtime, user_color: colorstatus, action:'joined'
}); var nTime = 1 * 50;
window.setTimeout("location.reload()", nTime);//End Post
$("#id").val('');
$("#werknemer").val('');
$("#project").val('');
$("#klant").val('');
$("#taak").val('');
$("#name").val('');
$("#desc").val('');
$("#start").val('');
$("#starttime").val('');
$("#end").val('');
$("#endtime").val('');
$("#colorstatus").val('');
$(this).dialog("close");
},
"Cancel": function() {
$("#id").val('');
$("#werknemer").val('');
$("#project").val('');
$("#klant").val('');
$("#taak").val('');
$("#name").val('');
$("#desc").val('');
$("#start").val('');
$("#starttime").val('');
$("#end").val('');
$("#endtime").val('');
$("#colorstatus").val('');
$(this).dialog("close");
}
}
});
$("#d2").dialog({
autoOpen: false,
height: 'auto',
width: 'auto',
modal: true,
closeOnEscape:true,
resizable:false,
show:'fade',
buttons: {
"Ok": function() { $(this).dialog("close"); }
}
});
$("#b1").click(function(){
$("#d1").dialog("open");
});
$("#start").datepicker({ dateFormat: 'yy-mm-dd' });
$("#end").datepicker({ dateFormat: 'yy-mm-dd' });
$('input[type="time"] ').timepicker();
});
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
process.php:
$q = "INSERT INTO evenement (id,idWerknemer,idProject,idKlant,idTaak,title,description,start,end,color) VALUES
('','".$user_werknemer."','".$user_project."','".$user_klant."','".$user_taak."','".$user_name."','".$user_desc."','".$user_start."','".$user_end."','".$user_color."')";
$qo = "INSERT INTO evenementontvanger (idWerknemer,idProject,idEvent,idKlant,idTaak) VALUES ('".$user_werknemer."','".$user_project."','','".$user_klant."','".$user_taak."')";
foreach ($user_werknemer as $werknemer){
mysql_query($q);
mysql_query($qo);
}}
if(isset($_POST['user_werknemer'],$_POST['user_project'],$_POST['user_klant'],$_POST['user_taak'],$_POST['user_name'],$_POST['user_desc'],$_POST['user_start'],$_POST['user_starttime'],$_POST['user_endtime'],$_POST['user_end'],$_POST['user_color'],$_POST['action'])){
$user_werknemer=$_POST['user_werknemer'];
$user_color=$_POST['user_color'];
$user_name=$_POST['user_name'];
$user_desc=$_POST['user_desc'];
$user_project=$_POST['user_project'];
$user_klant=$_POST['user_klant'];
$user_taak=$_POST['user_taak'];
$user_start=$_POST['user_start']." ".$_POST['user_starttime'];
$user_end=$_POST['user_end']." ".$_POST['user_endtime'];
$action=$_POST['action'];
if ($action=='joined'){
user_joined( $user_werknemer, $user_project, $user_klant, $user_taak, $user_name, $user_desc, $user_start, $user_end, $user_color);
}
} ?>
i think the foreach loop doesnt get the id for each "user_werknemer" somehow.

Looks like your query variables are in the wrong place. Also, you had an extra } after the loop.
foreach ($user_werknemer as $werknemer){
$q = "INSERT INTO evenement (id,idWerknemer,idProject,idKlant,idTaak,title,description,start,end,color) VALUES
('','".$user_werknemer."','".$user_project."','".$user_klant."','".$user_taak."','".$user_name."','".$user_desc."','".$user_start."','".$user_end."','".$user_color."')";
$qo = "INSERT INTO evenementontvanger (idWerknemer,idProject,idEvent,idKlant,idTaak) VALUES ('".$user_werknemer."','".$user_project."','','".$user_klant."','".$user_taak."')";
// for debugging only
print ("q = $q <br /> qo = $qo <br /><br />");
///////////////
mysql_query($q);
mysql_query($qo);
}

Validate form using jqueryvalidate.js and ckeditor Codeigniter

Hello. I have a form that gets validated by jqueryvalidate.js. I have a drop down menu and the menu will be different when I choose "Library Asset" because I need to choose another drop down menu that is hidden.
The problem is, when I am not choose other menu that is not showing another drop down menu..
the required rules still implemented.. so the form can't be submitted except the one that is showing another drop down menu..
Can someone help me here?
This is my code:
View(Js):
<script type="text/javascript">
function showbook()
{
var domObj1 = document.getElementById('emptybox');
var domObj2 = document.getElementById('showupbox');
if(domObj1.style.display =='none')
{
domObj1.style.display = 'block';
domObj2.style.display = 'none';
}
else
{
domObj1.style.display = 'none';
domObj2.style.display = 'block';
}
}
function closebook()
{
var domObj1 = document.getElementById('emptybox');
var domObj2 = document.getElementById('showupbox');
if(domObj1.style.display =='none')
{
domObj1.style.display = 'block';
domObj2.style.display = 'none';
}
}
function showhidebook()
{
console.log($('#CategoryAdviceSelect').val());
if($('#CategoryAdviceSelect').val() == 1)
{
showbook();
}
else{
closebook();
}
}
My validation rules:
<script>
$().ready(function() {
$("#feedback_form").validate({
ignore: "input:hidden:not(input:hidden.required)",
rules: {
CategoryAdviceSelect:"required",
Subject:"required",
Advice:"required",
BookSelect:"required"
},
messages: {
CategoryAdviceSelect:"Please select one of category advice",
Subject:"This field is required",
Advice:"This field is required",
BookSelect:"This field is required"
},
errorElement: "span",
highlight: function(element) {
$(element).parent().addClass("help-block");
},
unhighlight: function(element) {
$(element).parent().removeClass("help-block");
}
});
});
</script>
And my html view
<div class="row-fluid ">
<div class="box">
<hr>
<div class="paragraph">
<p>For enquiries about our services, write to: helpdesk#library.binus.ac.id.</p>
<p>You may also reach us at our helpdesk number 62-21-5350660. We value your feedback. Please fill in the form below, and help us improve our services.</p>
<p>Talk to me here
<a href = 'ymsgr:sendim?me_lieza93'>
<img src="http://opi.yahoo.com/online?u=me_lieza93&m=g&t=1" border=0>
</a>
</p>
</div>
<!--START FORM-->
<form id="feedback_form" name="feedback_form" action="<?php echo base_url();?>feedback/feedback/insert_to_db" method="post" class="form-horizontal" novalidate="novalidate">
<div class="control-group">
<!--FEEDBACK TYPE-->
<label class="span2 control-label" >Feedback for</label>
<div class="controls with-tooltip">
<select class="input-tooltip span5" tabindex="2" id="CategoryAdviceSelect" name="CategoryAdviceSelect" onchange="showhidebook();" >
<option value="" disabled selected>Choose Your Feedback For..</option>
<?php
for($x = 0 ; $x < count($feedback) ; $x++)
{ ?>
<option value="<?php echo $feedback[$x]['CategoryAdviceId']?>"><?php echo $feedback[$x]['CategoryAdviceName'] ?></option>
<?php
} ?>
</select>
</div>
</div>
<!--SUBJECT-->
<div class="control-group">
<label for="limiter" class="control-label">Subject</label>
<div class="controls">
<input type="text" class="span5" maxlength="50" id="Subject" name="Subject" placeholder="Type Your Feedback Subject.." />
<p class="help-block"></p>
</div>
</div>
<div id="emptybox"></div>
<!--CHOOSE BOOK-->
<div id="showupbox" style="display: none;">
<div class="control-group">
<label class="control-label">Choose Book</label>
<div class="controls">
<select class="chzn-select span5" tabindex="2" id="BookSelect" name="BookSelect">
<option value="" disabled selected>Choose Your Feedback For..</option>
<?php
for($y = 0 ; $y < count($booklist) ; $y++)
{ ?>
<option value="<?php echo $booklist[$y]['bi']?>"><?php echo $booklist[$y]['AssetTitle']?></option>
<?php
} ?>
</select>
</div>
</div>
</div>
<!--ADVICE-->
<div class="control-group">
<label for="limiter" class="control-label" >Suggestion</label>
<div class="controls">
<?php echo $this->ckeditor->editor("Advice",""); ?>;
</div>
</div>
<!--div class="alert alert-success">
<a class="close" data-dismiss="alert">×</a>
<strong>Success!</strong> Thanks for your feedback!
</div-->
<div class="bton1">
<button class="btn btn-primary round" type="submit">Submit</button>
<button class="btn btn-primary round" type="refresh">Reset</button>
</div>
</form>
</div><!--END BOX-->

Finally I can solve this..
<script>
$(document).ready(function() {
for(var name in CKEDITOR.instances) {
CKEDITOR.instances["Advice"].on("instanceReady", function() {
// Set keyup event
this.document.on("keyup", updateValue);
// Set paste event
this.document.on("paste", updateValue);
});
function updateValue() {
CKEDITOR.instances["Advice"].updateElement();
$('textarea').trigger('keyup');
}
}
$("#feedback_form").validate({
ignore: 'input:hidden:not(input:hidden.required)',
rules: {
CategoryAdviceSelect:"required",
Subject:"required",
Advice:"required",
BookSelect:{
required: function(element){
return $("#CategoryAdviceSelect").val()==1;
}
}
},
messages: {
CategoryAdviceSelect:"Please select one of category advice",
Subject:"This field is required",
Advice:"This field is required",
BookSelect:"This field is required",
},
errorElement: "span",
errorPlacement: function (error, element) {
if ($(element).attr('name') == 'Advice') {
$('#cke_Advice').after(error);
} else {
element.after(error);
}
},
highlight: function(element) {
$(element).parent().addClass("help-block");
},
unhighlight: function(element) {
$(element).parent().removeClass("help-block");
}
});
});
</script>