I can't show or hide a component from a multiplied combo box, but I can show or hide it from an original combo box(the first combo box)
what should I do..?
this is function to multiply the combo box
function addEmploy() {}
$('#addEmploy').click(function(){
$('#comboEmploy')
.append('<br />')
.append($('#comboEmploy select').first().clone());
});
this is script to show or hide the component
$("#employ").change(function() {
if($(this).val() == "2"){
$("#comboStudy").show("slow");
}else{
$("#comboStudy").hide("slow");
}
});
This is the combo box
<span id="comboEmploy">
<select name="employ[]" id="employ">
<option value="NULL" selected >Choose one</option>
<?php foreach ($employs as $employ) :?>
<option value="<?php echo $employ->employ_id; ?>">
<?php echo $employ->employ_name; ?></option>
<?php endforeach; ?>
</select>
</span>
Add Employ
This is the component that I want to show/hide
<span id="comboStudy">
<select name="study[]" id="study">
<option selected value=NULL>Choose one</option>
<?php foreach ($studies as $study) :?>
<option value="<?php echo $study->study_id; ?>">
<?php echo $study->study_name; ?></option>
<?php endforeach; ?>
</select>
</span>
Can anyone help me. thanks before.
When you clone the select box, you need to tell jQuery to clone the events along with it:
.clone(true);
As you are appending elements to the DOM after page load you need to use the live() function to attach their events:
$("#employ").live("change", function() {
...
}
Related
I want change select options to grid view.
I mean for now I must select an option to view the title, picture and buttons as you look here https://www.screencast.com/t/db7mGdlNgz
<div class="import-form-fields">
<select class="demo_version" name="demo_version">
<option>--select--</option>
<?php foreach ($list as $key => $value): ?>
<option value="<?php echo esc_attr( $key ); ?>" data-imported="<?php echo ($this->is_version_imported( $key )) ? 'yes' : 'no'; ?>"><?php echo esc_html( $value['title'] ); ?></option>
<?php endforeach ?>
</select>
</div>
Also i want that all options are showing in 1 time without select option.
How can i do this ? Please help me.
The only way to show all the options are to create a pseudo elements in Javascript.
or if you allow multiple select, you can list them all at once too.
<select multiple>
</select>
I have a drop down list where I'm populating data from the database.
<div class="form-group">
<label>Title:</label>
<select class="form-control" name="Title" id ="titleselect" required>
<!-- <option value="" selected="selected">?</option> -->
<?php foreach ($titles as $row) {
if($this->session->userdata('status')=='active' && $this->session->userdata('Title') == $row->id) { ?>
<option value="<?php echo $row->id; ?>" selected="selected"><?php echo $row->value; ?></option>
<?php }else{?><option value="<?php echo $row->id; ?>"><?php echo $row->value; ?></option><?php } }?>
</select>
</div>
My form,
How values are populated from the database,
My database table,
I want to add a validation when the title form is populated with the value "0", which is "?", it should call the HTML required attribute.
Or I would like to disable the option with the '?' mark.
How can I do achieve this?
I have managed to find a solution to my issue. I managed to do it without any JS or Jquery. Just added an if statement.
<div class="form-group">
<label>Title:</label>
<select class="form-control" name="Title" id ="titleselect" required>
<?php foreach ($titles as $row) {
if($this->session->userdata('status')=='active' && $this->session->userdata('Title') == $row->id) { ?>
<?php if(($this->session->userdata('Title') == 0)) { ?>
<option value="" selected disabled><?php echo $row->value; ?></option>
<?php } else{?>
<option value="<?php echo $row->id; ?>" selected="selected"><?php echo $row->value; ?></option>
<?php } ?>
<?php }else{?><option value="<?php echo $row->id; ?>"><?php echo $row->value; ?></option><?php } }?>
</select>
you can use jquery like this: you can use an id for ? like id="yourZeroOption" and then
$('option#yourZeroOption').each(function() {
if ($(this).isChecked())
$("select").attr("required", true);
else
alert('this filled cannot be ?');
});
since what you asked was'nt clear enough this code might helf and if you manipulate this code you can get what you want from your code. but this for sure will give you a gist of what you should do. by the way this code does not need to submit it will show the alert before that
If this is in Laravel there is a way to catch certain number to be pass. In this case, try with greater_than rule with a custom message.
Example
$this->form_validation->set_rules('title', 'Title', 'greater_than[0]');
$this->form_validation->set_message('greater_than', 'Please select one of these value');
Note: JS validation works, But keep mind it's not always.
You should mark your <select> field as required, then the first option as disabled (and selected):
<select required>
<option value="" selected disabled>?</option>
<option value="1">Mr.</option>
<option value="2">Miss</option>
<option value="3">Mrs.</option>
</select>
This will make the first entry work as a placeholder basically.
we cant make it require with 0 value it can be done only if value=""
here is my idea,
<form action="/action_page.php">
<select required>
<option value="0">?</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("select option:selected").val("");
});
</script>
<style>
I'm currently using Selectize.js with a 'select' item and multiple options. My html is something like:
<div class="form-group">
<label for="record-genre">Genre(s):</label>
<select name="record_genre" id="record-genre" class="form-control multi-selectize" multiple="multiple" placeholder="Enter genre(s)">
<?php foreach ($record_genre_opts as $key => $val): ?>
<option value="<?php echo $key; ?>" <?php echo (in_array($key, $record_genre)) ? "selected" : ''; ?>
<?php echo set_select('record_genre', $val); ?>
>
<?php echo $val; ?>
</option>
<?php endforeach;?>
</select>
</div>
So far so good. The items are being loaded correctly and until this point everything works great. The issue is that when the form is submitted only the last value selected is the one that is available, so if I selected multiple items I'm getting just one:
["record_genre"]=> string(1) "1"
Here's my JS setup:
$('.multi-selectize').each(function(){
//console.log($(this))
$(this).selectize({})
})
Any suggestions?
Thanks.
My mistake. The name of the select item should be record_genre[] since it is declared as a multiple select instead of just record_genre.
I use multiselect JS with php to get more than one selection of my form select.
Impossible for me not to show the selection' results on the select tags.
At least, if It's possible to show just the number of sélection(s) , it would be nice.
Thanks.
Sorry by impossible for to enter my code for the moment ! (seem not working)
<label for="showroom">Type/products* :</label>
<select class="form-control" id="materials" name="materials" multiple="multiple">
<?php while($prod=mysqli_fetch_assoc($prodQ)): ?>
<option value="<?php echo $prod['choc_id']; ?>"><?php echo $prod['choc_nom']; ?></option>
<?php endwhile; ?>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('#materials').multiselect();
});
</script>
I have created and populated a drop down, I wish to alert(1) when the option in the dropdown changes. I can do it for a button with onclick but onchange doesn't seem to work. Thanks in advance.
global.js file:
$('input#lst_MonthDrop').on('change',function(){
alert(1);
};
Drop down menu:
<select name="lst_MonthDrop" style="background-color:#FF9933; color:#FFF; border:none; margin-top:10px; margin-left:10px;" onchange="global.js">
<option>Please Select</option>
<?php
include 'populatedrodown.php';
foreach ( $results as $option ) : ?>
<option value="<?php echo $option->Date; ?>"><?php echo $option->Date; ?> </option>
<?php endforeach; ?>
</select>
Remove the onchange attribute you currently have, and also target the elements name attribute. You do not have an ID:
$("select[name=lst_MonthDrop]").change(function() {
#lst_MonthDrop is <select> not <input>
Change
$('input#lst_MonthDrop').on('change',function(){
alert(1);
};
to
$('select[name="lst_MonthDrop"]').on('change',function(){
alert(1);
};