Develop Reference

OnChange with javascript/ajax result, also with a php foreach loop

I have this interesting setup that I hope someone can help me fix. I've searched and found some solutions but nothing that comes close to what I'm trying to achieve, so nothing really lead me in a direction that could get me to a solution for what I'm doing
I have a dropdown of litters. You select a litter, onchange happens, it gets the available pick spots from the database, then echos out the results with another foreach to another dropdown menu
The problem is, these dropdown menus are inside of a foreach loop (for each client available to the site user). So the first client works as expected, but because it has the same ID, the second client's dropdowns don't do anything since it's still on the same page
Hopefully someone has some insight on how to make this work :(
Here's the dropdown:
<select class="form-control mb-3" name="the_chosen_litter" id="litter" required>
<option disabled selected>First, Choose A Litter...</option>
<?php
foreach($labradoodle_two as $litter_waitlist_form){
?>
<option id="<?php echo $litter_waitlist_form['litter_id']; ?>" value="<?php echo $litter_waitlist_form['litter_id']; ?>" style="<?php if($litter_waitlist_form['status']=='LITTER CLOSED'){ echo 'color:red;'; }else{ echo 'color:green;'; } ?>" >
<?php echo $litter_waitlist_form['litter_names']; ?>
</option>
<?php } ?>
</select>
<select class="form-control mb-3" name="buyer_pick_gender" id="pick_list" required> <!-- uses jquery to fill in this field -->
<option disabled selected>Litter Selection Required...</option>
</select>
Here's the javascript/ajax:
$(document).ready(function() {
$("#litter").on("change", function() {
var litterID = document.getElementById("litter").value;
$.post('secure/litter_list_dropdown.php', { littersubmit: litterID }, function(result) {
$('#pick_list').html(result);
}
);
});
});
And for reference, here's my "litter_list_dropdown" code that pulls from the database and echos out the available "pick spots":
<?php
session_start();
include '../../database/dbh.class.php';
$litter_id = $_REQUEST['littersubmit'];
$femalespickedquery = $dbpdo->query("SELECT * FROM pick_assignment WHERE litter_id=? AND gender_id=?",$litter_id,"1")->fetchAll();
$malespickedquery = $dbpdo->query("SELECT * FROM pick_assignment WHERE litter_id=? AND gender_id=?",$litter_id,"2")->fetchAll();
?>
<option disabled="disabled" selected="selected">Choose A Pick</option>
<?php foreach ($femalespickedquery as $pick){
$picktaken=$pick['user_id'];
$pickcustom=$pick['custom_name'];
$pickposition=$pick['pick_id'];
$suffix=ordinal($pickposition);
?>
<option value="<?php echo $pickposition.' 1'; ?>" <?php if($picktaken!="0" OR $pickcustom==true){ echo "disabled"; } ?>>
<?php echo "FEMALE - " .$pickposition.$suffix. " Pick"; if($picktaken!="0" OR $pickcustom==true){ echo " *RESERVED*"; }?>
</option>
<?php } ?>
<?php
foreach ($malespickedquery as $pick){
$picktaken=$pick['user_id'];
$pickcustom=$pick['custom_name'];
$pickposition=$pick['pick_id'];
$suffix=ordinal($pickposition);
?>
<option value=<?php echo $pickposition.' 2'; ?>" <?php if($picktaken!="0" OR $pickcustom==true){ echo "disabled"; } ?>>
<?php echo "MALE - " .$pickposition.$suffix. " Pick"; if($picktaken!="0" OR $pickcustom==true){ echo " *RESERVED*"; }?>
</option>
<?php } ?>

Keep the selected options after submitting the form

Good morning, I have a problem that is: I can not keep several options selected after submitting the form and I would like someone to help me.
<select name="utilizadores[]" id="utilizadores" multiple="multiple" class="selectpicker" data-live-search="true" data-actions-box="true" title="Utilizadores">
<?php while ($reg_sql=mysqli_fetch_array($res_sql)){?>
<option value="<?php echo $reg_sql['ID_USER']; ?>"><?php echo $reg_sql['NOMEUSER']; ?></option>
<?php } ?>
</select>
<script type="text/javascript">
document.getElementById('utilizadores').value = "<?php echo $_POST['utilizadores[]'];?>";
</script>
this is my code to have the various options in the select box

You have to check if $_POST['utilizadores'] or $_GET['utilizadores'] it depends on your request type. I will use $_POST in here for explain my answer.
your select is multiple, you can use in_array function for checking that if result from db record is in array of $_POST['utilizadores']
<select name="utilizadores[]" id="utilizadores" multiple="multiple" class="selectpicker" data-live-search="true" data-actions-box="true" title="Utilizadores">
<?php while ($reg_sql=mysqli_fetch_array($res_sql)){?>
**<option value="<?php echo $reg_sql['ID_USER']; ?>"
<?php
if(isset($_POST['utilizadores'])){
if(in_array($reg_sql['ID_USER'], $_POST['utilizadores'])){
echo 'selected';
}else{
echo '';
}
}
?>
>**<?php echo
$reg_sql['NOMEUSER']; ?></option>
<?php } ?>
</select>

You may be able to do it more efficiently if your database result also contains which rows are selected, but when you loop through, just add the selected="selected" attribute to the <option> tag.
Assuming your $_POST array exists in this scope, you can use the in_array function in PHP to determine if the option has been selected (docs).
The ternary based operation is as follows:
in_array($reg_sql['ID_USER'],$_POST['utilizadores']) ? 'selected="selected"' : ''
Which says "if the ID_USER is in the post array, then print the selected attribute, otherwise, print a blank string"
Putting it all together:
<select name="utilizadores[]" id="utilizadores" multiple="multiple" class="selectpicker" data-live-search="true" data-actions-box="true" title="Utilizadores">
<?php while ($reg_sql=mysqli_fetch_array($res_sql)){?>
<option value="<?php echo $reg_sql['ID_USER']; ?>" <?= in_array($reg_sql['ID_USER'],$_POST['utilizadores']) ? 'selected="selected"' : '' $?>>
<?php echo $reg_sql['NOMEUSER']; ?>
</option>
<?php } ?>
</select>

An example of how you can do this. Either add the "selected" string if yes or leave blank if no. You can also write selected="selected". You can do the same thing to set disabled or readonly.
<select name="utilizadores[]" id="utilizadores" multiple="multiple" class="selectpicker" data-live-search="true" data-actions-box="true" title="Utilizadores">
<?php while ($reg_sql=mysqli_fetch_array($res_sql)){?>
<?php $selected = isset($reg_sql["mi_variable"]) ? "selected" : ""; ?>
<option value="<?php echo $reg_sql['ID_USER'];?>" <?php echo $selected; ?> >
<?php echo $reg_sql['NOMEUSER']; ?>
</option>
<?php } ?>
</select>
<script type="text/javascript">
document.getElementById('utilizadores').value = "<?php echo $_POST['utilizadores[]'];?>";
</script>

How to call HTML required attribute when the value is 0?

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>

Selectize js submitting only last selected item

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.

Multiselect without showing result on page

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>