How to get dropdown list array values from innerHTML and save to database
-3
How can I get the values and save into the database my dependent dropdown list array which is to be displayed using innerHTML? The database is only saving the last chosen values and not all the selected values. I know that my problem would be printing the last values directly into the table cell that is why Im not getting all the chosen values. How can I save all the values of these multiple dropdown list that are chosen by the user after being displayed into my table?
window.onload = function()
var ModelArray =
"Mammals":
"Dog":
"Dog Food": ["Milk"]
,
"Cat":
"Cat food": ["Milk"]
,
"Tiger":
"Meat": ["Water"]
,
"Monkey":
"Banana": ["Water"]
,
"Reptiles":
"Snake":
"Rat": ["None"]
,
"Turtle":
"Plant": ["Water"]
,
"Lizard":
"Insects": ["None"]
,
"Crocodile":
"Meat": ["Water"]
//Get html elements
var model = document.getElementById("MODEL");
var destination = document.getElementById("destination");
var criteria = document.getElementById("criteria");
var material_form = document.getElementById("material_form");
//load models
for (var model_value in ModelArray)
model.options[model.options.length] = new Option(model_value, model_value);
//model changed -> destination value
model.onchange = function()
destination.length = 1;
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
destination.options[0].text = "Select Animal..."
for (var destination_value in ModelArray[this.value])
destination.options[destination.options.length] = new Option(destination_value, destination_value);
if (destination.options.length == 2)
destination.selectedIndex = 1;
destination.onchange();
//destination changed -> criteria value
model.onchange();
destination.onchange = function()
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
criteria.options[0].text = ""
for (var criteria_value in ModelArray[model.value][this.value])
criteria.options[criteria.options.length] = new Option(criteria_value, criteria_value);
if (criteria.options.length == 2)
criteria.selectedIndex = 1;
criteria.onchange();
//criteria changed -> material form value
criteria.onchange = function()
material_form.length = 1;
if (this.selectedIndex < 1)
material_form.options[0].text = ""
return;
material_form.options[0].text = ""
var material_form_value = ModelArray[model.value][destination.value][this.value];
for (var i = 0; i < material_form_value.length; i++)
material_form.options[material_form.options.length] = new Option(material_form_value[i], material_form_value[i]);
if (material_form.options.length == 2)
material_form.selectedIndex = 1;
// material_form.onchange();
function addRow()
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = destination.value;
row.insertCell(1).innerHTML = criteria.value;
row.insertCell(2).innerHTML = material_form.value;
row.insertCell(3).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)">';
function deleteRow(obj)
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
<td><b>MODEL: </b></td>
<td>
<select id="MODEL" NAME="MODEL" size="1" required>
<option value="" selected="selected">Select Model...</option>
</select>
</td>
<b>DESTINATION: </b></td>
<tr>
<td>
<select ID="destination" NAME="destination" required>
<option value="" selected="selected">Select Model First...</option>
</select>
<select ID="criteria" NAME="criteria" contenteditable="true" style="display: none" required>
</select>
<select id="material_form" name="material_form" style="display: none" required>
</select>
<input type="button" id="add" value="Add Destination" onclick="Javascript:addRow()">
</td>
</tr>
<div id="mydata" style="text-align: center">
<table id="myTableData">
<tr>
<td style="text-align:center;"><b>DESTINATION</b></td>
<td style="text-align:center;"><b>CRITERIA</b></td>
<td style="text-align:center;"><b>MATERIAL FORM</b></td>
</tr>
<!----
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$db = 'mydatabase';
$dbconn = mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db($db);
$dynamic_textbox_count = count($_POST["destination"]);
$dynamic_textbox_value=0;
$query = "INSERT INTO dynamic_values (destination, criteria, material_form) VALUES ";
$queryValue = "";
for($i=0;$i<$dynamic_textbox_count;$i++)
$sql = $query.$queryValue;
if($dynamic_textbox_value!=0)
$result = mysql_query($sql);
if(!empty($result)) $message = "Added Successfully.";
mysql_close();
?>
-->javascript php jquery html mysql
asked Nov 13 '18 at 5:41
user011717user011717
37
add a comment |
-3
How can I get the values and save into the database my dependent dropdown list array which is to be displayed using innerHTML? The database is only saving the last chosen values and not all the selected values. I know that my problem would be printing the last values directly into the table cell that is why Im not getting all the chosen values. How can I save all the values of these multiple dropdown list that are chosen by the user after being displayed into my table?
window.onload = function()
var ModelArray =
"Mammals":
"Dog":
"Dog Food": ["Milk"]
,
"Cat":
"Cat food": ["Milk"]
,
"Tiger":
"Meat": ["Water"]
,
"Monkey":
"Banana": ["Water"]
,
"Reptiles":
"Snake":
"Rat": ["None"]
,
"Turtle":
"Plant": ["Water"]
,
"Lizard":
"Insects": ["None"]
,
"Crocodile":
"Meat": ["Water"]
//Get html elements
var model = document.getElementById("MODEL");
var destination = document.getElementById("destination");
var criteria = document.getElementById("criteria");
var material_form = document.getElementById("material_form");
//load models
for (var model_value in ModelArray)
model.options[model.options.length] = new Option(model_value, model_value);
//model changed -> destination value
model.onchange = function()
destination.length = 1;
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
destination.options[0].text = "Select Animal..."
for (var destination_value in ModelArray[this.value])
destination.options[destination.options.length] = new Option(destination_value, destination_value);
if (destination.options.length == 2)
destination.selectedIndex = 1;
destination.onchange();
//destination changed -> criteria value
model.onchange();
destination.onchange = function()
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
criteria.options[0].text = ""
for (var criteria_value in ModelArray[model.value][this.value])
criteria.options[criteria.options.length] = new Option(criteria_value, criteria_value);
if (criteria.options.length == 2)
criteria.selectedIndex = 1;
criteria.onchange();
//criteria changed -> material form value
criteria.onchange = function()
material_form.length = 1;
if (this.selectedIndex < 1)
material_form.options[0].text = ""
return;
material_form.options[0].text = ""
var material_form_value = ModelArray[model.value][destination.value][this.value];
for (var i = 0; i < material_form_value.length; i++)
material_form.options[material_form.options.length] = new Option(material_form_value[i], material_form_value[i]);
if (material_form.options.length == 2)
material_form.selectedIndex = 1;
// material_form.onchange();
function addRow()
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = destination.value;
row.insertCell(1).innerHTML = criteria.value;
row.insertCell(2).innerHTML = material_form.value;
row.insertCell(3).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)">';
function deleteRow(obj)
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
<td><b>MODEL: </b></td>
<td>
<select id="MODEL" NAME="MODEL" size="1" required>
<option value="" selected="selected">Select Model...</option>
</select>
</td>
<b>DESTINATION: </b></td>
<tr>
<td>
<select ID="destination" NAME="destination" required>
<option value="" selected="selected">Select Model First...</option>
</select>
<select ID="criteria" NAME="criteria" contenteditable="true" style="display: none" required>
</select>
<select id="material_form" name="material_form" style="display: none" required>
</select>
<input type="button" id="add" value="Add Destination" onclick="Javascript:addRow()">
</td>
</tr>
<div id="mydata" style="text-align: center">
<table id="myTableData">
<tr>
<td style="text-align:center;"><b>DESTINATION</b></td>
<td style="text-align:center;"><b>CRITERIA</b></td>
<td style="text-align:center;"><b>MATERIAL FORM</b></td>
</tr>
<!----
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$db = 'mydatabase';
$dbconn = mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db($db);
$dynamic_textbox_count = count($_POST["destination"]);
$dynamic_textbox_value=0;
$query = "INSERT INTO dynamic_values (destination, criteria, material_form) VALUES ";
$queryValue = "";
for($i=0;$i<$dynamic_textbox_count;$i++)
$sql = $query.$queryValue;
if($dynamic_textbox_value!=0)
$result = mysql_query($sql);
if(!empty($result)) $message = "Added Successfully.";
mysql_close();
?>
-->javascript php jquery html mysql
asked Nov 13 '18 at 5:41
user011717user011717
37
add a comment |
-3
-3
-3
How can I get the values and save into the database my dependent dropdown list array which is to be displayed using innerHTML? The database is only saving the last chosen values and not all the selected values. I know that my problem would be printing the last values directly into the table cell that is why Im not getting all the chosen values. How can I save all the values of these multiple dropdown list that are chosen by the user after being displayed into my table?
window.onload = function()
var ModelArray =
"Mammals":
"Dog":
"Dog Food": ["Milk"]
,
"Cat":
"Cat food": ["Milk"]
,
"Tiger":
"Meat": ["Water"]
,
"Monkey":
"Banana": ["Water"]
,
"Reptiles":
"Snake":
"Rat": ["None"]
,
"Turtle":
"Plant": ["Water"]
,
"Lizard":
"Insects": ["None"]
,
"Crocodile":
"Meat": ["Water"]
//Get html elements
var model = document.getElementById("MODEL");
var destination = document.getElementById("destination");
var criteria = document.getElementById("criteria");
var material_form = document.getElementById("material_form");
//load models
for (var model_value in ModelArray)
model.options[model.options.length] = new Option(model_value, model_value);
//model changed -> destination value
model.onchange = function()
destination.length = 1;
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
destination.options[0].text = "Select Animal..."
for (var destination_value in ModelArray[this.value])
destination.options[destination.options.length] = new Option(destination_value, destination_value);
if (destination.options.length == 2)
destination.selectedIndex = 1;
destination.onchange();
//destination changed -> criteria value
model.onchange();
destination.onchange = function()
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
criteria.options[0].text = ""
for (var criteria_value in ModelArray[model.value][this.value])
criteria.options[criteria.options.length] = new Option(criteria_value, criteria_value);
if (criteria.options.length == 2)
criteria.selectedIndex = 1;
criteria.onchange();
//criteria changed -> material form value
criteria.onchange = function()
material_form.length = 1;
if (this.selectedIndex < 1)
material_form.options[0].text = ""
return;
material_form.options[0].text = ""
var material_form_value = ModelArray[model.value][destination.value][this.value];
for (var i = 0; i < material_form_value.length; i++)
material_form.options[material_form.options.length] = new Option(material_form_value[i], material_form_value[i]);
if (material_form.options.length == 2)
material_form.selectedIndex = 1;
// material_form.onchange();
function addRow()
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = destination.value;
row.insertCell(1).innerHTML = criteria.value;
row.insertCell(2).innerHTML = material_form.value;
row.insertCell(3).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)">';
function deleteRow(obj)
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
<td><b>MODEL: </b></td>
<td>
<select id="MODEL" NAME="MODEL" size="1" required>
<option value="" selected="selected">Select Model...</option>
</select>
</td>
<b>DESTINATION: </b></td>
<tr>
<td>
<select ID="destination" NAME="destination" required>
<option value="" selected="selected">Select Model First...</option>
</select>
<select ID="criteria" NAME="criteria" contenteditable="true" style="display: none" required>
</select>
<select id="material_form" name="material_form" style="display: none" required>
</select>
<input type="button" id="add" value="Add Destination" onclick="Javascript:addRow()">
</td>
</tr>
<div id="mydata" style="text-align: center">
<table id="myTableData">
<tr>
<td style="text-align:center;"><b>DESTINATION</b></td>
<td style="text-align:center;"><b>CRITERIA</b></td>
<td style="text-align:center;"><b>MATERIAL FORM</b></td>
</tr>
<!----
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$db = 'mydatabase';
$dbconn = mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db($db);
$dynamic_textbox_count = count($_POST["destination"]);
$dynamic_textbox_value=0;
$query = "INSERT INTO dynamic_values (destination, criteria, material_form) VALUES ";
$queryValue = "";
for($i=0;$i<$dynamic_textbox_count;$i++)
$sql = $query.$queryValue;
if($dynamic_textbox_value!=0)
$result = mysql_query($sql);
if(!empty($result)) $message = "Added Successfully.";
mysql_close();
?>
-->javascript php jquery html mysql
asked Nov 13 '18 at 5:41
user011717user011717
37
How can I get the values and save into the database my dependent dropdown list array which is to be displayed using innerHTML? The database is only saving the last chosen values and not all the selected values. I know that my problem would be printing the last values directly into the table cell that is why Im not getting all the chosen values. How can I save all the values of these multiple dropdown list that are chosen by the user after being displayed into my table?
window.onload = function()
var ModelArray =
"Mammals":
"Dog":
"Dog Food": ["Milk"]
,
"Cat":
"Cat food": ["Milk"]
,
"Tiger":
"Meat": ["Water"]
,
"Monkey":
"Banana": ["Water"]
,
"Reptiles":
"Snake":
"Rat": ["None"]
,
"Turtle":
"Plant": ["Water"]
,
"Lizard":
"Insects": ["None"]
,
"Crocodile":
"Meat": ["Water"]
//Get html elements
var model = document.getElementById("MODEL");
var destination = document.getElementById("destination");
var criteria = document.getElementById("criteria");
var material_form = document.getElementById("material_form");
//load models
for (var model_value in ModelArray)
model.options[model.options.length] = new Option(model_value, model_value);
//model changed -> destination value
model.onchange = function()
destination.length = 1;
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
destination.options[0].text = "Select Animal..."
for (var destination_value in ModelArray[this.value])
destination.options[destination.options.length] = new Option(destination_value, destination_value);
if (destination.options.length == 2)
destination.selectedIndex = 1;
destination.onchange();
//destination changed -> criteria value
model.onchange();
destination.onchange = function()
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
criteria.options[0].text = ""
for (var criteria_value in ModelArray[model.value][this.value])
criteria.options[criteria.options.length] = new Option(criteria_value, criteria_value);
if (criteria.options.length == 2)
criteria.selectedIndex = 1;
criteria.onchange();
//criteria changed -> material form value
criteria.onchange = function()
material_form.length = 1;
if (this.selectedIndex < 1)
material_form.options[0].text = ""
return;
material_form.options[0].text = ""
var material_form_value = ModelArray[model.value][destination.value][this.value];
for (var i = 0; i < material_form_value.length; i++)
material_form.options[material_form.options.length] = new Option(material_form_value[i], material_form_value[i]);
if (material_form.options.length == 2)
material_form.selectedIndex = 1;
// material_form.onchange();
function addRow()
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = destination.value;
row.insertCell(1).innerHTML = criteria.value;
row.insertCell(2).innerHTML = material_form.value;
row.insertCell(3).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)">';
function deleteRow(obj)
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
<td><b>MODEL: </b></td>
<td>
<select id="MODEL" NAME="MODEL" size="1" required>
<option value="" selected="selected">Select Model...</option>
</select>
</td>
<b>DESTINATION: </b></td>
<tr>
<td>
<select ID="destination" NAME="destination" required>
<option value="" selected="selected">Select Model First...</option>
</select>
<select ID="criteria" NAME="criteria" contenteditable="true" style="display: none" required>
</select>
<select id="material_form" name="material_form" style="display: none" required>
</select>
<input type="button" id="add" value="Add Destination" onclick="Javascript:addRow()">
</td>
</tr>
<div id="mydata" style="text-align: center">
<table id="myTableData">
<tr>
<td style="text-align:center;"><b>DESTINATION</b></td>
<td style="text-align:center;"><b>CRITERIA</b></td>
<td style="text-align:center;"><b>MATERIAL FORM</b></td>
</tr>
<!----
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$db = 'mydatabase';
$dbconn = mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db($db);
$dynamic_textbox_count = count($_POST["destination"]);
$dynamic_textbox_value=0;
$query = "INSERT INTO dynamic_values (destination, criteria, material_form) VALUES ";
$queryValue = "";
for($i=0;$i<$dynamic_textbox_count;$i++)
$sql = $query.$queryValue;
if($dynamic_textbox_value!=0)
$result = mysql_query($sql);
if(!empty($result)) $message = "Added Successfully.";
mysql_close();
?>
-->window.onload = function()
var ModelArray =
"Mammals":
"Dog":
"Dog Food": ["Milk"]
,
"Cat":
"Cat food": ["Milk"]
,
"Tiger":
"Meat": ["Water"]
,
"Monkey":
"Banana": ["Water"]
,
"Reptiles":
"Snake":
"Rat": ["None"]
,
"Turtle":
"Plant": ["Water"]
,
"Lizard":
"Insects": ["None"]
,
"Crocodile":
"Meat": ["Water"]
//Get html elements
var model = document.getElementById("MODEL");
var destination = document.getElementById("destination");
var criteria = document.getElementById("criteria");
var material_form = document.getElementById("material_form");
//load models
for (var model_value in ModelArray)
model.options[model.options.length] = new Option(model_value, model_value);
//model changed -> destination value
model.onchange = function()
destination.length = 1;
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
destination.options[0].text = "Select Animal..."
for (var destination_value in ModelArray[this.value])
destination.options[destination.options.length] = new Option(destination_value, destination_value);
if (destination.options.length == 2)
destination.selectedIndex = 1;
destination.onchange();
//destination changed -> criteria value
model.onchange();
destination.onchange = function()
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
criteria.options[0].text = ""
for (var criteria_value in ModelArray[model.value][this.value])
criteria.options[criteria.options.length] = new Option(criteria_value, criteria_value);
if (criteria.options.length == 2)
criteria.selectedIndex = 1;
criteria.onchange();
//criteria changed -> material form value
criteria.onchange = function()
material_form.length = 1;
if (this.selectedIndex < 1)
material_form.options[0].text = ""
return;
material_form.options[0].text = ""
var material_form_value = ModelArray[model.value][destination.value][this.value];
for (var i = 0; i < material_form_value.length; i++)
material_form.options[material_form.options.length] = new Option(material_form_value[i], material_form_value[i]);
if (material_form.options.length == 2)
material_form.selectedIndex = 1;
// material_form.onchange();
function addRow()
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = destination.value;
row.insertCell(1).innerHTML = criteria.value;
row.insertCell(2).innerHTML = material_form.value;
row.insertCell(3).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)">';
function deleteRow(obj)
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
<td><b>MODEL: </b></td>
<td>
<select id="MODEL" NAME="MODEL" size="1" required>
<option value="" selected="selected">Select Model...</option>
</select>
</td>
<b>DESTINATION: </b></td>
<tr>
<td>
<select ID="destination" NAME="destination" required>
<option value="" selected="selected">Select Model First...</option>
</select>
<select ID="criteria" NAME="criteria" contenteditable="true" style="display: none" required>
</select>
<select id="material_form" name="material_form" style="display: none" required>
</select>
<input type="button" id="add" value="Add Destination" onclick="Javascript:addRow()">
</td>
</tr>
<div id="mydata" style="text-align: center">
<table id="myTableData">
<tr>
<td style="text-align:center;"><b>DESTINATION</b></td>
<td style="text-align:center;"><b>CRITERIA</b></td>
<td style="text-align:center;"><b>MATERIAL FORM</b></td>
</tr>
<!----
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$db = 'mydatabase';
$dbconn = mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db($db);
$dynamic_textbox_count = count($_POST["destination"]);
$dynamic_textbox_value=0;
$query = "INSERT INTO dynamic_values (destination, criteria, material_form) VALUES ";
$queryValue = "";
for($i=0;$i<$dynamic_textbox_count;$i++)
$sql = $query.$queryValue;
if($dynamic_textbox_value!=0)
$result = mysql_query($sql);
if(!empty($result)) $message = "Added Successfully.";
mysql_close();
?>
-->window.onload = function()
var ModelArray =
"Mammals":
"Dog":
"Dog Food": ["Milk"]
,
"Cat":
"Cat food": ["Milk"]
,
"Tiger":
"Meat": ["Water"]
,
"Monkey":
"Banana": ["Water"]
,
"Reptiles":
"Snake":
"Rat": ["None"]
,
"Turtle":
"Plant": ["Water"]
,
"Lizard":
"Insects": ["None"]
,
"Crocodile":
"Meat": ["Water"]
//Get html elements
var model = document.getElementById("MODEL");
var destination = document.getElementById("destination");
var criteria = document.getElementById("criteria");
var material_form = document.getElementById("material_form");
//load models
for (var model_value in ModelArray)
model.options[model.options.length] = new Option(model_value, model_value);
//model changed -> destination value
model.onchange = function()
destination.length = 1;
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
destination.options[0].text = "Select Animal..."
for (var destination_value in ModelArray[this.value])
destination.options[destination.options.length] = new Option(destination_value, destination_value);
if (destination.options.length == 2)
destination.selectedIndex = 1;
destination.onchange();
//destination changed -> criteria value
model.onchange();
destination.onchange = function()
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
criteria.options[0].text = ""
for (var criteria_value in ModelArray[model.value][this.value])
criteria.options[criteria.options.length] = new Option(criteria_value, criteria_value);
if (criteria.options.length == 2)
criteria.selectedIndex = 1;
criteria.onchange();
//criteria changed -> material form value
criteria.onchange = function()
material_form.length = 1;
if (this.selectedIndex < 1)
material_form.options[0].text = ""
return;
material_form.options[0].text = ""
var material_form_value = ModelArray[model.value][destination.value][this.value];
for (var i = 0; i < material_form_value.length; i++)
material_form.options[material_form.options.length] = new Option(material_form_value[i], material_form_value[i]);
if (material_form.options.length == 2)
material_form.selectedIndex = 1;
// material_form.onchange();
function addRow()
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = destination.value;
row.insertCell(1).innerHTML = criteria.value;
row.insertCell(2).innerHTML = material_form.value;
row.insertCell(3).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)">';
function deleteRow(obj)
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
<td><b>MODEL: </b></td>
<td>
<select id="MODEL" NAME="MODEL" size="1" required>
<option value="" selected="selected">Select Model...</option>
</select>
</td>
<b>DESTINATION: </b></td>
<tr>
<td>
<select ID="destination" NAME="destination" required>
<option value="" selected="selected">Select Model First...</option>
</select>
<select ID="criteria" NAME="criteria" contenteditable="true" style="display: none" required>
</select>
<select id="material_form" name="material_form" style="display: none" required>
</select>
<input type="button" id="add" value="Add Destination" onclick="Javascript:addRow()">
</td>
</tr>
<div id="mydata" style="text-align: center">
<table id="myTableData">
<tr>
<td style="text-align:center;"><b>DESTINATION</b></td>
<td style="text-align:center;"><b>CRITERIA</b></td>
<td style="text-align:center;"><b>MATERIAL FORM</b></td>
</tr>
<!----
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$db = 'mydatabase';
$dbconn = mysql_connect($dbhost, $dbuser, $dbpass);
mysql_select_db($db);
$dynamic_textbox_count = count($_POST["destination"]);
$dynamic_textbox_value=0;
$query = "INSERT INTO dynamic_values (destination, criteria, material_form) VALUES ";
$queryValue = "";
for($i=0;$i<$dynamic_textbox_count;$i++)
$sql = $query.$queryValue;
if($dynamic_textbox_value!=0)
$result = mysql_query($sql);
if(!empty($result)) $message = "Added Successfully.";
mysql_close();
?>
-->javascript php jquery html mysql
javascript php jquery html mysql
asked Nov 13 '18 at 5:41
user011717user011717
37
asked Nov 13 '18 at 5:41
user011717user011717
37
edited Nov 14 '18 at 23:40
user011717
asked Nov 13 '18 at 5:41
user011717user011717
37
asked Nov 13 '18 at 5:41
user011717user011717
37
asked Nov 13 '18 at 5:41
user011717user011717
37
37
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
something like this ?
use jquery.
window.onload = function()
var ModelArray =
"Mammals":
"Dog":
"Dog Food": ["Milk"]
,
"Cat":
"Cat food": ["Milk"]
,
"Tiger":
"Meat": ["Water"]
,
"Monkey":
"Banana": ["Water"]
,
"Reptiles":
"Snake":
"Rat": ["None"]
,
"Turtle":
"Plant": ["Water"]
,
"Lizard":
"Insects": ["None"]
,
"Crocodile":
"Meat": ["Water"]
//Get html elements
var model = document.getElementById("MODEL");
var destination = document.getElementById("destination");
var criteria = document.getElementById("criteria");
var material_form = document.getElementById("material_form");
//load models
for (var model_value in ModelArray)
model.options[model.options.length] = new Option(model_value, model_value);
//model changed -> destination value
model.onchange = function()
destination.length = 1;
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
destination.options[0].text = "Select Animal..."
for (var destination_value in ModelArray[this.value])
destination.options[destination.options.length] = new Option(destination_value, destination_value);
if (destination.options.length == 2)
destination.selectedIndex = 1;
destination.onchange();
//destination changed -> criteria value
model.onchange();
destination.onchange = function()
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
criteria.options[0].text = ""
for (var criteria_value in ModelArray[model.value][this.value])
criteria.options[criteria.options.length] = new Option(criteria_value, criteria_value);
if (criteria.options.length == 2)
criteria.selectedIndex = 1;
criteria.onchange();
//criteria changed -> material form value
criteria.onchange = function()
material_form.length = 1;
if (this.selectedIndex < 1)
material_form.options[0].text = ""
return;
material_form.options[0].text = ""
var material_form_value = ModelArray[model.value][destination.value][this.value];
for (var i = 0; i < material_form_value.length; i++)
material_form.options[material_form.options.length] = new Option(material_form_value[i], material_form_value[i]);
if (material_form.options.length == 2)
material_form.selectedIndex = 1;
// material_form.onchange();
function addRow()
var table = document.getElementById("bod");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = destination.value;
row.insertCell(1).innerHTML = criteria.value;
row.insertCell(2).innerHTML = material_form.value;
row.insertCell(3).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)">';
function deleteRow(obj)
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
//Get Tabel Data
$('#tabdata').on('click',function()
var TableData=new Array();
$('#myTableData tbody tr').each(function(row, tr)
TableData[row]=
"dest" :$(tr).find('td:eq(0)').text(),
"crit" :$(tr).find('td:eq(1)').text(),
"mat" :$(tr).find('td:eq(2)').text(),
);
console.log(TableData);
$.ajax(
url: 'http://example.com' //Your Url for receive data,
type: 'POST',
dataType: 'json',
data: pet:TableData,
success : function(data)
console.log(data);//On Success receive callback
,
error: function(xhr, ajaxOptions, thrownError)
console.log(thrownError);//If php return error, showing here
);
);<td><b>MODEL: </b></td>
<td>
<select id="MODEL" NAME="MODEL" size="1" required>
<option value="" selected="selected">Select Model...</option>
</select>
</td>
<b>DESTINATION: </b></td>
<tr>
<td>
<select ID="destination" NAME="destination" required>
<option value="" selected="selected">Select Model First...</option>
</select>
<select ID="criteria" NAME="criteria" contenteditable="true" style="display: none" required>
</select>
<select id="material_form" name="material_form" style="display: none" required>
</select>
<input type="button" id="add" value="Add Destination" onclick="Javascript:addRow()">
</td>
</tr>
<div id="mydata" style="text-align: center">
<table id="myTableData">
<thead>
<tr>
<td style="text-align:center;"><b>DESTINATION</b></td>
<td style="text-align:center;"><b>CRITERIA</b></td>
<td style="text-align:center;"><b>MATERIAL FORM</b></td>
</tr>
</thead>
<tbody id="bod">
</tbody>
</table>
</div>
<button id="tabdata">Get Data</button>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>On PHP (serverside)
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$db = 'mydatabase';
$dbconn =mysqli_connect($dbhost,$dbuser,$dbpass,$db);
function insert($destination,$criteria,$material_form)
$query=$dbconn->query("INSERT INTO dynamic_values (destination, criteria, material_form) VALUES('$destination','$criteria','$material_form')");
$destidata=json_decode($_POST["pet"]);
foreach ($destidata as $key)
insert($key->dest,$key->crit,$key->mat);
?>
answered Nov 13 '18 at 7:12
Thomas JerikoThomas Jeriko
469
Yes. Thank you. How can I save it to a database? Sorry Im new to javascript/php @Thomas Jeriko
– user011717
Nov 13 '18 at 7:48
you can send the data through ajax , by sending the "TabelData"
– Thomas Jeriko
Nov 14 '18 at 15:38
@user011717 im fixing your html code for better readable and uses for js
– Thomas Jeriko
Nov 14 '18 at 15:40
@user011717 where is your php code ?
– Thomas Jeriko
Nov 14 '18 at 15:51
Please see below my html code. I've edited and added my php code which only saves the last selected value from the dropdown list. @Thomas Jeriko
– user011717
Nov 14 '18 at 23:41
|
show 4 more comments
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53274531%2fhow-to-get-dropdown-list-array-values-from-innerhtml-and-save-to-database%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
something like this ?
use jquery.
window.onload = function()
var ModelArray =
"Mammals":
"Dog":
"Dog Food": ["Milk"]
,
"Cat":
"Cat food": ["Milk"]
,
"Tiger":
"Meat": ["Water"]
,
"Monkey":
"Banana": ["Water"]
,
"Reptiles":
"Snake":
"Rat": ["None"]
,
"Turtle":
"Plant": ["Water"]
,
"Lizard":
"Insects": ["None"]
,
"Crocodile":
"Meat": ["Water"]
//Get html elements
var model = document.getElementById("MODEL");
var destination = document.getElementById("destination");
var criteria = document.getElementById("criteria");
var material_form = document.getElementById("material_form");
//load models
for (var model_value in ModelArray)
model.options[model.options.length] = new Option(model_value, model_value);
//model changed -> destination value
model.onchange = function()
destination.length = 1;
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
destination.options[0].text = "Select Animal..."
for (var destination_value in ModelArray[this.value])
destination.options[destination.options.length] = new Option(destination_value, destination_value);
if (destination.options.length == 2)
destination.selectedIndex = 1;
destination.onchange();
//destination changed -> criteria value
model.onchange();
destination.onchange = function()
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
criteria.options[0].text = ""
for (var criteria_value in ModelArray[model.value][this.value])
criteria.options[criteria.options.length] = new Option(criteria_value, criteria_value);
if (criteria.options.length == 2)
criteria.selectedIndex = 1;
criteria.onchange();
//criteria changed -> material form value
criteria.onchange = function()
material_form.length = 1;
if (this.selectedIndex < 1)
material_form.options[0].text = ""
return;
material_form.options[0].text = ""
var material_form_value = ModelArray[model.value][destination.value][this.value];
for (var i = 0; i < material_form_value.length; i++)
material_form.options[material_form.options.length] = new Option(material_form_value[i], material_form_value[i]);
if (material_form.options.length == 2)
material_form.selectedIndex = 1;
// material_form.onchange();
function addRow()
var table = document.getElementById("bod");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = destination.value;
row.insertCell(1).innerHTML = criteria.value;
row.insertCell(2).innerHTML = material_form.value;
row.insertCell(3).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)">';
function deleteRow(obj)
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
//Get Tabel Data
$('#tabdata').on('click',function()
var TableData=new Array();
$('#myTableData tbody tr').each(function(row, tr)
TableData[row]=
"dest" :$(tr).find('td:eq(0)').text(),
"crit" :$(tr).find('td:eq(1)').text(),
"mat" :$(tr).find('td:eq(2)').text(),
);
console.log(TableData);
$.ajax(
url: 'http://example.com' //Your Url for receive data,
type: 'POST',
dataType: 'json',
data: pet:TableData,
success : function(data)
console.log(data);//On Success receive callback
,
error: function(xhr, ajaxOptions, thrownError)
console.log(thrownError);//If php return error, showing here
);
);<td><b>MODEL: </b></td>
<td>
<select id="MODEL" NAME="MODEL" size="1" required>
<option value="" selected="selected">Select Model...</option>
</select>
</td>
<b>DESTINATION: </b></td>
<tr>
<td>
<select ID="destination" NAME="destination" required>
<option value="" selected="selected">Select Model First...</option>
</select>
<select ID="criteria" NAME="criteria" contenteditable="true" style="display: none" required>
</select>
<select id="material_form" name="material_form" style="display: none" required>
</select>
<input type="button" id="add" value="Add Destination" onclick="Javascript:addRow()">
</td>
</tr>
<div id="mydata" style="text-align: center">
<table id="myTableData">
<thead>
<tr>
<td style="text-align:center;"><b>DESTINATION</b></td>
<td style="text-align:center;"><b>CRITERIA</b></td>
<td style="text-align:center;"><b>MATERIAL FORM</b></td>
</tr>
</thead>
<tbody id="bod">
</tbody>
</table>
</div>
<button id="tabdata">Get Data</button>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>On PHP (serverside)
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$db = 'mydatabase';
$dbconn =mysqli_connect($dbhost,$dbuser,$dbpass,$db);
function insert($destination,$criteria,$material_form)
$query=$dbconn->query("INSERT INTO dynamic_values (destination, criteria, material_form) VALUES('$destination','$criteria','$material_form')");
$destidata=json_decode($_POST["pet"]);
foreach ($destidata as $key)
insert($key->dest,$key->crit,$key->mat);
?>
answered Nov 13 '18 at 7:12
Thomas JerikoThomas Jeriko
469
Yes. Thank you. How can I save it to a database? Sorry Im new to javascript/php @Thomas Jeriko
– user011717
Nov 13 '18 at 7:48
you can send the data through ajax , by sending the "TabelData"
– Thomas Jeriko
Nov 14 '18 at 15:38
@user011717 im fixing your html code for better readable and uses for js
– Thomas Jeriko
Nov 14 '18 at 15:40
@user011717 where is your php code ?
– Thomas Jeriko
Nov 14 '18 at 15:51
Please see below my html code. I've edited and added my php code which only saves the last selected value from the dropdown list. @Thomas Jeriko
– user011717
Nov 14 '18 at 23:41
|
show 4 more comments
0
something like this ?
use jquery.
window.onload = function()
var ModelArray =
"Mammals":
"Dog":
"Dog Food": ["Milk"]
,
"Cat":
"Cat food": ["Milk"]
,
"Tiger":
"Meat": ["Water"]
,
"Monkey":
"Banana": ["Water"]
,
"Reptiles":
"Snake":
"Rat": ["None"]
,
"Turtle":
"Plant": ["Water"]
,
"Lizard":
"Insects": ["None"]
,
"Crocodile":
"Meat": ["Water"]
//Get html elements
var model = document.getElementById("MODEL");
var destination = document.getElementById("destination");
var criteria = document.getElementById("criteria");
var material_form = document.getElementById("material_form");
//load models
for (var model_value in ModelArray)
model.options[model.options.length] = new Option(model_value, model_value);
//model changed -> destination value
model.onchange = function()
destination.length = 1;
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
destination.options[0].text = "Select Animal..."
for (var destination_value in ModelArray[this.value])
destination.options[destination.options.length] = new Option(destination_value, destination_value);
if (destination.options.length == 2)
destination.selectedIndex = 1;
destination.onchange();
//destination changed -> criteria value
model.onchange();
destination.onchange = function()
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
criteria.options[0].text = ""
for (var criteria_value in ModelArray[model.value][this.value])
criteria.options[criteria.options.length] = new Option(criteria_value, criteria_value);
if (criteria.options.length == 2)
criteria.selectedIndex = 1;
criteria.onchange();
//criteria changed -> material form value
criteria.onchange = function()
material_form.length = 1;
if (this.selectedIndex < 1)
material_form.options[0].text = ""
return;
material_form.options[0].text = ""
var material_form_value = ModelArray[model.value][destination.value][this.value];
for (var i = 0; i < material_form_value.length; i++)
material_form.options[material_form.options.length] = new Option(material_form_value[i], material_form_value[i]);
if (material_form.options.length == 2)
material_form.selectedIndex = 1;
// material_form.onchange();
function addRow()
var table = document.getElementById("bod");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = destination.value;
row.insertCell(1).innerHTML = criteria.value;
row.insertCell(2).innerHTML = material_form.value;
row.insertCell(3).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)">';
function deleteRow(obj)
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
//Get Tabel Data
$('#tabdata').on('click',function()
var TableData=new Array();
$('#myTableData tbody tr').each(function(row, tr)
TableData[row]=
"dest" :$(tr).find('td:eq(0)').text(),
"crit" :$(tr).find('td:eq(1)').text(),
"mat" :$(tr).find('td:eq(2)').text(),
);
console.log(TableData);
$.ajax(
url: 'http://example.com' //Your Url for receive data,
type: 'POST',
dataType: 'json',
data: pet:TableData,
success : function(data)
console.log(data);//On Success receive callback
,
error: function(xhr, ajaxOptions, thrownError)
console.log(thrownError);//If php return error, showing here
);
);<td><b>MODEL: </b></td>
<td>
<select id="MODEL" NAME="MODEL" size="1" required>
<option value="" selected="selected">Select Model...</option>
</select>
</td>
<b>DESTINATION: </b></td>
<tr>
<td>
<select ID="destination" NAME="destination" required>
<option value="" selected="selected">Select Model First...</option>
</select>
<select ID="criteria" NAME="criteria" contenteditable="true" style="display: none" required>
</select>
<select id="material_form" name="material_form" style="display: none" required>
</select>
<input type="button" id="add" value="Add Destination" onclick="Javascript:addRow()">
</td>
</tr>
<div id="mydata" style="text-align: center">
<table id="myTableData">
<thead>
<tr>
<td style="text-align:center;"><b>DESTINATION</b></td>
<td style="text-align:center;"><b>CRITERIA</b></td>
<td style="text-align:center;"><b>MATERIAL FORM</b></td>
</tr>
</thead>
<tbody id="bod">
</tbody>
</table>
</div>
<button id="tabdata">Get Data</button>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>On PHP (serverside)
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$db = 'mydatabase';
$dbconn =mysqli_connect($dbhost,$dbuser,$dbpass,$db);
function insert($destination,$criteria,$material_form)
$query=$dbconn->query("INSERT INTO dynamic_values (destination, criteria, material_form) VALUES('$destination','$criteria','$material_form')");
$destidata=json_decode($_POST["pet"]);
foreach ($destidata as $key)
insert($key->dest,$key->crit,$key->mat);
?>
answered Nov 13 '18 at 7:12
Thomas JerikoThomas Jeriko
469
Yes. Thank you. How can I save it to a database? Sorry Im new to javascript/php @Thomas Jeriko
– user011717
Nov 13 '18 at 7:48
you can send the data through ajax , by sending the "TabelData"
– Thomas Jeriko
Nov 14 '18 at 15:38
@user011717 im fixing your html code for better readable and uses for js
– Thomas Jeriko
Nov 14 '18 at 15:40
@user011717 where is your php code ?
– Thomas Jeriko
Nov 14 '18 at 15:51
Please see below my html code. I've edited and added my php code which only saves the last selected value from the dropdown list. @Thomas Jeriko
– user011717
Nov 14 '18 at 23:41
|
show 4 more comments
0
0
0
something like this ?
use jquery.
window.onload = function()
var ModelArray =
"Mammals":
"Dog":
"Dog Food": ["Milk"]
,
"Cat":
"Cat food": ["Milk"]
,
"Tiger":
"Meat": ["Water"]
,
"Monkey":
"Banana": ["Water"]
,
"Reptiles":
"Snake":
"Rat": ["None"]
,
"Turtle":
"Plant": ["Water"]
,
"Lizard":
"Insects": ["None"]
,
"Crocodile":
"Meat": ["Water"]
//Get html elements
var model = document.getElementById("MODEL");
var destination = document.getElementById("destination");
var criteria = document.getElementById("criteria");
var material_form = document.getElementById("material_form");
//load models
for (var model_value in ModelArray)
model.options[model.options.length] = new Option(model_value, model_value);
//model changed -> destination value
model.onchange = function()
destination.length = 1;
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
destination.options[0].text = "Select Animal..."
for (var destination_value in ModelArray[this.value])
destination.options[destination.options.length] = new Option(destination_value, destination_value);
if (destination.options.length == 2)
destination.selectedIndex = 1;
destination.onchange();
//destination changed -> criteria value
model.onchange();
destination.onchange = function()
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
criteria.options[0].text = ""
for (var criteria_value in ModelArray[model.value][this.value])
criteria.options[criteria.options.length] = new Option(criteria_value, criteria_value);
if (criteria.options.length == 2)
criteria.selectedIndex = 1;
criteria.onchange();
//criteria changed -> material form value
criteria.onchange = function()
material_form.length = 1;
if (this.selectedIndex < 1)
material_form.options[0].text = ""
return;
material_form.options[0].text = ""
var material_form_value = ModelArray[model.value][destination.value][this.value];
for (var i = 0; i < material_form_value.length; i++)
material_form.options[material_form.options.length] = new Option(material_form_value[i], material_form_value[i]);
if (material_form.options.length == 2)
material_form.selectedIndex = 1;
// material_form.onchange();
function addRow()
var table = document.getElementById("bod");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = destination.value;
row.insertCell(1).innerHTML = criteria.value;
row.insertCell(2).innerHTML = material_form.value;
row.insertCell(3).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)">';
function deleteRow(obj)
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
//Get Tabel Data
$('#tabdata').on('click',function()
var TableData=new Array();
$('#myTableData tbody tr').each(function(row, tr)
TableData[row]=
"dest" :$(tr).find('td:eq(0)').text(),
"crit" :$(tr).find('td:eq(1)').text(),
"mat" :$(tr).find('td:eq(2)').text(),
);
console.log(TableData);
$.ajax(
url: 'http://example.com' //Your Url for receive data,
type: 'POST',
dataType: 'json',
data: pet:TableData,
success : function(data)
console.log(data);//On Success receive callback
,
error: function(xhr, ajaxOptions, thrownError)
console.log(thrownError);//If php return error, showing here
);
);<td><b>MODEL: </b></td>
<td>
<select id="MODEL" NAME="MODEL" size="1" required>
<option value="" selected="selected">Select Model...</option>
</select>
</td>
<b>DESTINATION: </b></td>
<tr>
<td>
<select ID="destination" NAME="destination" required>
<option value="" selected="selected">Select Model First...</option>
</select>
<select ID="criteria" NAME="criteria" contenteditable="true" style="display: none" required>
</select>
<select id="material_form" name="material_form" style="display: none" required>
</select>
<input type="button" id="add" value="Add Destination" onclick="Javascript:addRow()">
</td>
</tr>
<div id="mydata" style="text-align: center">
<table id="myTableData">
<thead>
<tr>
<td style="text-align:center;"><b>DESTINATION</b></td>
<td style="text-align:center;"><b>CRITERIA</b></td>
<td style="text-align:center;"><b>MATERIAL FORM</b></td>
</tr>
</thead>
<tbody id="bod">
</tbody>
</table>
</div>
<button id="tabdata">Get Data</button>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>On PHP (serverside)
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$db = 'mydatabase';
$dbconn =mysqli_connect($dbhost,$dbuser,$dbpass,$db);
function insert($destination,$criteria,$material_form)
$query=$dbconn->query("INSERT INTO dynamic_values (destination, criteria, material_form) VALUES('$destination','$criteria','$material_form')");
$destidata=json_decode($_POST["pet"]);
foreach ($destidata as $key)
insert($key->dest,$key->crit,$key->mat);
?>
answered Nov 13 '18 at 7:12
Thomas JerikoThomas Jeriko
469
something like this ?
use jquery.
window.onload = function()
var ModelArray =
"Mammals":
"Dog":
"Dog Food": ["Milk"]
,
"Cat":
"Cat food": ["Milk"]
,
"Tiger":
"Meat": ["Water"]
,
"Monkey":
"Banana": ["Water"]
,
"Reptiles":
"Snake":
"Rat": ["None"]
,
"Turtle":
"Plant": ["Water"]
,
"Lizard":
"Insects": ["None"]
,
"Crocodile":
"Meat": ["Water"]
//Get html elements
var model = document.getElementById("MODEL");
var destination = document.getElementById("destination");
var criteria = document.getElementById("criteria");
var material_form = document.getElementById("material_form");
//load models
for (var model_value in ModelArray)
model.options[model.options.length] = new Option(model_value, model_value);
//model changed -> destination value
model.onchange = function()
destination.length = 1;
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
destination.options[0].text = "Select Animal..."
for (var destination_value in ModelArray[this.value])
destination.options[destination.options.length] = new Option(destination_value, destination_value);
if (destination.options.length == 2)
destination.selectedIndex = 1;
destination.onchange();
//destination changed -> criteria value
model.onchange();
destination.onchange = function()
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
criteria.options[0].text = ""
for (var criteria_value in ModelArray[model.value][this.value])
criteria.options[criteria.options.length] = new Option(criteria_value, criteria_value);
if (criteria.options.length == 2)
criteria.selectedIndex = 1;
criteria.onchange();
//criteria changed -> material form value
criteria.onchange = function()
material_form.length = 1;
if (this.selectedIndex < 1)
material_form.options[0].text = ""
return;
material_form.options[0].text = ""
var material_form_value = ModelArray[model.value][destination.value][this.value];
for (var i = 0; i < material_form_value.length; i++)
material_form.options[material_form.options.length] = new Option(material_form_value[i], material_form_value[i]);
if (material_form.options.length == 2)
material_form.selectedIndex = 1;
// material_form.onchange();
function addRow()
var table = document.getElementById("bod");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = destination.value;
row.insertCell(1).innerHTML = criteria.value;
row.insertCell(2).innerHTML = material_form.value;
row.insertCell(3).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)">';
function deleteRow(obj)
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
//Get Tabel Data
$('#tabdata').on('click',function()
var TableData=new Array();
$('#myTableData tbody tr').each(function(row, tr)
TableData[row]=
"dest" :$(tr).find('td:eq(0)').text(),
"crit" :$(tr).find('td:eq(1)').text(),
"mat" :$(tr).find('td:eq(2)').text(),
);
console.log(TableData);
$.ajax(
url: 'http://example.com' //Your Url for receive data,
type: 'POST',
dataType: 'json',
data: pet:TableData,
success : function(data)
console.log(data);//On Success receive callback
,
error: function(xhr, ajaxOptions, thrownError)
console.log(thrownError);//If php return error, showing here
);
);<td><b>MODEL: </b></td>
<td>
<select id="MODEL" NAME="MODEL" size="1" required>
<option value="" selected="selected">Select Model...</option>
</select>
</td>
<b>DESTINATION: </b></td>
<tr>
<td>
<select ID="destination" NAME="destination" required>
<option value="" selected="selected">Select Model First...</option>
</select>
<select ID="criteria" NAME="criteria" contenteditable="true" style="display: none" required>
</select>
<select id="material_form" name="material_form" style="display: none" required>
</select>
<input type="button" id="add" value="Add Destination" onclick="Javascript:addRow()">
</td>
</tr>
<div id="mydata" style="text-align: center">
<table id="myTableData">
<thead>
<tr>
<td style="text-align:center;"><b>DESTINATION</b></td>
<td style="text-align:center;"><b>CRITERIA</b></td>
<td style="text-align:center;"><b>MATERIAL FORM</b></td>
</tr>
</thead>
<tbody id="bod">
</tbody>
</table>
</div>
<button id="tabdata">Get Data</button>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>On PHP (serverside)
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$db = 'mydatabase';
$dbconn =mysqli_connect($dbhost,$dbuser,$dbpass,$db);
function insert($destination,$criteria,$material_form)
$query=$dbconn->query("INSERT INTO dynamic_values (destination, criteria, material_form) VALUES('$destination','$criteria','$material_form')");
$destidata=json_decode($_POST["pet"]);
foreach ($destidata as $key)
insert($key->dest,$key->crit,$key->mat);
?>
window.onload = function()
var ModelArray =
"Mammals":
"Dog":
"Dog Food": ["Milk"]
,
"Cat":
"Cat food": ["Milk"]
,
"Tiger":
"Meat": ["Water"]
,
"Monkey":
"Banana": ["Water"]
,
"Reptiles":
"Snake":
"Rat": ["None"]
,
"Turtle":
"Plant": ["Water"]
,
"Lizard":
"Insects": ["None"]
,
"Crocodile":
"Meat": ["Water"]
//Get html elements
var model = document.getElementById("MODEL");
var destination = document.getElementById("destination");
var criteria = document.getElementById("criteria");
var material_form = document.getElementById("material_form");
//load models
for (var model_value in ModelArray)
model.options[model.options.length] = new Option(model_value, model_value);
//model changed -> destination value
model.onchange = function()
destination.length = 1;
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
destination.options[0].text = "Select Animal..."
for (var destination_value in ModelArray[this.value])
destination.options[destination.options.length] = new Option(destination_value, destination_value);
if (destination.options.length == 2)
destination.selectedIndex = 1;
destination.onchange();
//destination changed -> criteria value
model.onchange();
destination.onchange = function()
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
criteria.options[0].text = ""
for (var criteria_value in ModelArray[model.value][this.value])
criteria.options[criteria.options.length] = new Option(criteria_value, criteria_value);
if (criteria.options.length == 2)
criteria.selectedIndex = 1;
criteria.onchange();
//criteria changed -> material form value
criteria.onchange = function()
material_form.length = 1;
if (this.selectedIndex < 1)
material_form.options[0].text = ""
return;
material_form.options[0].text = ""
var material_form_value = ModelArray[model.value][destination.value][this.value];
for (var i = 0; i < material_form_value.length; i++)
material_form.options[material_form.options.length] = new Option(material_form_value[i], material_form_value[i]);
if (material_form.options.length == 2)
material_form.selectedIndex = 1;
// material_form.onchange();
function addRow()
var table = document.getElementById("bod");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = destination.value;
row.insertCell(1).innerHTML = criteria.value;
row.insertCell(2).innerHTML = material_form.value;
row.insertCell(3).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)">';
function deleteRow(obj)
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
//Get Tabel Data
$('#tabdata').on('click',function()
var TableData=new Array();
$('#myTableData tbody tr').each(function(row, tr)
TableData[row]=
"dest" :$(tr).find('td:eq(0)').text(),
"crit" :$(tr).find('td:eq(1)').text(),
"mat" :$(tr).find('td:eq(2)').text(),
);
console.log(TableData);
$.ajax(
url: 'http://example.com' //Your Url for receive data,
type: 'POST',
dataType: 'json',
data: pet:TableData,
success : function(data)
console.log(data);//On Success receive callback
,
error: function(xhr, ajaxOptions, thrownError)
console.log(thrownError);//If php return error, showing here
);
);<td><b>MODEL: </b></td>
<td>
<select id="MODEL" NAME="MODEL" size="1" required>
<option value="" selected="selected">Select Model...</option>
</select>
</td>
<b>DESTINATION: </b></td>
<tr>
<td>
<select ID="destination" NAME="destination" required>
<option value="" selected="selected">Select Model First...</option>
</select>
<select ID="criteria" NAME="criteria" contenteditable="true" style="display: none" required>
</select>
<select id="material_form" name="material_form" style="display: none" required>
</select>
<input type="button" id="add" value="Add Destination" onclick="Javascript:addRow()">
</td>
</tr>
<div id="mydata" style="text-align: center">
<table id="myTableData">
<thead>
<tr>
<td style="text-align:center;"><b>DESTINATION</b></td>
<td style="text-align:center;"><b>CRITERIA</b></td>
<td style="text-align:center;"><b>MATERIAL FORM</b></td>
</tr>
</thead>
<tbody id="bod">
</tbody>
</table>
</div>
<button id="tabdata">Get Data</button>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>window.onload = function()
var ModelArray =
"Mammals":
"Dog":
"Dog Food": ["Milk"]
,
"Cat":
"Cat food": ["Milk"]
,
"Tiger":
"Meat": ["Water"]
,
"Monkey":
"Banana": ["Water"]
,
"Reptiles":
"Snake":
"Rat": ["None"]
,
"Turtle":
"Plant": ["Water"]
,
"Lizard":
"Insects": ["None"]
,
"Crocodile":
"Meat": ["Water"]
//Get html elements
var model = document.getElementById("MODEL");
var destination = document.getElementById("destination");
var criteria = document.getElementById("criteria");
var material_form = document.getElementById("material_form");
//load models
for (var model_value in ModelArray)
model.options[model.options.length] = new Option(model_value, model_value);
//model changed -> destination value
model.onchange = function()
destination.length = 1;
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
destination.options[0].text = "Select Animal..."
for (var destination_value in ModelArray[this.value])
destination.options[destination.options.length] = new Option(destination_value, destination_value);
if (destination.options.length == 2)
destination.selectedIndex = 1;
destination.onchange();
//destination changed -> criteria value
model.onchange();
destination.onchange = function()
criteria.length = 1;
material_form.length = 1;
if (this.selectedIndex < 1)
criteria.options[0].text = ""
return;
criteria.options[0].text = ""
for (var criteria_value in ModelArray[model.value][this.value])
criteria.options[criteria.options.length] = new Option(criteria_value, criteria_value);
if (criteria.options.length == 2)
criteria.selectedIndex = 1;
criteria.onchange();
//criteria changed -> material form value
criteria.onchange = function()
material_form.length = 1;
if (this.selectedIndex < 1)
material_form.options[0].text = ""
return;
material_form.options[0].text = ""
var material_form_value = ModelArray[model.value][destination.value][this.value];
for (var i = 0; i < material_form_value.length; i++)
material_form.options[material_form.options.length] = new Option(material_form_value[i], material_form_value[i]);
if (material_form.options.length == 2)
material_form.selectedIndex = 1;
// material_form.onchange();
function addRow()
var table = document.getElementById("bod");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = destination.value;
row.insertCell(1).innerHTML = criteria.value;
row.insertCell(2).innerHTML = material_form.value;
row.insertCell(3).innerHTML = '<input type="button" value="Delete" onClick="Javacsript:deleteRow(this)">';
function deleteRow(obj)
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
//Get Tabel Data
$('#tabdata').on('click',function()
var TableData=new Array();
$('#myTableData tbody tr').each(function(row, tr)
TableData[row]=
"dest" :$(tr).find('td:eq(0)').text(),
"crit" :$(tr).find('td:eq(1)').text(),
"mat" :$(tr).find('td:eq(2)').text(),
);
console.log(TableData);
$.ajax(
url: 'http://example.com' //Your Url for receive data,
type: 'POST',
dataType: 'json',
data: pet:TableData,
success : function(data)
console.log(data);//On Success receive callback
,
error: function(xhr, ajaxOptions, thrownError)
console.log(thrownError);//If php return error, showing here
);
);<td><b>MODEL: </b></td>
<td>
<select id="MODEL" NAME="MODEL" size="1" required>
<option value="" selected="selected">Select Model...</option>
</select>
</td>
<b>DESTINATION: </b></td>
<tr>
<td>
<select ID="destination" NAME="destination" required>
<option value="" selected="selected">Select Model First...</option>
</select>
<select ID="criteria" NAME="criteria" contenteditable="true" style="display: none" required>
</select>
<select id="material_form" name="material_form" style="display: none" required>
</select>
<input type="button" id="add" value="Add Destination" onclick="Javascript:addRow()">
</td>
</tr>
<div id="mydata" style="text-align: center">
<table id="myTableData">
<thead>
<tr>
<td style="text-align:center;"><b>DESTINATION</b></td>
<td style="text-align:center;"><b>CRITERIA</b></td>
<td style="text-align:center;"><b>MATERIAL FORM</b></td>
</tr>
</thead>
<tbody id="bod">
</tbody>
</table>
</div>
<button id="tabdata">Get Data</button>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>answered Nov 13 '18 at 7:12
Thomas JerikoThomas Jeriko
469
edited Nov 15 '18 at 5:36
answered Nov 13 '18 at 7:12
Thomas JerikoThomas Jeriko
469
answered Nov 13 '18 at 7:12
Thomas JerikoThomas Jeriko
469
answered Nov 13 '18 at 7:12
Thomas JerikoThomas Jeriko
469
469
Yes. Thank you. How can I save it to a database? Sorry Im new to javascript/php @Thomas Jeriko
– user011717
Nov 13 '18 at 7:48
you can send the data through ajax , by sending the "TabelData"
– Thomas Jeriko
Nov 14 '18 at 15:38
@user011717 im fixing your html code for better readable and uses for js
– Thomas Jeriko
Nov 14 '18 at 15:40
@user011717 where is your php code ?
– Thomas Jeriko
Nov 14 '18 at 15:51
Please see below my html code. I've edited and added my php code which only saves the last selected value from the dropdown list. @Thomas Jeriko
– user011717
Nov 14 '18 at 23:41
|
show 4 more comments
Yes. Thank you. How can I save it to a database? Sorry Im new to javascript/php @Thomas Jeriko
– user011717
Nov 13 '18 at 7:48
you can send the data through ajax , by sending the "TabelData"
– Thomas Jeriko
Nov 14 '18 at 15:38
@user011717 im fixing your html code for better readable and uses for js
– Thomas Jeriko
Nov 14 '18 at 15:40
@user011717 where is your php code ?
– Thomas Jeriko
Nov 14 '18 at 15:51
Please see below my html code. I've edited and added my php code which only saves the last selected value from the dropdown list. @Thomas Jeriko
– user011717
Nov 14 '18 at 23:41
Yes. Thank you. How can I save it to a database? Sorry Im new to javascript/php @Thomas Jeriko
– user011717
Nov 13 '18 at 7:48
Yes. Thank you. How can I save it to a database? Sorry Im new to javascript/php @Thomas Jeriko
– user011717
Nov 13 '18 at 7:48
you can send the data through ajax , by sending the "TabelData"
– Thomas Jeriko
Nov 14 '18 at 15:38
you can send the data through ajax , by sending the "TabelData"
– Thomas Jeriko
Nov 14 '18 at 15:38
@user011717 im fixing your html code for better readable and uses for js
– Thomas Jeriko
Nov 14 '18 at 15:40
@user011717 im fixing your html code for better readable and uses for js
– Thomas Jeriko
Nov 14 '18 at 15:40
@user011717 where is your php code ?
– Thomas Jeriko
Nov 14 '18 at 15:51
@user011717 where is your php code ?
– Thomas Jeriko
Nov 14 '18 at 15:51
Please see below my html code. I've edited and added my php code which only saves the last selected value from the dropdown list. @Thomas Jeriko
– user011717
Nov 14 '18 at 23:41
Please see below my html code. I've edited and added my php code which only saves the last selected value from the dropdown list. @Thomas Jeriko
– user011717
Nov 14 '18 at 23:41
|
show 4 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53274531%2fhow-to-get-dropdown-list-array-values-from-innerhtml-and-save-to-database%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
