Show error alert when the data was exist

Show error alert when the data was exist - javascript

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

Related

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

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() });

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>

Change select selected with Jquery data

I have this code for Jquery i just started working with Jquery but i have a bit of knowledge with Javascript.
<script>
$(document).ready(function(){
$("#d_or_t").val('navbar');//<?php echo "cms18"; ?>
// if ('<?php $key ?>'== '<?php ?>') {};
});
$('#selector').on('change',function(){
//alert($(this).find("option:selected").html()) ;
var data = document.getElementById('url_option');
var current = $(this).find("option:selected").html();
alert(current);
//alert(current);
//(data.dataset.domains);
});
</script>
And my HTML select box is this one i have three of them and i want that when i change the URL select box the other 2 select box change to an data
<form action="php-json.php" id="form" method="post">
<select name="selector" id="selector" class="form-control">
<!-- opzoeken wat de colon : betekend daar -->
<?php foreach ($aUrls as $key => $value)
: ?>
<option id="url_option" data-domains="<?php echo $aDomains[$key]; ?>" data-template="<?php echo $aTemplates[$key]; ?>" value="<?php echo $value; ?>">
<?php echo $value;?>
</option>
<?php endforeach; ?>
</select>
</div>
<div class="col-xs-12 col-md-3 col-lg-3">
<select name="d_or_t" id="d_or_t" class="form-control">
<?php foreach ($aDomains as $key => $value) : ?>
<option value="<?php echo $value; ?>"><?php echo $value; ?></option><?php endforeach; ?>
</select>
</div>
<div class="col-xs-12 col-md-3 col-lg-3">
<select name="t_or_t" id="d_or_t" class="form-control">
<?php foreach ($aTemplates as $key => $value) : ?>
<option value="<?php echo $value; ?>"><?php echo $value;?></option><?php endforeach; ?>
</select>
</div>
<div class="col-xs-12 col-md-3 col-lg-3">
<button type="submit" class="btn btn-default" value="veranderen">Veranderen</button>
</div>
</div>
</form>

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.

Develop Reference

JavaScript is the programming language of the Web.

Show error alert when the data was exist - javascript

Related

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

how to show comma separated values in form

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

Change select selected with Jquery data

SelectBox getID

Categories

Resources