We Keep Coding

PHP/Javascript - Change 2nd Select element based on selection in first Select element and retain selections through POST & page reload

First SELECT:
<?php
function select_size($itemSizes){
echo "<select id=\"size\" name=\"size\">";
$sizes = array("0" => "All Sizes","1" => "Large","2" => "Medium","3" => "Small");
foreach($sizes as $s => $si){
if($itemSizes == $s){$selected = "selected";}
echo "<option value=\"" . $s . "\" $selected>" . $si . "</option>\n";
$selected = "";
}
echo "</select>\n";
}
?>
Second SELECT:
$(document).ready(function() {
$("#eventCategory").change(function() {
var val = $(this).val();
$("#eventType").html(options[val]);
});
var options = ["
<option value='all_items'>ALL Items</option>
<option value='red'>red</option>
<option value='blue'>blue</option>
<option value='green'>green</option>
];
});
First select retains value due to PHP. onChange is working properly as once a value in Select #1 is chosen, Select #2 populates with it's appropriate list. The problem I'm having is Select #2 is not retaining it's value through a POST and page reload. I've worked out a bit of JS that does this but it fouls up the onChange function. I'm trying to achieve both at the same time and have failed thus far. Yes, I'm an amateur with JS. Pretty good with many other languages. The syntax is causing me troubles. Any assistance is greatly appreciated.

You can send an ajax when first select triggers onChange event.
Then, on the success of this Ajax, you can get values from php and changing the second one. As you are using ajax, the first option will not be modified.
As you asked for "reloading page" you will need to print a script in the view that browsers can render, this can look like:
if you can know the ID of each option (if any):
echo "<script> $('#selector1 option#'.$idOption.').attr('selected', 'selected'); </script>";
if you can't know the ID of each or there are any id to catch, you'll get the value for sure, the script will look like:
$('#selector1 option[value="'.$value.'"]').attr("selected", "selected");
where in the first case $idOption is the id of the option selected on first selector and retrieved from php. $value in the second script is.. well, the value.
don't really know if there solves your entire problem as i can only see a part of your code, i'll edit it if you provide feedback.
Maybe you would var_dump / console.log values for getting a backtrace of your data and see where it's lost to ensure you pass the needed data around your functionallity.

Get currently selected value in editable select box

I have used editable select Jquery plugin ,now the problem is i want the currently selected value of editable select control with out on change or other event
link to Editable select
I have tried following till now but no success
$('#customer_name').find('li.selected').value()
$('#customer_name').siblings('.es-list').find('li.selected').value()
$("#customer_name").val();
HTML
<select id="customer_name" name="customer_name" class="form-control">
<?php
foreach($customers as $customer){
echo "<option value='".$customer['cust_id']."'>".$customer['cust_name']." </option>";
}//foreach
?>
</select>
$('#customer_name').editableSelect();

I have dome some R&D regarding this question and I have found something which helps me to achieve the goal. So, I am sharing the Jquery code with the Link so that you can get more information.
Jquery code for getting the selected value:
$('#onselect')
.editableSelect()
.on('select.editable-select', function (e, li) {
console.log('Seletced Value: ');
console.log(li.val() + '. ' + li.text());
});
Ref. Website Jquery Editable Select Example
Thanks.

Try this
const x = $('#customer_name').attr('value')
this should work.
if this doesn't work, then your HTML element doesn't have an attribute called value, try adding a value & id to any HTML element then do $(id).attr('value') and you'll get the value attribute

I have read the docs but i could't find any solution so what i have done is stored the value of editable select in hidden filed for the first time and when user change the value then i have jquery to update the value .
if any one has solution please mention

HTML - using mysql/php to generate a select box. how can I change the "value" of the generated select box options?

So my select box is generated from mysql (php), this means that I am unable to insert a "value" (as far as I know) like this:
<option value="CCFFFF">light blue
My select box is generated like this:
?php
if (mysql_num_rows($result)!=0)
{
echo '<select onChange="updateColor(this.options[this.selectedIndex].value);" name="sunday combo" id="Suncombo2">
<option value= " " selected="selected">Please Select</option>';
while ($test = mysql_fetch_array( $result ))
{
echo '<option value="'.$test['am_task'].'">'.$test['am_task'].'</option>';
}
echo '</select>';
}
?>
The reason for using the "value" is so that I am able to automatically change the colour of the selected option from the select box.
Is there a way I can do this?
I have two options:
holiday
TBC
These are defined inside of the MySQL and I know they're not going away. So I would like "holiday" green, and then "TBC" orange. Any other value generated from the select box I would like blue. Is this possible, not sure if I am well out of my depth or not?
I already have the code for changing the colour which is located inside of here: HTML - changing color in text area from an option inside of a select box generated from mysql

Assuming you have a filed in your sql tabe naming "color" then you sql would be like this:
select color,am_task from mytable
and when printing options:
echo '<option value="'.htmlspecialchars($test['color']).'">'.htmlspecialchars($test['am_task']).'</option>';

Use two different fields from the db, one for the value, one for the display name:
echo '<option value="'.$test['am_color'].'">'.htmlspecialchars($test['am_task'], ENT_QUOTES).'</option>';
I'm going to assume you don't have this field yet, so obviously you need to add it, using something like (unless you have a GUI for editing table schemas):
alter table am_dropdown add am_color varchar(20);
Then update the records to pair your color with the task name:
update am_dropdown set am_color='green' where am_task='holiday';

How to call ajax by jquery on multiple checkboxes?

I have multiple (number may go as high as 500) checkboxes, as follows
<?php
$duplicate_checked='';
if ($repeat==1)
{
$duplicate_checked=' checked';
} else {
$duplicate_checked='';
}
?>
<input type="checkbox" name="isrepeat-<?php echo $id_no; ?>" id="isrepeat-<?php echo $id_no; ?>" class ="class_isrepeat" value="<?php echo $id_no;?>" <?php echo $duplicate_checked;?> onclick="updateRepeat(this.checked,<?php echo $id_no;?>);"/><label for="isrepeat-<?php echo $id_no; ?>">Is a duplicate Question?</label>
I want to update the value of Repeat column of the particular question number ($id_no, in this e.g.) in mysql database (e.g. named Qbank) on change of checked value of that checkbox.
I am able to successfully get checked value in javascript function updateRepeat(value, ques_no); But I couldn't get a way to call ajax by javascript.
In jquery this can be done something like -
$('#isrepeat-{question no}').change(function() {
$.post('update_repeat.php', {ques_no: question_number, repeated: checkbox_value_integer},
function(data){
$("#result").html(data);
});
});
Edit - 1. #isrepeat-{question no} represents id tag of the checkbox depending on question number eg, #isrepeat-1, #isrepeat-2, #isrepeat-3 etc.
But, This would require definite question number in "#isrepeat-{question-no}". I dont know how to construct this jquery in a way that it automatically picks question no and checked property for any particular checkbox clicked.
If I use class, instead of id for checkboxes then, how can i get question number and checkbox checked value for any checkbox in a single function?
Also, although I have a basic Idea what should be in update_repeat.php for ajax call, it would be nice if you could give any way by which this update can be easily done in ajax.
thanks.
regards,

Firstly, you are correct by utilizing class as selection to trigger the function. You can then continue by calling $(this) within the trigger callback to utilize the document object for each particular checkbox user clicked on.
Then just use .attr to get an input attribute that stores some information.
Which makes the code into
$('.class_isrepeat').change(function() {
question_number = $(this).val();
checkbox_value_integer = $(this).prop('checked');
$.post('update_repeat.php', {ques_no: question_number, repeated: checkbox_value_integer}, function(data){
$("#result").html(data);
});
});

Why the JavaScript result always return first value?

here is my problem. I'm currently trying to customize joomla article content with some module. As i'm trying out hide some div before the user had click on the input. Lets say user click Test1 which is a radio button , then another field which i hide with div will shown up the content of Test1. All the detail is load from mysql database.
Here is my javascript code that i trying to show the value. But it alway show me first value although i click other value suck as Test2 or Test3.
Example:
<script type="text/javascript">
function showBox1(){
document.getElementById('hideBox1').style.display ="";
var test = document.getElementById('123').value;
confirm (test);
</script>
Here is my php code:
<?php
// Get default database object
$db =JFactory::getDBO();
// Get a new JDatabaseQuery object
$query = $db->getQuery(true);
// Build the query
$query->select($db->quoteName('campusid'));
$query->from($db->quoteName('campus'));
$query->where($db->quoteName('collegeid').'='. $db->quote('1'));
// Set the query for the DB oject to execute
$db->setQuery($query);
// Get the DB object to load the results as a list of objects
$results = $db->loadObjectList();
if($results){
foreach($results as $result)
{
echo "<label class='option block spacer-t10'>";
echo "<input type='radio' name='$result->campusid' id='123' value='$result->campusid' onClick='return showBox1()'><span class='radio'></span>";
echo $result->campusid;
echo '</label>';
}
}
else{ echo 'Error';}
?>
As an example the output for first div is 3 radio button, each radio button had it own value. When user click on either 1 of the radio button then it should pass the correct value to be shown up so that i can bring the value to the next div to select my database data. Is there any mistake i had made on my code that make me alway getting the first value although i click other radio button?

Each radio button is an element in its own right. The radio group is not a single element.
Every radio button has the same id, which is invalid and not allowed in HTML.
When you getElementById, the browser attempts to perform error recovery and gets the first element with that id (ignoring the others).
If you want to deal with a group of elements, then:
make them members of a class
getElementsByClassName
Loop over the result and test the checked property
When you find a true checked take the value of that element

Your radiobuttons have the same id 123. You are selecting the element from the DOM using this id. Make sure every radiobutton has a unique id.
You don't even need the Id if you pass the element to the function.
HTML:
onClick='return showBox1(this)'
JavaScript
function showBox1(element){
confirm (element.value);
}

First of all, all the radio buttons have the same id attributes: "123".
The document.getElementById() function expects, that a certain id is only present once on a page.
If you want to get the selected value for the elements with id "123", then you should select like this:
var test = document.querySelector("#123:checked")[0].value;
If this doesn't work, then try:
var test = document.querySelector("[id=\"123\"]:checked")[0].value;