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.

Don't know how to solve (Between Php and Javascript)

I don't know how to solve the variable $cat by following script.
"text" variable from Form to javascript and pass to php function to be $Categories_name and to be $cat.
I already test the $cat variable, it is not "String", it is "object", I don't understand.
But I need $cat to be "String".
when Test = "This is Cat" (3 words),
I test $cat by php str_word_count and the output is 1 (I need to correct answer 3);
I test $cat by php var_dump and no output (I need to correct answer "String").
<p id="CaTable"></p>
<script>
function CaFunction()
{
var text = document.getElementById("CategorySelect").value;
document.getElementById("CaTable").innerHTML = "<?php php_catable('" + text + "'); ?>";
}
</script>
<!-- Generate Table by php and MySQL-->
<?php
function php_catable($Categories_name)
{
$cat = $Categories_name;
.................
.................
$sql = "select * from table where xyz = '" .$cat. "'";
}
?>

You are confusing server side code and client side code. Your php code live on the server and can only be executed on the server. And your javascript is on your client's browser and does not know about the server (remember, php generate a text file, and only that text file is sent to the browser). if you want to use the php_catable() function from your client, you will need to do an AJAX call or to redesign your page to do a form submit (just like what Steve is proposing).

Your First Page:
Assuming CategorySelect is a dropdown select box, create a script for its onChange event and create a method="post"post form with a hidden input that goes to "generate_table.php".
<input type="hidden" name="ca_table" id="ca_table" />
You make ca_table a hidden input so php will pick up the value from it when this page gets submitted to a second page where you can generate your table using the php function.
<script language="javascript" type=text/javascript>
function CaFunction(){
documentGetElementById('ca_table').value = documentGetElementById('CategorySelect').value;
submit();
}
</script>
add this to your select dropdown:
onChange="CaFunction();"
Your Receiving Page:
So your receiving page "generate_table.php" would have
<?php
function php_catable($Categories_name)
{
$cat = $Categories_name;
.................
.................
$sql = "select * from table where xyz = '" .$cat. "'";
}
$category_name = $_POST['ca_table']; // cleaned up at least with suitable preg_replace etc
// and call your catable function
php_catable($category_name);
?>
So that way your result will have been posted back to the server as per comments about client side/server side by #Fluinc and answer by #litelite. To get it to do something which performs looking like innerHTML which changes a part of the page without submitting the whole page you will need AJAX, again as per #litelite's answer.
Might get marked down for being dependant on JavaScript but intended mostly to help clarify client v server.
If you want to avoid the JavaScript dependency of this script you could leave out the onChange altogether and add a submit button, then collect $_POST['CategorySelect']; assuming that is its name - ensure it has name="CategorySelect" for php as well as its Id for your css/javascript. Php gets its variable from the item's name.
To get something a bit like the effect of AJAX visually (though the page is still submitted) you could submit the page to itself using action="<?php echo $_SERVER['PHP_SELF']; ?>" on the form and have all the code on the one page. You can put the table generating code in the div where you want the table to appear - it would need a default state set, of course.
#litelite's comment regarding not using posted data directly in an sql query is also vital to prevent attack - make sure you clean it up before you use it!

Ajax & JavaScript Multiple Select onchange failing after 3 selected items

I have a select input with the following code:
<select name="color" id="color" multiple class="form-control chzn-select" tabindex="8" onchange="autosave(this.id,this.value)">
It is successfully sending the function ID and select value, but seeing as one can select multiple items, it's having an issue. I can select up to 3 items without a problem, but attempting to select a 4th is causing it to pass the value of the first selected item. Not the most recently selected item. Here's the function, which sends other information such as title and date (both text inputs):
function autosave(inputid,values) {
var dataObj = {};
dataObj[inputid] = values;
$.ajax({
type: "POST",
url: "save.php",
data: dataObj,
success: function(msg) {
$('#autosavenotify').text(msg);
console.log('success');
}
})
}
HTML wise I am using Bootstrap3 if that makes a difference and here's how I'm populating the select options:
<?php
$colors = array('Red','Blue','Yellow','Purple','Green','Orange');
foreach($colors as $c) {
$selected = '';
if(in_array($c, $_SESSION['array']['colors'])) {
$selected = 'selected';
}
echo '<option value="'.$c.'" '.$selected.'>'.$c.'</option>';
}
?>
Any ideas why this might be happening? My save.php page is placing all items successfully within the array, the ajax is just sending the incorrect value for some reason.

Because you're already using jQuery, you'd probably be better off just using $(this).val( ) to get the selected options from your select. Here's a fiddle I came up with using your provided code: http://jsfiddle.net/y7NfF/1/
Another route you might consider taking would be using jQuery's .serialize() or .serializeArray() function to get all values of your form when submitting the data through ajax. However, if you want to do one element at a time, your method works just fine.
Here are a couple of links to those functions:
http://api.jquery.com/serialize/
http://api.jquery.com/serializeArray/

PHP & Javascript Assignment Issue

I have the following situation:
In a codeignitor project, from the controller, I load a view.
Within that view, I load another view. This sub view is slide open and close based on a radio box selection.
Now this sub view expects the value of the radio box selected.
<?php $this->load->view('myview', $value); ?>
Since the main view is already loaded, and loads the sub view too, how can I assign the value of the radio box selected to the $value variable?
I am using this code for radio box:
<input type='radio' name='var1' id='var1' value='myvalue' onchange=show('true');>
Then in the SHOW function I have this:
function show(val) {
if (val == 'true') {
var var1 = $("#var1:checked").val();
}
}
So I get the value on change to var1 in javascript correctly. But how to pass this value to the value variable in the sub view:
<?php $this->load->view('myview', $value); ?>
Tried the AJAX route too:
I tried ajax route and did this:
$.ajax({
type: "POST",
url: "",
data: "var1=" + value,
success: function(result) {
}
});
And in controller funtion set the
$this->template->set('$value', $this->input->post('var1'));
echo 1;
But still the
<?php $this->load->view('myview', $value); ?>
doesn't read value.

<?php
$this->data['value']= $value;
$this->load->view('myview',$this->data['value']);
?>
myview.php
<?php
echo $value;
?>

There are two environments that you are working on. What you can do is to send a GET or POST variable to your PHP script and process the data. Because everything is rendered in the back-end (PHP part) you need to get status of the checkbox before to load your views. So, without ajax your option is to reload the page with a get parameter set.

get closest input from select and place it in $.post

Okay. please see bottom screenshot for illustration on frontend. What i'm trying to do here is when the user makes a selection in the select form ie: selects Received, I want to get the value of the inputbox directly on the bottom of the select form and send it via $.post to another script in order for me to process it.
I can't seem to get the data pass over via $.post to read the value in the inputbox. Main focus should be at the $.post area. I tried using $('.order_item_id').val(); in my $.post data but i only get the value under the first inputbox regardless of whichever selectbox i make the selection from.
Here is the section of my javascript and php.
.js
$('.order_stat_sel').change(function(){
var closest_div=$(this).closest('div.order_receipt');
var closest_selectbox=$(this).closest('.order_stat_sel');
if($('.select_received:selected').length>0){
if(confirm('Confirm Receipt of this item?')){
$.post("/seller/buyer_cfm_receive.php",{order_item_id: $(this).closest('.order_item_id').val()}, function(data) {
alert("Congrats, Order Item Completed" + data);
closest_div.append('<p>Completed</p>');
closest_selectbox.remove().fadeOut("slow");
});
}else{
$('.order_stat_sel').val('p');
}
}
});
php
if($this->orderstatuses[$item->order_status]!='received'){
echo '<select class="order_stat_sel" name="order_status">';
echo '<option class="select_pending" value="'.$pendingitem_state[2].'">'.$pendingitem_state[3].'</option>';
echo '<option class="select_received" value="'.$enditem_state[2].'">'.$enditem_state[3].'</option>';
echo '</select>';
}?>
<form class="send_order_cfm_input">
<input class="order_item_id" name="order_item_id" value="<?php echo $item->virtuemart_order_item_id;?>" type="text" readonly="readonly">
</form>
Any help appreciated

.closest() finds the closest ancestor of the element, but you are actually searching for a descendant of a neighbour:
$.post("/seller/buyer_cfm_receive.php",
{
order_item_id:$(this)
.next(".send_order_cfm_input")
.find('.order_item_id').val()
},
function() {
/*...*/
}
);