I am trying to pass the value of a dynamically created JavaScript form (or pretty much just one select/option field of it) to another php file.
Here's the whole code of my request.php (which happens to use php, JavaScript and HTML):
<?php
include ("DbVerbindung.php");
?>
<!-- Verbindung zur Datenbank aufbauen -->
<?php
include "header.php";
?>
<!-- Kopfteil des Webfrontends holen -->
<!-- Hauptinhaltbereich -->
<div class="float">
<script>
<!-- dynamische Abfrage für Optionsfeld -->
function showUser(str) {
if (str=="") {
document.getElementById("gang").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("gang").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getStudiengang.php?q="+str,true);
xmlhttp.send();
}
</script>
<h2>Daten des Wählers auswählen</h2>
<table id="auswahl">
<!-- Optionen zur Abfrage der Wählerdaten -->
<form action="speichern.php" method="POST">
<tr>
<td>Fachbereich:</td>
<td id="fachbereich">
<select size="1" maxlength="20" name="fachbereich" onChange="showUser(this.value)">
<option>Fachbereich auswählen</option>
<?php $sql = "SELECT * FROM bereich";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo '<option value="' . $row[0] . '">' . $row[1] . '</option>';
}
?>
</select>
</tr>
<tr>
<td>Studiengang:</td>
<td id="gang"></td>
</tr>
<tr>
<td>Geschlecht:</td>
<td id="geschlecht">
<select size="1" maxlength="20" name="geschlecht">
<?php $sql = "SELECT * FROM geschlecht";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo '<option value="' . $row[0] . '">' . $row[1] . '</option>';
}
?>
</select></td>
</tr>
<tr>
<td>Name:</td>
<td id="name"><select size="1" maxlength="30" name="name" onClick="getName.p"</td>
</tr>
<tr>
<td>Wahllokal:</td>
<td id="lokal">
<select size="1" maxlength="50" name="lokal">
<?php $sql = "SELECT * FROM lokal";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo '<option value="' . $row[0] . '">' . $row[1] . '</option>';
}
?>
</select></td>
</tr>
<tr>
<td id="submit">
<input type="submit" name="waehlt" value="Wähler wählt..!">
</td>
</tr>
</form>
</table>
</div>
<?php
include "footer.php";
?>
The JS script uses yet another php file -> getStudiengang.php. Here's its code:
<?php
$q = intval($_GET['q']);
include ("DbVerbindung.php");
$sql = "SELECT * FROM studiengang WHERE fs_b = '" . $q . "'";
$result = mysql_query($sql);
echo "<select size='1' name='studiengang'>";
while ($row = mysql_fetch_array($result)) {
echo '<option value="' . $row[0] . '">' . $row[1] . '</option>';
}
echo "</select">;
?>
And last but not least, the php the values should get passed to (speichern.php):
if ($_POST[waehlt]) {
$uhrzeit = date('G:i:s');
echo "Wähler tritt seine Wahl an. Uhrzeit: $uhrzeit<br>";
echo "Übergebene Daten:<br>";
echo "Fachbereich: ";
$sql = "SELECT * FROM bereich where b_id = '" . $_POST[fachbereich] . "'";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo "$row[1]<br>";
}
echo "Studiengang: ";
echo $_POST['studiengang'];
/*$sql = "SELECT * FROM studiengang where s_id = '" . $_POST[studiengang] . "'";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo "$row[1]<br>";
}
*/
echo "Geschlecht: ";
$sql = "SELECT * FROM geschlecht where g_id = '" . $_POST[geschlecht] . "'";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo "$row[1]<br>";
}
echo "Wahllokal: ";
$sql = "SELECT * FROM lokal where l_id = '" . $_POST[lokal] . "'";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo "$row[1]<br>";
}
}
Note that all variables except the 'studiengang' variable (which happens to be dynamically generated) gets passed and displayed just fine.
Any help will be appreciated!
You will need to use .appendChild so the browser understands that the item is added to the form. To make the fewest modifications to your code that should still work,
replace document.getElementById("gang").innerHTML=xmlhttp.responseText; with:
var gang = document.getElementById("gang");
while (gang.firstChild) {
gang.removeChild(gang.firstChild); //clear all elements
}
var div = document.createElement('div');
/*make a div to attach the response text to
if you didn't send the select in the responseText, you could createElement('select')*/
div.innerHTML = xmlhttp.responseText;
gang.appendChild(div); //attach the select
We finally resolved the issue.
For whatever reason it was necessary to 'hardcode' the select-box in HTML already and have it not created dynamically by Javascript.
Javascript now does only dynamically generate the option-fields within the section, this does in fact solve the issue.
Latest version with changes already applied:
JavaScript in request.php:
<script>
function showUser(str) {
if (str=="") {
document.getElementById("gang").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("gang").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getStudiengang.php?q="+str,true);
xmlhttp.send();
}
</script>
Request.php (important piece of code):
<form action="save.php" method="POST">
<tr>
<td>Studiengang:</td>
<td>
<select id="gang" size="1" name="studiengang"></select>
</td>
</tr>
</form>
getStudiengang.php:
<?php
$q = intval($_GET['q']);
include ("DbVerbindung.php");
$sql = "SELECT * FROM studiengang WHERE fs_b = '" . $q . "'";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo '<option value="' . $row[0] . '">' . $row[1] . '</option>';
}
?>
Thanks for all the help. The answer given by serakfalcon has a good point and may be useful later on. It's not an requirement though.
Related
I want to use the select option to update the table. these are the code and when I try it, no data have been display to table..im using js but still nothing happens..it only display the fields but no data in it. help me pls.
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">150-2012-00007</option>
<option value="2">120-2013-001</option>
<option value="3">130-2012-0022</option>
<option value="4">130-2012-0554</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
this is the code for the getuser.php
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_GET['q']);
$db_host = 'localhost'; // Server Name
$db_user = 'root'; // Username
$db_pass = ''; // Password
$db_name = 'ofes'; // Database Name
$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn)
{
die ('Failed to connect to MySQL: ' . mysqli_connect_error());
}else{
echo "";
}
$sql="SELECT * FROM tbl_student WHERE Id_number = '".$q."'";
$result = mysqli_query($conn,$sql);
echo "<table>
<tr>
<th>Name</th>
<th>Id number</th>
<th>Passwordr</th>
<th>Course</th>
<th>School Year</th>
<th>Semester</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['name'] . "</td>";
echo "<td>" . $row['Id_number'] . "</td>";
echo "<td>" . $row['password'] . "</td>";
echo "<td>" . $row['course'] . "</td>";
echo "<td>" . $row['school_year'] . "</td>";
echo "<td>" . $row['semester'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($conn);
?>
</body>
</html>
basically when I choose from the select option the table will be updated automatically.
I have an SQL-database with many tables. Now I would like to create an input-form to be able to get data into the db without writing the entire sql-code every time. And this should work as follows:
All table names are listed in a drop-down menu. After having selected a table name, a new table with 4 columns is created automatically:
The first column of this table simply contains an increasing number.
The second column contains the field-names of the selected table.
In the third column there are empty input fields to enter the values for the database. Only in the third line (=product name) there is a drop-down menu with all product names from the main-table of the db.
The fourth column contains the data type (e.g. int or varchar)
All tables in the database have the same structure in the first 3 columns: the first column contains the table-id, the second column the foreign-key (=master_id) and the third column the product_name.
Up to this point, the script works well with the following 2 php-files (javasql.php and getuser.php):
javasql.php:
enter code here
<!DOCTYPE html>
<html>
<head>
<script>
function showUser(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (this.readyState==4 && this.status==200) {
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="" class="optdrugs">please select</option>
<?php
include("files/zugriff.inc.php"); // database Access
$sql = "SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE
TABLE_TYPE = 'BASE TABLE' AND TABLE_SCHEMA = 'product'";
$result = mysqli_query($db, $sql);
while ($row = mysqli_fetch_assoc($result)) {
echo '<option class="optdrugs" value="'. $row['TABLE_NAME'] . '">' .
$row['TABLE_NAME']. '</option>';
echo '<br>';
}
?>
</select>
</form>
<br>
<div id="txtHint"><b>Bitte Tabelle auswählen:</b>
<br>
<?php
if (isset($_POST["submit"])) {
$sent = $_POST['sent'];
$q = $_POST['tablename'];
$column_passed = unserialize($_POST['column']); // content of array
$column is passed from getuser.php
foreach ($_POST["insertvalue"] as $key => $value) {
echo $value . "<br>";
$werte[] = "'$value'";
}
$sql="INSERT INTO $q ($column_passed) VALUES (" .
implode(", ", $werte) . ")"; // data entry
mysqli_query($db, $sql);
if (mysqli_affected_rows($db) > 0) {
echo "<h3 style='color:blue'>successful</h3>";
} else {
echo "<h3 style='color:red'>not
successful</h3>";
}
}
?>
</div>
</body>
</html>
enter code here
getuser.php:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<form id="formdatabase" name="formdatabase" action="javasql.php"
method="post">
<input type="hidden" name="sent" value="yes">
<?php
$q = strval($_GET['q']);
$con = mysqli_connect('localhost','root','','product');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM $q";
$result = mysqli_query($con,$sql);
$numcols = mysqli_num_fields($result); // gets number of columns in result table
$field = mysqli_fetch_fields($result); // gets the column names from the result table
$data_type_array = array(
1=>'tinyint',
2=>'smallint',
3=>'int',
4=>'float',
5=>'double',
7=>'timestamp',
8=>'bigint',
9=>'mediumint',
10=>'date',
11=>'time',
12=>'datetime',
13=>'year',
16=>'bit',
252=>'text',
253=>'varchar',
254=>'char',
246=>'decimal'
);
$data_type_array = array_flip($data_type_array);
echo "<table>";
echo "<tr>";
echo "<th>" . 'Nr' . "</th><th>" . 'Column names' . "</th>
<th>" . 'Values for db-entry' . "</th><th>" . 'Type' . "</th>";
echo "</tr>";
echo "<tr>";
$nr = 1;
for($x=0;$x<$numcols;$x++):?>
<td><?= $nr; ?></td>
<td><?= $field[$x]->name; ?></td>
<?= $column[] = $field[$x]->name; ?>
<td>
<?php
if ($field[$x]->name == 'Name') { // if-Beginn
?>
<select name="insertvalue[<?= $x; ?>]" id="insertvalue<?=
$x; ?>" size="1" onchange = "javascript:getSelectedRow()">
<?php
include("files/zugriff.inc.php");
$sql = "SELECT * FROM product_main ORDER BY Name";
$result = mysqli_query($db, $sql);
while ($row = mysqli_fetch_assoc($result)) {
echo '<option class="optdrugs" value='. $row['Name'] . '>' .
$row['Name'] . '</option>';
echo '<br>';
}
?>
</select>
<?php
$name_option = "";
} else {
$name_option = "<input type='text' id='insertvalue" . $x . "'
name='insertvalue[" . $x . "]' size='50'>";
echo $name_option;
}
?>
</td>
<?php
$key = array_search($field[$x]->type, $data_type_array);
if($key !== false){
echo "<td>" . $key . "</td>";
}else{
echo "<td>" . $field[$x]->type . "</td>";
}
?>
<td><?= $field[$x]->type; ?></td>
<?= $nr = $nr + 1; ?>
</tr>
<?php endfor;
echo "</table>";
mysqli_close($con);
?>
<input type="hidden" name="tablename" value="<?= $q; ?>">
<input type="hidden" name="column" value="<?php echo htmlentities
(serialize($column)); ?>">
<input type="submit" value="Enter values" name="submit">
</form>
</body>
</html>
Since I need the master_id (= foreign key) in addition to the product-name for database entry, I would like to extend my script, so that the respective master_id is automatically sent to the input field in line 2, when a product-name is selected in line 3 ... without clicking a button. I tried to do this with javascript but it didn´t work. As far as I know, the solution would be to use AJAX but unfortunately, I am not very used to AJAX.
I would be more than happy, if someone could help me to solve this problem!
Using ajax I insert table rows in a dropdown menu. It works and displays it. I'd like to attach events for when the rows are clicked, however, what I've tried doesn't work. What could be the problem?
PHP
<?php
for($i=1; $i<=2; $i++){
echo "<div class='medium-block dropdown'>
<div class='dropdown-toggle stat-dropdown not-added' id='away" . $i . "' data-toggle='dropdown'>
<p class='vertical-center add-player' id='add-player" . $i . "' style='margin:0;'>Add Player</p>
</div>
<ul class='dropdown-menu drop-scroll' style='margin:0; padding:0; border-radius:0;'>
<table class='table table-hover' style='margin:0;'>
<tbody id='choose-player-away" . $i . "'>
</tbody>
</table>
</ul>
</div>";
}
for($i=3; $i<=5; $i++){
echo "<div class='medium-block dropup'>
<div class='dropdown-toggle stat-dropdown not-added' id='away" . $i . "' data-toggle='dropdown'>
<p class='vertical-center add-player' id='add-player" . $i . "' style='margin:0;'>Add Player</p>
</div>
<ul class='dropdown-menu drop-scroll' style='margin:0; padding:0; border-radius:0;'>
<table class='table table-hover' style='margin:0;'>
<tbody id='choose-player-away" . $i . "'>
</tbody>
</table>
</ul>
</div>";
}?>
JQuery
<script type="text/javascript">
$(document).ready(function(){
scalability();
$(window).resize(scalability);
$(".not-added").each(function(i){
$(this).click(function(){
var identifier = $(this).attr('id').charAt(4);
var teamid = $(this).attr('id').substring(0,4);
if($(this).hasClass("not-added")){
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("choose-player-"+teamid+identifier).innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","getPlayerlist.php?team="+teamid+"&id="+identifier,true);
xmlhttp.send();
$(".player").on('click',function(){
alert("working");
});
}
});
});
});
</script>
PHP file that is fetched by AJAX
<?php
$team = $_GET["team"];
$id = $_GET["id"];
$con = mysqli_connect('localhost','root','','sportacus');
$query = "SELECT * FROM " . $team . "_team WHERE incourt = 0 ORDER BY number";
$result = mysqli_query($con,$query);
while($row = mysqli_fetch_assoc($result)){
echo "<tr class='player' id='" . $team . "-player" . $row['id'] . "'>
<td>" . $row['number'] . "</td>
<td>" . $row['first_name'] . " " . $row['last_name'] . "</td>
</tr>";
}
mysqli_close($con);
?>
I want the rows with class .player, which are created by the AJAX fetched php file, to be clickable.
NOTE: I am using bootstrap library if that helps. Everything else works, except for the part:
$(".player").on('click',function(){
alert("working");
});
Like reported in event binding on dynamically created elements you need to delegate the event.
In your case, you need to change from:
$(".player").on('click',function(){
to:
$(document).on('click', ".player", function () {
alert("working");
});
im having a problem with this code , the select statement returns value only when the parameter is integer ... look at the code ..my problem is when the value of the dropdown ( select ) is an integer , the select statement works fine , otherwise it returns nothing .
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
<body>
<form>
<select name="users" onchange="showUser(users.value)">
<option value="">choose a subject</option>
<option value="223">English</option>
<option value="2">ar</option>
<option value="161">علوم عامة</option>
<option value="ar">عربي</option>
</select>
<br>
<div id="txtHint"><b>Course info will be listed here.</b></div>
</p>
<p> </p>
<div class="clear"></div></div></div>
<div class="clear"></div>
</div>
</div>
</form>
</body>
//---------------and the getuser.php is
<?php
require_once("_gradeviewr.php");
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','root','','evang_www');
if (!$con)
{
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"evang_www");
$sql="SELECT * FROM uploaded WHERE subject = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table border='1'>
<tr>
<th>subject</th>
<th>Date from</th>
<th>Date To</th>
<th>filename</th>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['subject'] . "</td>";
echo "<td>" . $row['datefrom'] . "</td>";
echo "<td>" . $row['dateto'] . "</td>";
echo "<td>" . $row['filename'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
Try this
HTML
<select name="users" id="urselectboxId">
Script
$('#urselectboxId').on('change',function(){
var str=$(this).val();
if (str=="")
{
$("txtHint").text("");
return;
}
else
{
$.ajax({
url:"getuser.php",
type:"get",
dataType:'json',
data: {q:str},
success:function(data){
// codes....
}
});
}
});
I'm stuck with trying to process multiple mySQL updates at the same time. I have 4 select/optiion boxes that pull entries from a db table. I want to be able to update the db onChange using JQuery. I have managed to get this working with one select module but as soon as I add more it spins out. I know that the main bad code is in db_submit.php but really not sure how else to write it. I know there has to be a cleaner way to do this.
FORM PAGE- INPUT.PHP
<html>
<head>
<script src="../assets/scripts/jquery-2.0.3.min.js"></script>
<script>
function updateDb() {
$.post("db_submit.php", $("#console").serialize());
}
</script>
<?php
include 'db_connect.php';
?>
</head>
<body>
<form id="console">
<select id="frame1" name="frame1" onChange="updateDb()">
<option value="">Select Channel</option>
<?php
$result = mysqli_query($con,"SELECT * FROM feedContent");
while ($row = mysqli_fetch_array($result)) {
echo "<option value='" . $row['url'] . "'>" . $row['name'] . "</option>";
}
?>
</select>
<select id="frame2" name="frame2" onChange="updateDb()">
<option value="">Select Channel</option>
<?php
$result = mysqli_query($con,"SELECT * FROM feedContent");
while ($row = mysqli_fetch_array($result)) {
echo "<option value='" . $row['url'] . "'>" . $row['name'] . "</option>";
}
?>
</select>
<select id="frame3" name="frame3" onChange="updateDb()">
<option value="">Select Channel</option>
<?php
$result = mysqli_query($con,"SELECT * FROM feedContent");
while ($row = mysqli_fetch_array($result)) {
echo "<option value='" . $row['url'] . "'>" . $row['name'] . "</option>";
}
?>
</select>
<select id="frame4" name="frame4" onChange="updateDb()">
<option value="">Select Channel</option>
<?php
$result = mysqli_query($con,"SELECT * FROM feedContent");
while ($row = mysqli_fetch_array($result)) {
echo "<option value='" . $row['url'] . "'>" . $row['name'] . "</option>";
}
?>
</select>
</form>
</body>
<?php
mysqli_close($con);
?>
</html>
PROCESSING PAGE- DB_SUBMIT.PHP
<?php
include 'db_connect.php';
$frame1= mysqli_escape_String($con,$_POST['frame1']);
$frame2= mysqli_escape_String($con,$_POST['frame2']);
$frame3= mysqli_escape_String($con,$_POST['frame3']);
$frame4= mysqli_escape_String($con,$_POST['frame4']);
$query = "UPDATE frameContent SET url='".$frame1."' WHERE name='frame1'";
$query = "UPDATE frameContent SET url='".$frame2."' WHERE name='frame2'";
$query = "UPDATE frameContent SET url='".$frame3."' WHERE name='frame3'";
$query = "UPDATE frameContent SET url='".$frame4."' WHERE name='frame4'";
mysqli_query($con,$query);
mysqli_close($con);
?>
I know that constantly setting the $query variable is causing problems but I'm not sure how else I can do this in the one page. Any help would be much appreciated.
Thanks!
First of all make sure the $queries are concatenated, then terminate each query with a semi-colon. After these you can use mysqli_multi_query to execute all four updates in one call from php.
$query = "UPDATE frameContent SET url='".$frame1."' WHERE name='frame1';";
$query .= "UPDATE frameContent SET url='".$frame2."' WHERE name='frame2';";
$query .= "UPDATE frameContent SET url='".$frame3."' WHERE name='frame3';";
$query .= "UPDATE frameContent SET url='".$frame4."' WHERE name='frame4';";
mysqli_multi_query($con,$query);
I think this might help :) but there's just a little changes within your codes:
<html>
<head>
<script src = "js/jquery-1.10.1.js"></script>
<script>
function updateDb()
{
// this var id will store all your 4 combobox values in an array
var id = [{val1: $("#frame1").val()},
{val1: $("#frame2").val()},
{val1: $("#frame3").val()},
{val1: $("#frame4").val()}];
//this .post will submit all data to db_submit.php
$.post("db_submit.php",{id:id}, function(data)
{
alert(data);
});
</script>
<?php
include 'db_connect.php';
?>
</head>
<body>
<select id="frame1" name="frame1">
<option value="">Select Channel</option>
<?php
$result = mysqli_query($con,"SELECT * FROM feedContent");
while ($row = mysqli_fetch_array($result)) {
echo "<option value='" . $row['url'] . "'>" . $row['name'] . "</option>";
}
?>
</select>
<select id="frame2" name="frame2">
<option value="">Select Channel</option>
<?php
$result = mysqli_query($con,"SELECT * FROM feedContent");
while ($row = mysqli_fetch_array($result)) {
echo "<option value='" . $row['url'] . "'>" . $row['name'] . "</option>";
}
?>
</select>
<select id="frame3" name="frame3">
<option value="">Select Channel</option>
<?php
$result = mysqli_query($con,"SELECT * FROM feedContent");
while ($row = mysqli_fetch_array($result)) {
echo "<option value='" . $row['url'] . "'>" . $row['name'] . "</option>";
}
?>
</select>
<select id="frame4" name="frame4">
<option value="">Select Channel</option>
<?php
$result = mysqli_query($con,"SELECT * FROM feedContent");
while ($row = mysqli_fetch_array($result)) {
echo "<option value='" . $row['url'] . "'>" . $row['name'] . "</option>";
}
?>
</select>
<input type="button" value="Submit" onClick="updateDb()"/>
</body>
<?php
mysqli_close($con);
?>
</html>
And in your DB_SUBMIT.PHP
<?php
include 'db_connect.php';
$frame1= mysqli_escape_String($_POST['id'][0]['val1']);
$frame2= mysqli_escape_String($_POST['id'][1]['val1']);
$frame3= mysqli_escape_String($_POST['id'][2]['val1']);
$frame4= mysqli_escape_String($_POST['id'][3]['val1']);
$query = mysqli_query("UPDATE frameContent SET url='$frame1' WHERE name='frame1'");
$query = mysqli_query("UPDATE frameContent SET url='$frame2' WHERE name='frame2'");
$query = mysqli_query("UPDATE frameContent SET url='$frame3' WHERE name='frame3'");
$query = mysqli_query("UPDATE frameContent SET url='$frame4' WHERE name='frame4'");
echo "Data was Successfully updated";
mysqli_close($con);
?>
I just add a button there for convenience, but if you dont want it just delete it and put back the onChange on every combocboxes that you have :)