Adding Items dynamically with dependant select options that fetch from the database - javascript

I have created a form like this that fetches data from the database
<select name="notelinecategory" id="category"class="form-control sl" required="true" onChange="getdistrict(this.value);">
<option value="<?php echo $row['nc_id'];?>">Select Diagnosis</option>
<?php $query =mysqli_query($con,"SELECT * FROM notelinecategory");
while($row=mysqli_fetch_array($query))
{ ?>
<option value="<?php echo $row['nc_id'];?>"><?php echo $row['category'];?></option>
<?php
}
?>
</select></div>
<div class="form-group">
<div class="col">
<select name="noteline[]" class="form-control sl" required="true" class="js-example-basic-multiple" multiple="multiple" id="notelines" style="height: 100px">
<option value=""></option>
</select>
The above fetches data and adds dynamically to a text area.
I want to insert multiple field's data to the database and i find it hard to capture options from the dependent dropdown list. Here is my script:
$('#addrow').click(function(){
var length = $('.sl').length;
var i = parseInt(length)+parseInt(1);
var newrow = $('#next').append('<div class="wrap-content container" id="container'+i+'"><div class="row"><div class="col-sm-6"><div class="panel-body"><p style="color:red;"><?php echo htmlentities($_SESSION['msg']);?>
<?php echo htmlentities($_SESSION['msg']="");?></p><form><div class="form-group align-self-start"><label for="notelinecategory">Choose a Diagnosis</label><select name="notelinecategory" class="form-control" required="true" id="category'+i+'"onChange="getdistrict(this.value);"><option value="<?php echo $row['nc_id'];?>'+i+'">Select Diagnosis</option><?php $query =mysqli_query($con,"SELECT * FROM notelinecategory");
while($row=mysqli_fetch_array($query))
{ ?><option value="<?php echo $row['nc_id'];?>"><?php echo $row['category'];?></option> <?php } ?>
</select></div><div class="form-group"><div class="col"><select name="noteline[]'+i+'" class="form-control" required="true" class="js-example-basic-multiple" multiple="multiple" id="notelines'+i+'" style="height: 100px"><option value=""></option></select></div></div></form></div> </div><div class="row"><div class="col-sm-6"><div class="panel-body"><p style="color:red;"><?php echo htmlentities($_SESSION['msg']);?>
<?php echo htmlentities($_SESSION['msg']="");?></p><form role="form" name="notelines'+i+'" method="post"><label for="Select_patients">select Patient Name </label><select name="PatientName'+i+'" class="form-control" required="true"> <option value="'+i+'">Select Patient</option> <?php
$docid=$_SESSION['id'];
$ret=mysqli_query($con,"select * from tblpatient where Docid='$docid'");
while($row=mysqli_fetch_array($ret))
{
?>
<option value="<?php echo htmlentities($row['PatientName']);?>"> <?php echo htmlentities($row['PatientName']);?>
</option> <?php } ?>
</select><br><textarea id="CAPoutput'+i+'" rows="4" cols="75" name="notelines"><?php if(isset($_SESSION['textentered']) && $_SESSION['textentered'] !=''){echo $_SESSION['textentered'];} ?></textarea><input type="button" class="btnRemove btn-danger" value="Remove"/></div><br>');
});
// Removing event here
$('body').on('click','.btnRemove',function() {
$(this).closest('div').remove() });

Related

how to show comma separated values in form

I am using coordinator php framework with javascript and ajax. comma separated values is not show but single values working fine . i have table field like (edit_coach = 9,10,11), (edit_depot = 5,Spur,SPJ) and edit_task_type = 5 please share valuable idea...
database
edit_coach = 9,10,11 //not show data
edit_depot = 5,Spur,SPJ //not show data
edit_task_type = 5 //working fine
JavaScript Code here
function edit_assign_train(val)
{
$.ajax({
url: "<?php echo base_url(); ?>edit_assign_train",
type: "post",
data: "atrain_id="+val,
success: function (response)
{
var res = JSON.parse(response);
console.log(res);
$('#edit_train_no').val(res[0]['train_no']);
$('#edit_depot').val(res[0]['depot_id']+'-'+res[0]['depot_code']+'-'+res[0]['depot_name']).trigger('change');// not working
$('#edit_coach').val(res[0]['coach']).trigger('change');// not working
$('#edit_task_type').val(res[0]['task_type']).trigger('change');//working fine
$('#edit_tot_coach').val(res[0]['tot_coach']);
$('#edit_janitor').val(res[0]['janitor']);
$('#edit_time').val(res[0]['time_val']);
$('#edit_id').val(res[0]['id']);
}
});
HTML Code here
<div class="row">
<label class="col-sm-4 col-form-label text-right">Depot : </label>
<div class="col-sm-8">
<div class="form-group">
<select id="edit_depot" class="form-control">
<?php foreach ($depot_val as $list3) { ?>
<option value="<?php echo $list3['id'] ?>-<?php echo $list3['depot_code'] ?>-<?php echo $list3['depot_name'] ?>"><?php echo $list3['depot_name'] ?></option>
<?php } ?>
</select>
</div>
</div>
</div>
<div class="row">
<label class="col-sm-4 col-form-label text-right">Coaches : </label>
<div class="col-sm-8 pt-2">
<select class="form-control tasktype-select" id="edit_coach" name="tasktype[]" multiple="multiple" style="width: 100%">
<option value="">Select</option>
<?php foreach ($coach_val as $list2) { ?>
<option value="<?php echo $list2['id'] ?>"><?php echo $list2['coach_name'] ?></option>
<?php } ?>
</select>
</div>
</div><br>
<div class="row">
<label class="col-sm-4 col-form-label text-right">Task Type : </label>
<div class="col-sm-8">
<select class="form-control tasktype-select" id="edit_task_type" name="tasktype[]" multiple="multiple" style="width: 100%">
<option value="">Select</option>
<?php foreach ($res_val as $list1) { ?>
<option value="<?php echo $list1['id'] ?>"><?php echo $list1['task_type'] ?></option>
<?php } ?>
</select>
</div>
</div>

Try this:
$('#edit_depot').val(res[0]['depot_id']).trigger('change');

Add required attribute to Form after visible hide/show on form

The form has 3 group of fields that users can use to add their education background. The fastdropdown js is used to add more or show the hidden fields and I would like to make it required so long it is open / displayed on the form
<legend>Education:</legend>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="Year_of_Degree">Year Of Degree *:</label>
<div class="col-sm-9">
<select name="Year_of_Degree" class="Year_of_Degree form-control fstdropdown-select" id="Year_of_Degree">
<option value="" <?php echo set_select('Year_of_Degree', ''); ?> >-Select-</option>
<?php for($year = 2019; $year >=1970; $year--){ ?>
<option value="<?php echo $year?>" <?php echo set_select('Year_of_Degree', $year); ?>><?php echo $year?></option>
<?php }?>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="Class_of_Degree">Class Of Degree *:</label>
<div class="col-sm-9">
<select name="Class_of_Degree"class="Class_of_Degree form-control required" id="Class_of_Degree">
<option value="" <?php echo set_select('Class_of_Degree', ''); ?> >-Select-</option>
<option value="First Class Honours" <?php echo set_select('Class_of_Degree', 'First Class Honours'); ?> >First Class Honours</option>
<option value="Second Class Honours – Upper Division" <?php echo set_select('Class_of_Degree', 'Second Class Honours – Upper Division'); ?> >Second Class Honours – Upper Division</option>
<option value="Second Class Honours – Lower Division" <?php echo set_select('Class_of_Degree', 'Second Class Honours – Lower Division'); ?> >Second Class Honours – Lower Division</option>
<option value="Third Class Honours" <?php echo set_select('Class_of_Degree', 'Third Class Honours'); ?> >Third Class Honours</option>
<option value="Distinction" <?php echo set_select('Class_of_Degree', 'Distinction'); ?> >Distinction</option>
<option value="Upper Credit" <?php echo set_select('Class_of_Degree', 'Upper Credit'); ?> >Upper Credit</option>
<option value="Lower Credit" <?php echo set_select('Class_of_Degree', 'Lower Credit'); ?> >Lower Credit</option>
<option value="Merit" <?php echo set_select('Class_of_Degree', 'Merit'); ?> >Merit</option>
<option value="Pass" <?php echo set_select('Class_of_Degree', 'Pass'); ?> >Pass</option>
<option value="Fail" <?php echo set_select('Class_of_Degree', 'Fail'); ?> >Fail</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="Institution">Institution *:</label>
<div class="col-sm-9">
<select name="Institution" class="Institution form-control fstdropdown-select" id="Institution">
<option value="" <?php echo set_select('Institution', ''); ?> >-Select-</option>
<?php if($institution_list){
foreach($institution_list as $institution){ ?>
<option value="<?php echo $institution->idinstitution?>" <?php echo set_select('Institution', $institution->idinstitution); ?>><?php echo $institution->institution?></option>
<?php }
}?>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="Degree_Type">Degree Type *:</label>
<div class="col-sm-9">
<select name="Degree_Type"class="Degree_Type form-control required" id="Degree_Type">
<option value="" <?php echo set_select('Degree_Type', ''); ?> >-Select-</option>
<option value="OND" <?php echo set_select('Degree_Type', 'OND'); ?> >OND</option>
<option value="HND" <?php echo set_select('Degree_Type', 'HND'); ?> >HND</option>
<option value="Associate’s Degree" <?php echo set_select('Degree_Type', 'Associate’s Degree'); ?> >Associate’s Degree</option>
<option value="Bachelor’s Degree" <?php echo set_select('Degree_Type', 'Bachelor’s Degree'); ?> >Bachelor’s Degree</option>
<option value="Master’s Degree" <?php echo set_select('Degree_Type', 'Master’s Degree'); ?> >Master’s Degree</option>
<option value="Professional Degree" <?php echo set_select('Degree_Type', 'Professional Degree'); ?> >Professional Degree</option>
<option value="Doctorate Degree" <?php echo set_select('Degree_Type', 'Doctorate Degree'); ?> >Doctorate Degree</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="Course_of_Study">Course Of Study *:</label>
<div class="col-sm-9">
<input type="text" name="Course_of_Study" placeholder="Course Of Study..." class="Course_of_Study form-control" id="Course_of_Study" value="<?php echo set_value('Course_of_Study', ''); ?>" >
</div>
</div>
<div id="qualification2" class="row-fluid">
<hr style="border: 1px solid #ccc;" />
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="Year_of_Degree1">Year Of Degree :</label>
<div class="col-sm-9">
<select name="Year_of_Degree1" class="Year_of_Degree1 form-control fstdropdown-select" id="Year_of_Degree1">
<option value="" <?php echo set_select('Year_of_Degree1', ''); ?> >-Select-</option>
<?php for($year = 2019; $year >=1970; $year--){ ?>
<option value="<?php echo $year?>" <?php echo set_select('Year_of_Degree1', $year); ?>><?php echo $year?></option>
<?php }?>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="Class_of_Degree1">Class Of Degree:</label>
<div class="col-sm-9">
<select name="Class_of_Degree1"class="Class_of_Degree1 form-control required" id="Class_of_Degree1">
<option value="" <?php echo set_select('Class_of_Degree1', ''); ?> >-Select-</option>
<option value="First Class Honours" <?php echo set_select('Class_of_Degree1', 'First Class Honours'); ?> >First Class Honours</option>
<option value="Second Class Honours – Upper Division" <?php echo set_select('Class_of_Degree1', 'Second Class Honours – Upper Division'); ?> >Second Class Honours – Upper Division</option>
<option value="Second Class Honours – Lower Division" <?php echo set_select('Class_of_Degree1', 'Second Class Honours – Lower Division'); ?> >Second Class Honours – Lower Division</option>
<option value="Third Class Honours" <?php echo set_select('Class_of_Degree1', 'Third Class Honours'); ?> >Third Class Honours</option>
<option value="Distinction" <?php echo set_select('Class_of_Degree1', 'Distinction'); ?> >Distinction</option>
<option value="Upper Credit" <?php echo set_select('Class_of_Degree1', 'Upper Credit'); ?> >Upper Credit</option>
<option value="Lower Credit" <?php echo set_select('Class_of_Degree1', 'Lower Credit'); ?> >Lower Credit</option>
<option value="Merit" <?php echo set_select('Class_of_Degree1', 'Merit'); ?> >Merit</option>
<option value="Pass" <?php echo set_select('Class_of_Degree1', 'Pass'); ?> >Pass</option>
<option value="Fail" <?php echo set_select('Class_of_Degree1', 'Fail'); ?> >Fail</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="institution1">Institution:</label>
<div class="col-sm-9">
<select name="institution1" class="institution1 form-control fstdropdown-select" id="institution1">
<option value="" <?php echo set_select('institution1', ''); ?> >-Select-</option>
<?php if($institution_list){
foreach($institution_list as $institution){ ?>
<option value="<?php echo $institution->idinstitution?>" <?php echo set_select('institution1', $institution->idinstitution); ?>><?php echo $institution->institution?></option>
<?php }
}?>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="Degree_Type1">Degree Type:</label>
<div class="col-sm-9">
<select name="Degree_Type1"class="Degree_Type1 form-control required" id="Degree_Type1">
<option value="" <?php echo set_select('Degree_Type1', ''); ?> >-Select-</option>
<option value="OND" <?php echo set_select('Degree_Type1', 'OND'); ?> >OND</option>
<option value="HND" <?php echo set_select('Degree_Type1', 'HND'); ?> >HND</option>
<option value="Associate’s Degree" <?php echo set_select('Degree_Type1', 'Associate’s Degree'); ?> >Associate’s Degree</option>
<option value="Bachelor’s Degree" <?php echo set_select('Degree_Type1', 'Bachelor’s Degree'); ?> >Bachelor’s Degree</option>
<option value="Master’s Degree" <?php echo set_select('Degree_Type1', 'Master’s Degree'); ?> >Master’s Degree</option>
<option value="Professional Degree" <?php echo set_select('Degree_Type1', 'Professional Degree'); ?> >Professional Degree</option>
<option value="Doctorate Degree" <?php echo set_select('Degree_Type1', 'Doctorate Degree'); ?> >Doctorate Degree</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="Course_of_Study1">Course Of Study:</label>
<div class="col-sm-9">
<input type="text" name="Course_of_Study1" placeholder="Course Of Study..." class="Course_of_Study1 form-control" id="Course_of_Study1" value="<?php echo set_value('Course_of_Study1', ''); ?>" >
</div>
</div>
</div>
<div id="qualification3" class="row-fluid">
<hr style="border: 1px solid #ccc;" />
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="Year_of_Degree2">Year Of Degree:</label>
<div class="col-sm-9">
<select name="Year_of_Degree2" class="Year_of_Degree2 form-control fstdropdown-select" id="Year_of_Degree2">
<option value="" <?php echo set_select('Year_of_Degree2', ''); ?> >-Select-</option>
<?php for($year = 2019; $year >=1970; $year--){ ?>
<option value="<?php echo $year?>" <?php echo set_select('Year_of_Degree2', $year); ?>><?php echo $year?></option>
<?php }?>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="Class_of_Degree2">Class Of Degree:</label>
<div class="col-sm-9">
<select name="Class_of_Degree2"class="Class_of_Degree2 form-control required" id="Class_of_Degree2">
<option value="" <?php echo set_select('Class_of_Degree2', ''); ?> >-Select-</option>
<option value="First Class Honours" <?php echo set_select('Class_of_Degree2', 'First Class Honours'); ?> >First Class Honours</option>
<option value="Second Class Honours – Upper Division" <?php echo set_select('Class_of_Degree2', 'Second Class Honours – Upper Division'); ?> >Second Class Honours – Upper Division</option>
<option value="Second Class Honours – Lower Division" <?php echo set_select('Class_of_Degree2', 'Second Class Honours – Lower Division'); ?> >Second Class Honours – Lower Division</option>
<option value="Third Class Honours" <?php echo set_select('Class_of_Degree2', 'Third Class Honours'); ?> >Third Class Honours</option>
<option value="Distinction" <?php echo set_select('Class_of_Degree2', 'Distinction'); ?> >Distinction</option>
<option value="Upper Credit" <?php echo set_select('Class_of_Degree2', 'Upper Credit'); ?> >Upper Credit</option>
<option value="Lower Credit" <?php echo set_select('Class_of_Degree2', 'Lower Credit'); ?> >Lower Credit</option>
<option value="Merit" <?php echo set_select('Class_of_Degree2', 'Merit'); ?> >Merit</option>
<option value="Pass" <?php echo set_select('Class_of_Degree2', 'Pass'); ?> >Pass</option>
<option value="Fail" <?php echo set_select('Class_of_Degree2', 'Fail'); ?> >Fail</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="institution2">Institution:</label>
<div class="col-sm-9">
<select name="institution2" class="institution2 form-control fstdropdown-select" id="institution2">
<option value="" <?php echo set_select('institution2', ''); ?> >-Select-</option>
<?php if($institution_list){
foreach($institution_list as $institution){ ?>
<option value="<?php echo $institution->idinstitution?>" <?php echo set_select('institution2', $institution->idinstitution); ?>><?php echo $institution->institution?></option>
<?php }
}?>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="Degree_Type2">Degree Type:</label>
<div class="col-sm-9">
<select name="Degree_Type2"class="Degree_Type2 form-control required" id="Degree_Type2">
<option value="" <?php echo set_select('Degree_Type2', ''); ?> >-Select-</option>
<option value="OND" <?php echo set_select('Degree_Type2', 'OND'); ?> >OND</option>
<option value="HND" <?php echo set_select('Degree_Type2', 'HND'); ?> >HND</option>
<option value="Associate’s Degree" <?php echo set_select('Degree_Type2', 'Associate’s Degree'); ?> >Associate’s Degree</option>
<option value="Bachelor’s Degree" <?php echo set_select('Degree_Type2', 'Bachelor’s Degree'); ?> >Bachelor’s Degree</option>
<option value="Master’s Degree" <?php echo set_select('Degree_Type2', 'Master’s Degree'); ?> >Master’s Degree</option>
<option value="Professional Degree" <?php echo set_select('Degree_Type2', 'Professional Degree'); ?> >Professional Degree</option>
<option value="Doctorate Degree" <?php echo set_select('Degree_Type2', 'Doctorate Degree'); ?> >Doctorate Degree</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="Course_of_Study2">Course Of Study:</label>
<div class="col-sm-9">
<input type="text" name="Course_of_Study2" placeholder="Course Of Study..." class="Course_of_Study2 form-control" id="Course_of_Study2" value="<?php echo set_value('Course_of_Study2', ''); ?>" >
</div>
</div>
</div>
<div class="row-fluid text-right" id="degreeBtn1">
<input type="button" class="addDegree2" value="+ Add Degree" />
<hr style="border: 1px solid #ccc;" />
</div>
<div class="row-fluid text-right" id="degreeBtn2">
<input type="button" class="addDegree3" value="+ Add Degree" />
<input type="button" class="removeDegree2" value="- Remove Degree" />
<hr style="border: 1px solid #ccc;" />
</div>
<div class="row-fluid text-right" id="degreeBtn3">
<input type="button" class="removeDegree3" value="- Remove Degree" />
<hr style="border: 1px solid #ccc;" />
</div>
i will appreciate if i can get someone that can show me how i can attach the required field attribute to the list of fields the moment it is visible on the form

You need the :required pseudo-class in CSS. For example:
/* style all input elements with a required attribute */
input:required {
box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85);
}
/**
* style input elements that have a required
* attribute and a focus state
*/
input:required:focus {
border: 1px solid red;
outline: none;
}
/**
* style input elements that have a required
* attribute and a hover state
*/
input:required:hover {
opacity: 1;
}
Taken from here: https://css-tricks.com/almanac/selectors/r/required/
Of course, you can create placeholders and stuff like that to enhance your design.

I interpreted "how i can attach the required field attribute to the list of fields the moment it is visible on the form" as when the element ( input ) gains visibility on screen rather than is just added to or un-hidden so perhaps the following might not be applicable I don't know. Essentially below PHP renders a long form to emulate the large form you have in the question -much of which will be off-screen when the page loads.
Initially the DOM is queried for a nodelist of input elements that do not have the required attribute and, if they are visible, sets the attribute. As the user scrolls the window.scroll event is fired and a new nodelist of elements without that attribute is checked - again, if they have visibility they are marked as required. The use of setTimeout is merely to allow time for actually observe the change from not required to required ( as denoted by the CSS colours )
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Force "Required" attribute on form elements that have visibility</title>
<style>
body{height:100vh}
form{width:80%;float:none;margin:auto;height:100vh;}
label{width:100%; display:block; padding:3rem auto;}
input,
textarea{ padding:2rem; width:80%; margin:1rem; background:rgba(0,255,0,0.05); box-shadow: 0 0 15px rgba(0, 255, 0, 0.25); border-radius:1rem; }
input:required,
textarea:required{ background:rgba(255,0,0,0.05); box-shadow: 0 0 15px rgba(255, 0, 0, 0.25); border-radius:1rem; }
input:focus
,textarea:focus{outline:none}
</style>
<script>
let d=document;
let w=window;
let i=250;
d.addEventListener('DOMContentLoaded', ()=>{
const isvisible=function( n ){
let r=n.getBoundingClientRect();
let h=Math.max( d.documentElement.clientHeight, w.innerHeight );
return !( r.bottom < 0 || r.top - h >= 0 );
};
const setrequired=function(n){
setTimeout( ()=>{
n.required=true;
}, i );
};
let col=Array.from( d.querySelectorAll('form input:not( [required] ), form textarea:not( [required] )') );
col.forEach( n=>{ /* set initial state if element is visible on page load */
if( isvisible( n ) && !n.hasAttribute( 'required' ) ){
setrequired( n );
}
});
w.addEventListener( 'scroll', function(e){
Array.from( d.querySelectorAll('form input:not( [required] ), form textarea:not( [required] )') );
col.forEach( n=>{ /* check and set on page scroll */
if( isvisible( n ) && !n.hasAttribute( 'required' ) ){
setrequired( n );
}
});
});
});
</script>
</head>
<body>
<form>
<?php
/*
deliberately make tall form that will have many items not initially
visible but which become visible when the user scrolls the page up/down
*/
for( $i=1; $i < 100; $i++ )printf('<label>Field %1$d<input type="text" name="field%1$d" value="%1$d" /></label>', $i );
?>
</form>
</body>
</html>

How to parse large strings of html into Javascript with php echo variable

I have a javascript function that displays html code that is stored in the mysql database into CKeditor <textarea>. When a user selects any of the options, the mysql query is meant to echo the chunk of html code into the javascript as a php variable.
The select option works really fine in selecting the echoed variables from the javascript. The problem here is that, when i saved plain text into the database they were displayed but when i saved html codes into the database, the javascript refuses to display it.
I have tried several ways to echo the html string into the javascript such as:
<?php echo json_encode($fbilling); ?> \\Accepts Only Plain Texts Not HTML Codes
'<?php echo decodeURI(rawurlencode($freply)); ?>' \\Refuses To load Page
'<?php echo htmlspecialchars_decode(rawurlencode($freply)); ?>' \\Changes HTML Codes To Characters Like :%3Ctable%20data-module%3D%22header%22%20data
'<?php htmlspecialchars(json_encode($freply)); ?>' \\ No Value is Displays, Just Empty
'<?php echo htmlspecialchars(json_encode($freply)); ?>' \\ No Value is Displays, Just Empty
'<?php echo htmlspecialchars(rawurlencode($freply)); ?>' \\Changes HTML Codes To Characters Like :%3Ctable%20data-module%3D%22header%22%20data
This is my code:
var Code = new Array("", <?php echo json_encode($fwelcome); ?>, <?php echo json_encode($fbilling); ?>, <?php echo json_encode($freply); ?>, <?php echo json_encode($fdelivery); ?>);
function change() {
var ID = formconteudo.message.options[formconteudo.message.selectedIndex].value;
CKEDITOR.instances.editor1.setData('<p>' + Code[ID] + '</p>');
}
<div class="col-md-4">
<div class="form-group">
<?php
$sql3="SELECT * FROM email WHERE id='1'";
$result3=mysql_query($sql3) or die(mysql_error());
$rwsf= mysql_fetch_array($result3);
$fwelcome= $rwsf[3];
$freply= $rwsf[2];
$fbilling= $rwsf[1];
$fdelivery= $rwsf[4];
?>
<label>Email Templates: </label>
<select name="message" onChange="change();" class="form-control select2 required" style="width: 100%;">
<option disabled selected>Click To Select</option>
<option value="1">Welcome Email</option>
<option value="2">Billing Email</option>
<option value="3">Basic Reply Email</option>
<option value="4">Delivery Process Email</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" name="subject" placeholder="Subject" class="form-control required">
</div>
</div>
</div>
<textarea id="editor1" name="editor1" rows="10" cols="80">Select your mail design from the 'Email' drop down list above.</textarea><br>
<div class="form-wizard-buttons">
<button type="submit" class="btn btn-success" style="border:0px"><i class="fa fa-send"> Send Mail</i></button>
</div>

Hi as you have html content, you can follow below process to get html and send it to the function as parameter.
<div class="col-md-4">
<div class="form-group">
<?php
$sql3="SELECT * FROM email WHERE id='1'";
$result3=mysql_query($sql3) or die(mysql_error());
$rwsf= mysql_fetch_array($result3);
$fwelcome= $rwsf[3];
$freply= $rwsf[2];
$fbilling= $rwsf[1];
$fdelivery= $rwsf[4];
?>
<label>Email Templates: </label>
<select name="message" onChange="change();" class="form-control select2 required" style="width: 100%;">
<option disabled selected>Click To Select</option>
<option value="1">Welcome Email</option>
<option value="2">Billing Email</option>
<option value="3">Basic Reply Email</option>
<option value="4">Delivery Process Email</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" name="subject" placeholder="Subject" class="form-control required">
</div>
</div>
</div>
<textarea id="editor1" name="editor1" rows="10" cols="80">Select your mail design from the 'Email' drop down list above.</textarea><br>
<div class="form-wizard-buttons">
<button type="submit" class="btn btn-success" style="border:0px"><i class="fa fa-send"> Send Mail</i></button>
</div>
<div name="fwelcome_content">
<?php echo $fwelcome; ?>
</div>
<div name="fbilling_content">
<?php echo $fbilling; ?>
</div>
<div name="freply_content">
<?php echo $freply; ?>
</div>
<div name="fdelivery_content">
<?php echo $fdelivery; ?>
</div>
and then in javascript
var Code = new Array();
window.onload = function(e){
Code = new Array("", getHTMLContent("fwelcome_content"), getHTMLContent("fbilling_content"), getHTMLContent("freply_content"), getHTMLContent("fdelivery_content"));
}
function change() {
var ID = formconteudo.message.options[formconteudo.message.selectedIndex].value;
CKEDITOR.instances.editor1.setData('<p>' + Code[ID] + '</p>');
}
function getHTMLContent(elementId){
var htmlContent = document.getElementsByName(elementId)[0].innerHTML;
document.getElementsByName(elementId)[0].remove();
return htmlContent;
}

Show error alert when the data was exist

Can anybody help me to create the code for ..
I'm really a beginner for code.
This is the registration form. When I select noinduk then I select level it shows the error alert if the level of noinduk primary is exist. Like a unique level but it is based on 'noinduk'.
Thank you for help
This is my view
<select id="nis" name="nis" class="form-control" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="NIS" value="<?php echo set_value("nis"); ?>">
<option value="none" selected="" disabled="">-- NIS --</option>
<?php
if ($nisnya) {
foreach($nisnya as $row) {
?>
<option value="<?php echo $row->kode; ?>"><?php echo $row->kode; ?></option>
<?php
}
}
?>
</select>
<div class="form-group col-md-3 mb-2">
<label for="projectinput3">Paket <span class="required">*</span></label>
<select id="issueinput5" name="level" class="form-control" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-title="Level" value="<?php echo set_value("level"); ?>">
<option value="0" selected="" disabled="">-- Paket --</option>
<?php
if ($paketnya) {
foreach($paketnya as $row) {
?>
<option value="<?php echo $row->kode; ?>"><?php echo $row->nama; ?></option>
<?php
}
}
?>
</select>
</div>
this is my table

SelectBox getID

I am trying to get the id of a selection of a select box, however was unable'm confused, can someone help me?
Code of Selectbox:
Edited SelectBox Code :
<li class="fields">
<div>
<div class="field">
<div class="form-group">
<label class="required" for="type_id"><?php echo $this->__('Occasion') ?><em>*</em></label>
<div class="input-box">
<select id="type_id" name="type_id" title="<?php echo $this->__('Occasion') ?>" class="validate-select form-control" onChange="criaDados(), showId(<?php $this->getId() ?>)" <?php if (!is_null ($_e->getId())) { echo "style='display: none;'"; } ?> >
<option value=""><?php echo $this->__('Please select occasion') ?></option>
<?php foreach($_e->getTypes() as $k=>$v):?>
<option value="<?php echo $k ?>" <?php if($_e->getTypeId() == $k) echo 'selected'?>><?php echo $this->htmlEscape($v) ?></option>
<?php endforeach; ?>
</select>
<input type="text" value="<?php echo $_e->getTypes()[$_e->getTypeId()] ?>" class="form-control" disabled <?php if (is_null ($_e->getId())) { echo "style='display: none;'"; } ?> />
</div>
</div>
</div>
<div class="field">
<div class="form-group">
<label class="required" for="date"><?php echo $this->__('Date') ?><em>*</em></label>
<div class="input-box">
<div class="input-range input-date">
<?php echo $this->getDateInput($_e->getDate()) ?>
</div>
</div>
</div>
</div>
</div>
</li>
Edited Javascript
function showId(id)
{
var id_val = $("#" + id).val();
alert(id_val);
}

if you want to get the id of the selected item then add an onchange event in select
like onchange="showid(this)"
then javascript
function showid(ids) {
console.log(ids[ids.selectedIndex].value); // get value
console.log(ids[ids.selectedIndex].id); // get id
}
if you want jquery solution then do something like below
$('#type_id').change(function(){
alert($(this).find('option:selected').attr('id'));
});

You can replace content in function parameter with this.id like below
<div class="field">
<div class="form-group">
<label class="required" for="type_id"><?php echo $this->__('Occasion') ?><em>*</em></label>
<div class="input-box">
<select id="type_id" name="type_id" title="<?php echo $this->__('Occasion') ?>" class="validate-select form-control" onChange="criaDados(), showId('this.id') { echo "style='display: none;'"; } ?> >
<option value=""><?php echo $this->__('Please select occasion') ?></option>
<?php foreach($_e->getTypes() as $k=>$v):?>
<option value="<?php echo $k ?>" <?php if($_e->getTypeId() == $k) echo 'selected'?>><?php echo $this->htmlEscape($v) ?></option>
<?php endforeach; ?>
</select>
<input type="text" value="<?php echo $_e->getTypes()[$_e->getTypeId()] ?>" class="form-control" disabled <?php if (is_null ($_e->getId())) { echo "style='display: none;'"; } ?> />
</div>
</div>
</div>
Then you can use it
function showId(id)
{
var id_val = $("#" + id).val();
alert(id_val);
}

not sure what you mean by 'get' but I'm guessing JavaScript
document.getElementById('type-id');
showId(document.getElementById('type-id'));

I see you use Bootstrap, so jQuery is not far away.
How about this:
function showId(id){
var v = $("#" + id).val();
alert(v);
}
or something like this:
$( "#"+id+" option:selected" ).text();
Second one gets the selected text, the other one the selected value of the selected option.

Categories

Resources