What I want to acheive:
I have a HTML/PHP page where I display the home page of the website. I have a highscore section on this page. The data for the highscore page is retrived from a database. There is a Select box where you can choose how the highscores are sorted.
The highscore section on the page
I want to be able to select an option from the dropdown. When an option is selected, the way that the data is displayed changes dynamically, without the page refreshing.
Here is the code on the home.php page (Where the highscore section is)
<div class="third third-center">
<h2>Highscores</h2>
<div class="sortby">
<form id="" method="post" action="home.php">
<select id="selectForm" name="sort">
<option value="score ASC">Score Ascending</option>
<option value="score DESC">Score Descending</option>
<option value="userName ASC">Name Ascending</option>
<option value="userName DESC">Name Descending</option>
</select>
</form>
</div>
<div class="inner">
<table>
<tr>
<th style="font-size: 20px">Position</th>
<th style="font-size: 20px">Name</th>
<th style="font-size: 20px">Score</th>
</tr>
<?php
$i = 0;
$choice = "score ASC";
$search = mysqli_query($connect, "SELECT * FROM accounts ORDER BY ".$choice."") or die(mysqli_error($connect));
while($row = mysqli_fetch_array($search)){
$i++;
echo "<tr>";
echo "<th>" . $i . "</th>";
echo "<th>" . $row['userName'] . "</th>";
echo "<th>" . $row['score'] . "</th>";
echo "</tr>";
}
?>
</table>
</div>
</div>
I am using the Mysqli_Query to get all the data from the database. I am passing in a variable in place of the ORDER BY so that I can change the way the data is retrieved.
I know I can use Ajax to get the data, but Im not sure how to do it, I have looked at many other questions posted on this forum.
Any help would be greatly appreciated!
Use JQuery AJAX something like so:
Make two pages one where you display data(index.php) and other from where you fetch data (process.php).
The content of index.php would be something like:
<div class="third third-center">
<h2>Highscores</h2>
<div class="sortby">
<form id="" method="post" action="home.php">
<select onChange="getData();" id="selectForm" name="sort">
<option value="score ASC">Score Ascending</option>
<option value="score DESC">Score Descending</option>
<option value="userName ASC">Name Ascending</option>
<option value="userName DESC">Name Descending</option>
</select>
</form>
</div>
<div class="inner">
<table>
<thead>
<th>
<th style="font-size: 20px">Position</th>
<th style="font-size: 20px">Name</th>
<th style="font-size: 20px">Score</th>
</th>
</thead>
<tbody id="data"></tbody>
</table>
</div>
</div>
The code of process.php should be something liek:
<?php
$i = 0;
if($_REQUEST['sortBy'] == "score ASC")
{
$choice = "score ASC";
}
else if ()//and so on
$search = mysqli_query($connect, "SELECT * FROM accounts ORDER BY ".$choice) or die(mysqli_error($connect));
while($row = mysqli_fetch_array($search)){
$i++;
echo "<tr>";
echo "<th>" . $i . "</th>";
echo "<th>" . $row['userName'] . "</th>";
echo "<th>" . $row['score'] . "</th>";
echo "</tr>";
}
?>
Your Javascript should be like:
function getData()
{
$.ajax({
url : 'process.php',
method : 'GET',
data:{ sortBy:$('#selectForm').val() }
success : function(response)
{
$('#data').html(response);
},
error : function(e)
{
alert('error');
}
});
}
you can make another page by the name of highscores.php and get all the code there.then make a call on page load to get the scores dynamically in this div.
$(document.ready(function(){
//on page load,for the first time.
$('#highscore').load('http://site_url/highscores.php');
//on selectbox change
$('#selectbox').change(function(){
$.post("highscores.php", {sort: val}, function(data){
//perform sorting and return the data div.
$('#highscore').html(data);
});
})
});
//// homepage section where the scores load,add a div by the id
<div id="highscore"></div>
//////// highscore page
<div class="third third-center">
<h2>Highscores</h2>
<div class="sortby">
<form id="" method="post" action="home.php">
<select id="selectForm" name="sort">
<option value="score ASC">Score Ascending</option>
<option value="score DESC">Score Descending</option>
<option value="userName ASC">Name Ascending</option>
<option value="userName DESC">Name Descending</option>
</select>
</form>
</div>
<div class="inner">
<table>
<tr>
<th style="font-size: 20px">Position</th>
<th style="font-size: 20px">Name</th>
<th style="font-size: 20px">Score</th>
</tr>
<?php
$i = 0;
$choice = "score ASC";
$search = mysqli_query($connect, "SELECT * FROM accounts ORDER BY ".$choice."") or die(mysqli_error($connect));
while($row = mysqli_fetch_array($search)){
$i++;
echo "<tr>";
echo "<th>" . $i . "</th>";
echo "<th>" . $row['userName'] . "</th>";
echo "<th>" . $row['score'] . "</th>";
echo "</tr>";
}
?>
</table>
</div>
</div>
There are couple of changes to be done by you, first you need to change the selection box code such that you need to write an on change function and read the value in the javascript and then execute your AJAX call. Second is after the ajax call get the response from the server you need to do a DOM manipulation and populate the value in your desired format.
For example
$(document).on("change", "#select_box_id", function(){
//your ajax call here based on the value
});
I don't know whether you use jquery, if not import the library in your file and use it, which will make your life simpler
Look at this for basic AJAX http://api.jquery.com/jquery.ajax/
If you don't wish to have "live" high-scores that are reloaded from the database every time someone changes the sorting, you might be better off loading the scores into a JavaScript object and then (re)arranging them with JavaScript.
For this you'd need to have a div-element into which you recreate the data (+table structure, if needed) with something like innerHTML after you have sorted the array as you wish with sort. You run this with onChange event in the dropdown list, for example.
If you have a div, for example:
<div id="targetdiv"></div>
So your PHP-generated array could look something like:
var scores = [
{
"name" : "Adam",
"score": "100"
},
{
"name" : "Bert",
"score": "150"
},
{
"name" : "Cecilia",
"score": "75"
} ];
And your sorting algorith could be something like:
scores.sort(function(a, b) {
return parseFloat(a.scores) - parseFloat(b.scores);
});
Then just save the result to a string variable in a for-loop or whatever you want and output it into that "targetdiv" div:
var intostring = "By SCORES!<br><br>"
for (var index = 0; index < scores.length; ++index) {
intostring += scores[index]["name"] + ": " + scores[index]["score"] + "<br>";
}
document.getElementById('targetdiv').innerHTML = intostring;
I made a JSFiddle example for you to better demonstrate the above code:
https://jsfiddle.net/docweird/oaqoysm6/
(Without the onChange and dropdown).
Related
I've created a dropdown list that is populated by data from my mysql db and programmed using php. What I need to do is populate a text field based on the selection made in the dropdown. Unfortunately, my question differs from the others asked on this forum because most are simply typing all of their options into a html form. Mine are contained within a table and I do not want to save the content in the text field to my database...it will be used for user reference only.
I've read a plethora of forum posts on this site and numerous others and have tried using jquery, javascript, and ajax scripts, but for some reason the only thing I've been successful in getting to appear in the text field is the id of the corresponding item selected from the dropdown list. I think it is important to know that both fields come from the same table in the db, so I can't figure out why it is so difficult to automatically populate the field. I would like to use javascript because I want everything in this one file.
This is the code in the php form:
<?php
'<div id="trxdetailstable">';
echo '<table align="center" width="750px" cellspacing="0" border=".5px" ! important><tr>
<th>Movie Title</th><th>Category</th><th>Price</th></tr>';
echo '<td align="left" width="8%" height="25px">';
$ddlquery4 = "SELECT id, title, categoryname FROM dvd ORDER BY title ASC";
$ddlresult4 = mysqli_query($dbc, $ddlquery4) or die("Bad SQL: $ddlquery4");
echo '<select class="dropdown" name="dvdid" id="dvdid" size="1" onchange="updatecat()">';
while($ddlrow4=mysqli_fetch_array($ddlresult4, MYSQLI_ASSOC)){
$categoryname = $ddlrow4['categoryname'];
echo "<option data-categoryname='' value='".$ddlrow4['id']."'>" . $ddlrow4['title'] . "</option>";
} //End while statement
echo "</select>";
echo '</a></td>';
echo '<td align="left" width="10%">';
echo '<input required id="categoryname" name="categoryname" type="text" readonly="readonly">';
echo '</a></td>';
This is the code I currently have in the html head:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This is the code that is currently generating no results (text field is left blank after a dropdown item is selected):
$('#dvdid').change(function(e){
var optionChange = $('#dvdid option:selected').text();
$('#categoryname').val(optionChange);
});
</script>
And this is the code that actually gave me the primary key (id) for the item selected in the dropdown list (I want it to be the categoryname):
<script>
function updatecat(id){
if (id === "") {
$("input[name=categoryname]").val("");
} else {
$("input[name=categoryname]").val(id);
}
}
</script>
I have about 3 other scripts I've tried, but they all left the text (category) field blank.
Any advice would be appreciated. Please keep in mind all of my data is generated from a database not manually entered. Thanks.
You have repeated rows and do not use ID atrribute with them , you can use class like this :
$('select.dropdown').change(function(e){
var optionChange = $(this).find('option:selected').text();
$(this).closest("tr").find(".categoryname").val(optionChange);
});
and your php code should be something like this :
<?php
'<div id="trxdetailstable">';
echo '<table align="center" width="750px" cellspacing="0" border=".5px" ! important>
<tr>
<th>Movie Title</th>
<th>Category</th>
<th>Price</th>
</tr>';
echo '<tr>
<td align="left" width="8%" height="25px">';
$ddlquery4 = "SELECT id, title, categoryname FROM dvd ORDER BY title ASC";
$ddlresult4 = mysqli_query($dbc, $ddlquery4) or die("Bad SQL: $ddlquery4");
echo '<select class="dropdown" name="dvdid" id="dvdid" size="1" onchange="updatecat()">';
while($ddlrow4=mysqli_fetch_array($ddlresult4, MYSQLI_ASSOC)){
$categoryname = $ddlrow4['categoryname'];
echo "<option data-categoryname='' value='".$ddlrow4['id']."'>" . $ddlrow4['title'] . "</option>";
} //End while statement
echo "</select>";
echo '</a></td>';
echo '<td align="left" width="10%">';
echo '<input required class="categoryname" id="categoryname" name="categoryname" type="text" readonly="readonly">';
echo '</a></td></tr>';
For others using html/php and searching for a way to auto populate a text field based on the selection made in a dropdown fed from data held in their mysql db (and only use one file) here is what FINALLY worked for me:
In html head:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
In html/php portion:
echo '<td align="left" width="8%" height="25px">';
$ddlquery4 = "SELECT id, title, categoryname FROM dvd ORDER BY title ASC";
$ddlresult4 = mysqli_query($dbc, $ddlquery4) or die("Bad SQL: $ddlquery4");
echo '<select type="text" class="dropdown" name="dvdid" id="dvdid" size="1" onchange="updatecat()">';
while($ddlrow4=mysqli_fetch_array($ddlresult4, MYSQLI_ASSOC)){
echo "<option value='".$ddlrow4['id']."' data-categoryname='".$ddlrow4['categoryname']."'>" . $ddlrow4['title'] . "</option>";
} //End while statement
echo "</select>";
echo '</a></td>';
echo '<td align="left" width="10%">';
echo '<input type="text" id="categoryname" name="categoryname" readonly="readonly" value="">';
echo '</a></td>';
In HTML area at end of file:
<script>
$('#dvdid').change(function() {
selectedOption = $('option:selected', this);
$('input[name=categoryname]').val( selectedOption.data('categoryname') );
});
</script>
I sincerely hope this prevents someone else from having to go the days of trial and error and endless searching and reading that I went through.
I've made a combobox based on the database.
I want when I've selected one combobox and instantly display the appropriate table combobox that I choose.
Example when I choose west java table will show bandung and bogor.
this my controller
public function show() {
$data['provinsi'] = $this->mdl_onchange->get_provinsi();
$data['kota'] = $this->mdl_onchange->get_kota();
$this->load->view('form_onchange', $data);
}
this my model
function get_provinsi() {
$query = $this->db->get('table_provinsi');
return $query->result();
}
function get_kota() {
$query = $this->db->get('table_kota');
return $query->result();
}
this is my view
<p>
<label for="select_provinsi"></label>
<select name="select_provinsi" id="select_provinsi">
<option>--Pilih Provinsi--</option>
<?php foreach($provinsi as $row_provinsi) { ?>
<option value="<?php echo $row_provinsi->id_provinsi?>">
<?php echo $row_provinsi->nama_provinsi; ?>
</option>
<?php } ?>
</select>
</p>
<table border="1" name="select_kota" id="select_kota" style="border-
collapse:collapse; width:60%;">
<tr style="background:yellow;">
<th>Id kota</th>
<th>Id provinsi</th>
<th>nama kota</th>
</tr>
<?php foreach($kota as $c){?>
<tr>
<td>
<?php echo $c->id_kota; ?>
</td>
<td>
<?php echo $c->id_provinsi; ?>
</td>
<td>
<?php echo $c->nama_kota; ?>
</td>
</tr>
<?php } ?>
</table>
my jquery
<script type ="text/javascript">
$("#select_kota").chained("#select_provinsi");
</script>
I've made like this but its data always appear when I have not chosen combobox western Java.
it is
I see you are using chained Jquery. That's for chaining two selects, not for a table.
For this, the best approach you could get is to perform an Ajax call to get the table rows and modify the table tbody inner HTML.
First, you need to modify the model get_kota() function, to select only the kota on a provinsi, by it's id_provinsi:
function get_kota($id_provinsi) {
$this->db->where('id_provinsi', $id_provinsi);
$query = $this->db->get('table_kota');
return $query->result();
}
After that, create a new function on your controller to return the new values via Ajax. Here I'll include also the modification to the original method to remove the first call for kotas:
public function show() {
$data['provinsi'] = $this->mdl_onchange->get_provinsi();
$this->load->view('form_onchange', $data);
}
public function ajax_getkotas($id_provinsi) {
$kotas = $this->mdl_onchange->get_kota($id_provinsi);
foreach ($kotas as $kota) {
echo '<tr>\n';
echo '<td>' . $kota->id_kota . '</td><td>' . $kota->id_provinsi . '</td><td>' . $kota->nama_kota . '</td>\n';
echo '</tr>\n';
}
}
Now, let's go back to your view. Let's divide it into three parts: the select, the table and the jquery.
You can keep your select as it is right now.
The table will be empty at first, you can maybe have something like this:
<table border="1" name="select_kota" id="select_kota" style="border-
collapse:collapse; width:60%;">
<thead>
<tr style="background:yellow;">
<th>Id kota</th>
<th>Id provinsi</th>
<th>nama kota</th>
</tr>
</thead>
<tbody>
<tr><td>Please, select a provinsi from the above dropdown to display results</td></tr>
</tbody>
</table>
And now let's go for the JQuery Ajax call:
$('#select_provinsi').on('change', function() {
$.ajax({
type: 'GET',
url: "<?php echo site_url('your_controllername/ajax_getkotas') ?>" + "/" + $('#select_provinsi').val() , // we call our new function with the selected id
dataType: "html",
success: function (data) { // change the data from our response
$('#select_kota tbody').html(data); //rows are printed inside the tbody of our table
},
failure: function(err) {console.log("Error on the Ajax call");} // Some error feedback just in case. You can check network XHR to see what's going on.
});
})
With this I think you can get it working. Let me now it that's works for you or we need to change anything.
i am using WordPress platform with PHP AND MYSQL in order to create a website where i have a page that includes 4 dropdown lists that get it data from the MYSQL database and using javascript and AJAX i am trying to make these dropdown list dependent on each other where the user select from teh first one and based on the user's selection the second drop down display data.
the problem is that i have used 2 codes in order to make AJAX work without refreshing the hall page.
when i try to select from the first dropdown list in the debug mode it display:
404 drpdown_fetch_owner.php error page not found
directory structure :
/opt/lampp/htdocs/wordpress/wp-content/themes/wp-portfolio/search_info_location.php
/opt/lampp/htdocs/wordpress/wp-content/themes/wp-portfolio/dropdown_fetch_owner.php
tables:
site_info:
siteID
siteNAME
ownerID
List item
owner_info:
ownerID
ownerNAME
problem :
after the user click on the first droplist
variable ownerID in the AJAX stay empty and do not get any value.
i added var_dump($sql); under the SQL query in the dropdown_fetch_owner.php code
and i got this statement in the debug mode:
/opt/lampp/htdocs/wordpress/wp-content/themes/wp-portfolio/dropdown_fetch_owner.php:6:
array (size=0)
empty
code1 :
<form method ="post" action ="" name="submit_form">
<table border="0" width="30%">
<tr>
<td>Site Name</td>
<td>Owner Name</td>
<td>Company Name</td>
<td>Subcontractor Name</td>
</tr>
<tr>
<td><select id="site_name" name = "site_name">
<?php
$query_site_name =$wpdb->get_results("select DISTINCT siteNAME from site_info");
foreach($query_site_name as $row)
{
// $site_name = (array)$site_name;
echo "<option value = '".$row ->ownerID."'>".$row->siteNAME."</option>";
}
?>
<!--create dropdown list owner names-->
</select></td>
<td><select id="owner_name" name ="owner_name">
<option value="">Select Owner</option>
<!-- the below part of code work as it should --!>
<!--create dropdown list site names-->
<form method ="post" action ="" name="submit_form">
<table border="0" width="30%">
<tr>
<td>Site Name</td>
<td>Owner Name</td>
<td>Company Name</td>
<td>Subcontractor Name</td>
</tr>
<tr>
<td><select id="site_name" name = "site_name">
<?php
$query_site_name =$wpdb->get_results("select DISTINCT siteNAME from site_info");
foreach($query_site_name as $row)
{
// $site_name = (array)$site_name;
echo "<option value = '".$row ->ownerID."'>".$row->siteNAME."</option>";
}
?>
<!--create dropdown list owner names-->
</select></td>
<td><select id="owner_name" name ="owner_name">
<option value="">Select Owner</option>
<script type="text/javascript">
// make Dropdownlist depend on each other
$(document).ready(function(){
$('#site_name').change(function(){
var ownerID = $(this).val();
$.ajax({
url:"dropdown_fetch_owner.php",
method:"POST",
data:{ownerID:ownerID},
datatype:"text",
success:function(data){
$('#owner_name').html(data);
}
});
});
});
</script>
dropdown_fetch_owner.php:
<?php
include_once($_SERVER['DOCUMENT_ROOT'].'/wordpress/wp-load.php');
global $wpdb;
$sql =$wpdb->get_results("select * from owner_info where ownerID = '".$_POST['ownerID']."' ORDER BY ownerNAME");
echo '<option value="">Select Owner</option>';
foreach($sql as $row){
//while ($row = mysqli_fetch_array($result)) {
echo "<option value = '".$row ->ownerID."'>". $row->ownerNAME."</option>";
}
?>
In wordpress, use ajax(https://codex.wordpress.org/AJAX_in_Plugins)
Change
url:"<?php echo get_stylesheet_directory_uri(); ?>/dropdown_fetch_owner.php",
instead of url:"dropdown_fetch_owner.php",
I want to fetch data from a database related to a selected option when it is clicked.
When I select another option then fetch the data for that selection.
When I fetch the new data option the old data is replaced.
I want to display each set of data in a new row so I do not want the new data to replace the old data.
<form action="" method="post">
<div class="form-group">
<label for="sel1">Select list:</label>
<select multiple name="names" class="form-control" id="sel1">
<?php
$result = "SELECT Name FROM coder";
$sql = $conn->query($result);
if ($sql->num_rows > 0)
while($row = $sql->fetch_assoc()) {?>
<option value='<?php echo $row['Name'] ?>'><?php echo $row['Name'] ?></option>
<?php }
?>
</select>
</div>
<input type="submit" name="submit" class="btn btn-info">
</form>
<table>
<thead>
</thead>
<tbody>
<?php
$result = "SELECT * FROM coder WHERE Name='$name'";
$sql = $conn->query($result);
if ($sql->num_rows > 0)
while($row = $sql->fetch_assoc()) {{?>
<tr>
<td><?php echo $row['Name']?></td>
</tr>
<?php
}
}
?>
</tbody>
</table>
I suggest to use jquery for binding the div once the result is placed inside it.
Also Instead of using direcy Query, you also can use onChange event of jQuery for fetching the data according to your need. It will accelerate the speed of fetching of data.
Divide the div into samall child divs and store the data into them.
Your problem will be resolved in this way for sure
I have an html table created dynmically in PHP.The table has checkbox,Name Price and quantity.The quantity is dropdown list.I want to know how to post all these values depending on selected checkbox.Here is small snipet.What I want is the user will select
checkbox and i want to post name,price and selected quantity to another page cart.php.
What i am having working right now is i am only able to post selected checkbox value by doing $_POST["checkboxes"].But i dont know to post value for those selected checkboxes.Please help..I am trying to learn PHP.
<form action="cart.php" name="myform" id="menuform" method="post" >
echo "<label>"."Appetizers"."</label>";
echo "<center>";
echo "<table class='appetizerstable'>";
echo "<thead>";
echo "<tr>";
echo "<th>";
echo "Select";
echo "</th>";
echo "<th>";
echo "Name";
echo "</th>";
echo "<th>";
echo "Price";
echo "</th>";
echo "<th>";
echo "quantity";
echo "</th>";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
while($row = mysqli_fetch_array($appetizers)) {
echo "<tr>";
echo "<td>" ."<input type='checkbox' name ='checkboxes[]' value=".$row['id'].">".
"</td>";
echo "<td>" ."<label name='foodname[]'>". $row['name']."</label>" . "</td>";
echo "<td>" ."<label name='foodprice[]'>". $row['price']."</label>" . "</td>";
echo "<td>"."<select id='quantity[] name='quantity[]'>".
"<option value='1'>1</option>".
"<option value='1'>2</option>".
"</select>".
"</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
echo "<center>";
You won't need to send the name and price values as you can always retrieve those from the database by knowing the id of that item when sending the form data. So we will be focusing on just the quantities and the id of the items checked.
The main problem with what you are trying to do is that the quantity[] form data and the checkboxes[] form data wont have the same amount of items in the array when the form is sent....unless you check off every item. What happens is checkboxes only gets data sent when the box is checked while quantity[] gets data sent when a select option is selected and by default one is always selected. So basically every quantity select data will get sent whether its checked or not. So it will be hard to determine which quantity array items belong to the checkboxes array items. But there is a solution....a complicated one but still a solution with just php.
Here is the new HTML
I cleaned it up a bit for readability
<form action="cart.php" name="myform" id="menuform" method="post" >
<label>Appetizers</label>
<center>
<table class="appetizerstable">
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Price</th>
<th>quantity</th>
</tr>
</thead>
<tbody>
<?php while($row = mysqli_fetch_array($appetizers)) : ?>
<tr>
<td>
<input type="checkbox" name ="checkboxes[]" value="<?php echo $row['id'] ?>">
</td>
<td>
<label><?php echo $row['name']; ?></label>
</td>
<td>
<label><?php echo $row['price']; ?></label>
</td>
<td>
<select id="quantity[]" name="quantity[]">
<option value="<?php echo '1-' . $row['id']; ?>">1</option>
<option value="<?php echo '2-' . $row['id']; ?>">2</option>
</select>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
<center>
</form>
Ok so what changed...well take a look at the new quantity[] values. I have appended a dash followed by the row id. Now each value has a unique value and we have a way to associate the quantity value with the check box value. We will figure this out on the cart.php file next. Here is how to do that:
cart.php
<?php
if(isset($_POST['checkboxes']) && isset($_POST['quantity']) ) {
$checkboxes = $_POST['checkboxes'];
$quantities_unfiltered = $_POST['quantity'];
$quantities = array();
foreach($quantities_unfiltered as $unfiltered) {
$filtered = explode('-', $unfiltered);
// $filtered now equals a 2 item array
// $flitered[0] = the quantity value
// $filtered[1] = the id
// create an associative array for easy access to the quantity by using the id as the array key
$quantities[ $filtered[1] ] = $filtered[0];
}
// now we can figure out the quantity values for each checkbox checked
// test it out by echoing the values
foreach($checkboxes as $id) {
echo 'Item with id of ' . $id . ' was selected with a quantity of ' . $quantities[$id] . '<br>';
}
}
?>
Hope that helps you out a bit.
UPDATE
I added an if statement in the cart.php example and removed the foodprice[] and foodname[] from the name attributes as they don't send as POST data anyways as the html is not a form element. I got a little picky about that.
you can use the jquery to submit form when change on dropdown value
<select name="" id="" onchange="this.form.submit()">
..........
.........
</select>