I have a simple university project for an online course site like Udemy.
This form for adding a course contains the course data and a dynamic table with a button that adds a new row.
My problem is POST data, I don't know how to get the table data to store in the Database.
edit:
I know how to use action"test.php".
I have created sign-up and login pages.
i know I can get post data example $email = $_POST['email'];
my problem is how I get a table
php code(I know all of it html):
<form action="" method="POST">
<div>
<label for="titleC">title course</label>
<input type="text" name="titleC" id="titleC" required>
</div>
<div>
<label for="Age">Choose a Rating Age:</label>
<select name="Age" id="Age" required>
<option value="12">12+</option>
<option value="16">16+</option>
<option value="18">18+</option>
</select>
</div>
<div>
<label for="Cprice">Course Price</label>
<input type="number" name="Cprice" id="Cprice" min="0" required>
</div>
<div>
<label for="Categories">Choose a Categories:</label>
<select name="Categories" id="Categories">
<option value="Development">Development</option>
<option value="IT">IT</option>
<option value="Design">Design</option>
<option value="Photography & Video">Photography & Video</option>
</select>
</div>
<div>
<label for="img">Select image:</label>
<input type="file" id="img" name="img" accept="image/*">
</div>
<table id="listVideo">
<thead>
<tr>
<th>Name</th>
<th>Link</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td><input type="text" id="txtName" name="name[]" /></td>
<td><input type="text" id="txtLink" name="link[]" /></td>
<td><input type="button" onclick="Add()" value="Add" /></td>
</tr>
</tfoot>
</table>
<div class="soloButton">
<button type="submit" name="addcourse-submit" value="submit">submit</button>
</div>
</form>
js code:
function Add() {
var txtName = document.getElementById("txtName");
var txtCountry = document.getElementById("txtLink");
AddRow(txtName.value, txtCountry.value);
txtName.value = "";
txtCountry.value = "";
};
function Remove(button) {
//Determine the reference of the Row using the Button.
var row = button.parentNode.parentNode;
var name = row.getElementsByTagName("TD")[0].innerHTML;
if (confirm("Do you want to delete: " + name)) {
//Get the reference of the Table.
var table = document.getElementById("listVideo");
//Delete the Table row using it's Index.
table.deleteRow(row.rowIndex);
}
};
function AddRow(name, txtLink) {
//Get the reference of the Table's TBODY element.
var tBody = document.getElementById("listVideo").getElementsByTagName("TBODY")[0];
//Add Row.
row = tBody.insertRow(-1);
//Add Name cell.
var cell = row.insertCell(-1);
cell.innerHTML = name;
//Add txtLink cell.
cell = row.insertCell(-1);
cell.innerHTML = txtLink;
//Add Button cell.
cell = row.insertCell(-1);
var btnRemove = document.createElement("INPUT");
btnRemove.type = "button";
btnRemove.value = "Remove";
btnRemove.setAttribute("onclick", "Remove(this);");
cell.appendChild(btnRemove);
}
The dynamic table was taken from one of the tutorials.
Thank you
[English is not my native language sorry]
I have a html table that adds the row data dynamically by taking user input. How can I export this table data to excel?
function fnExcelReport() {
var table = document.getElementById("myTableData");
var html = table.outerHTML;
var url = 'data:application/vnd.ms-excel,' + escape(html);
html table into url
elem.setAttribute("href", url);
elem.setAttribute("download","export.xls");
return false;
}
Name:<input type="text" id="name">
Age:<input type="text" id="age">
<input type="button" id="add" value="Add" onclick="Javascript:addRow()">
<table id="myTableData" border="1px" cellpadding="2">
<tr>
<td> </td>
<td><b>Name</b></td>
<td><b>Age</b></td>
</tr>
</table>
download
i am able to add the rows but unable to download the excel file. Any help would be appriciated
My problem is that the edit function will display undefined in input field but in my console it displays the img url..
Can you please correct my script why it displays undefined
This is my js code, where I created 3 function,the , and
my.js
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row(){
var new_image=document.getElementById("new_image").value;
var new_title=document.getElementById("new_title").value;
var new_description=document.getElementById("new_description").value;
if (new_image&&new_title&&new_description != "") {
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML=
"<div id='row"+table_len+"'><img id='image_row"+table_len+"' src = "+new_image+"><div id='title_row"+table_len+"'>"+new_title+
"</div><div id='description_row"+table_len+"'>"+new_description+"</div><div><input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'><input type='button' value='Edit' class='edit' onclick='edit_row("+table_len+")'></div></div>";
document.getElementById("new_image").value="";
document.getElementById("new_title").value="";
document.getElementById("new_description").value="";
}
}
function edit_row(no){
var image=document.getElementById("image_row"+no).getAttribute("src");
console.log(image);
var title=document.getElementById("title_row"+no);
console.log(title);
var description=document.getElementById("description_row"+no);
console.log(description);
var image_data = image.innerHTML;
var title_data = title.innerHTML;
var description_data =description.innerHTML;
document.getElementById("new_image").value=image_data;
document.getElementById("new_title").value=title_data;
document.getElementById("new_description").value=description_data;
}
This part is my html code, why I only have div and tables
index.html
<div id="wrapper">
<h1 align="center">My Todo App</h1>
<div id="container">
<form id="myForm">
<table align='center' cellspacing=2 cellpadding=5>
<tr>
<th>Image Link</th>
<th>Title</th>
<th>Description</th>
</tr>
<tr>
<td><input type="text" id="new_image"></td>
<td><input type="text" id="new_title"></td>
<td><input type="text" id="new_description"></td>
<td><input type="button" class="add" onclick="add_row();" value="SAVE"></td>
</tr>
</table>
</form>
</div>
<div id="content_container">
<div>
<table align='center' cellspacing=2 cellpadding=5 id="data_table">
</table>
</div>
</div>
</div>
and also how to append the new edited data when clicking the save button, in my case it will add another row.
Remove image.innerHTML inside function edit_row(no)
Added new function as per your question
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row(){
var new_image=document.getElementById("new_image").value;
var new_title=document.getElementById("new_title").value;
var new_description=document.getElementById("new_description").value;
if (new_image&&new_title&&new_description != "") {
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML=
"<div class='myrow'><div id='row"+table_len+"'><img id='image_row"+table_len+"' src = "+new_image+"><div id='title_row"+table_len+"' class='titleData'>"+new_title+
"</div><div class='descData' id='description_row"+table_len+"'>"+new_description+"</div><div><input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'><input type='button' value='Edit' class='edit' onclick='edit_row("+table_len+",this)'></div></div></div>";
document.getElementById("new_image").value="";
document.getElementById("new_title").value="";
document.getElementById("new_description").value="";
}
}
function edit_row(no,ref){
ref.value="Save";
ref.removeAttribute("onclick");
var image=document.getElementById("image_row"+no).getAttribute("src");
console.log(image);
var title=document.getElementById("title_row"+no);
console.log(title);
var description=document.getElementById("description_row"+no);
console.log(description);
var image_data = image; // remove image.innerHTML
var title_data = title.innerHTML;
var description_data =description.innerHTML;
document.getElementById("new_image").value=image_data;
document.getElementById("new_title").value=title_data;
document.getElementById("new_description").value=description_data;
ref.setAttribute("onclick","saveEdit(this,'"+no+"')");
}
function saveEdit(ref,no)
{
var new_image=document.getElementById("new_image").value;
var new_title=document.getElementById("new_title").value;
var new_description=document.getElementById("new_description").value;
var parent= (ref.parentElement).parentElement;
var img=parent.firstChild.setAttribute("src",new_image);
var list = document.getElementById(parent.id);
var title=list.getElementsByClassName("titleData")[0];
var desc=list.getElementsByClassName("descData")[0];
title.innerHTML=new_title;
desc.innerHTML=new_description;
ref.value="Edit";
ref.removeAttribute("onclick");
ref.setAttribute("onclick","edit_row("+no+",this)");
document.getElementById("new_image").value="";
document.getElementById("new_title").value="";
document.getElementById("new_description").value="";
}
<div id="wrapper">
<h1 align="center">My Todo App</h1>
<div id="container">
<form id="myForm">
<table align='center' cellspacing=2 cellpadding=5>
<tr>
<th>Image Link</th>
<th>Title</th>
<th>Description</th>
</tr>
<tr>
<td><input type="text" id="new_image"></td>
<td><input type="text" id="new_title"></td>
<td><input type="text" id="new_description"></td>
<td><input type="button" class="add" onclick="add_row();" value="SAVE"></td>
</tr>
</table>
</form>
</div>
<div id="content_container">
<div>
<table align='center' cellspacing=2 cellpadding=5 id="data_table">
</table>
</div>
</div>
</div>
I need to write with innerHTML on a 3 td selectable by user and write the text who write in text area.
function texFil (){
selFi = new Array('td1', 'td2', 'td3');
selFi[0] = document.getElementById('te').value;
selFi[1] = document.getElementById('te').value;
selFi[2] = document.getElementById('te').value;
var i = document.getElementById('fi').value;
document.getElementById("selFi[i]").innerHTML; //this show in the td the text written in textarea by user.
}
this is my script now and this my HTML:
<table align="center" id="ta">
<tr><td id="td1">1.</td></tr>
<tr><td id="td2">2.</td></tr>
<tr><td id="td3">3.</td></tr>
</table><br>
<form id="fo" align="center">
Introduce text:<br><br>
<textarea type="text" id="te" rows="4" cols="50"></textarea><br><br>
Indicate row:<br><br>
<input type="text" id="fi"><br><br>
<input type="button" id="ini" value="Start" onclick="texFil();">
What i'm doing wrong??
EDIT
var cells = ['td1','td2','td3'];
function texFil() {
var indicated = document.getElementById('fi').value;
var index = parseInt(indicated);
if(index > 0)
{
document.getElementById(cells[index -1]).innerHTML = document.getElementById('te').value;
}
}
<table align="center" id="ta">
<tr>
<td id="td1" >1.</td>
</tr>
<tr>
<td id="td2" >2.</td>
</tr>
<tr>
<td id="td3" >3.</td>
</tr>
</table>
<br>
<form id="fo" align="center">
Introduce text:
<br>
<br>
<textarea type="text" id="te" rows="4" cols="50"></textarea>
<br>
<br>Indicate row:
<br>
<br>
<input type="text" id="fi">
<br>
<br>
<input type="button" id="ini" value="Start" onclick="texFil();">
try this.
function texFil() {
selFi = new Array('td1', 'td2', 'td3');
var s = selFi[0] + selFi[1] + selFi[2];
document.getElementById('te').value = s;
var i = document.getElementById('fi').value;
document.getElementById("td1").innerHTML;
}
I am building an order form with PHP and MySQL.
The PHP Form has an input box where the user types in a product code. In the event that the user does not know the product code, I want them to click on an image or button next to the input box, which opens a popup with a list of all product codes. they can then click on the product they want and the product code is passed from the popup to the input box on that table row.
I have the code of my page below and the image of the page it creates so you can get a feel for what I am wanting to acheive.
parent page
<table border=0 id="hor-minimalist-a">
<tr>
<th valign=bottom>KVI</th>
<th valign=bottom>PACK CODE</th>
<th valign=bottom width=250>DESCRIPTION</th>
<th valign=bottom width=40>WHSE</th>
<th valign=bottom width=25>SU</th>
</tr>
<tr id="r1">
<td>
<input type=checkbox name=kvi1 id=kvi1 value=1>
</td>
<td>
<input size=10 type=number id=sku1 name=sku1 onchange="showUser(1, this.value)">
<input type="button" name="choice" onClick="window.open('sku.php','popuppage','width=400,toolbar=1,resizable=1,scrollbars=yes,height=400,top=100,left=100');" value="?">
</td>
<td>
<div align="left" id="txtHint1"> </div>
</td>
<td>
<div align="left" id="whse1"> </div>
</td>
<td>
<div align="left" id="su1"> </div>
</td>
</tr>
<tr id="r2">
<td>
<input type=checkbox name=kvi2 id=kvi2 value=2>
</td>
<td>
<input size=10 type=number id=sku2 name=sku2 onchange="showUser(2, this.value)"><img src=q.png>
</td>
<td>
<div align="left" id="txtHint2"> </div>
</td>
<td>
<div align="left" id="whse2"> </div>
</td>
<td valign=bottom>
<div align="left" id="su2"> </div>
</td>
</tr>
<tr id="r3">
<td>
<input type=checkbox name=kvi3 id=kvi3 value=3>
</td>
<td>
<input size=10 type=number id=sku3 name=sku3 onchange="showUser(3, this.value)"><img src=q.png>
</td>
<td>
<div align="left" id="txtHint3"> </div>
</td>
<td>
<div align="left" id="whse3"> </div>
</td>
<td>
<div align="left" id="su3"> </div>
</td>
</tr>
<tr id="r4">
<td>
<input type=checkbox name=kvi4 id=kvi4 value=4>
</td>
<td>
<input size=10 type=number id=sku4 name=sku4 onchange="showUser(4, this.value)"><img src=q.png>
</td>
<td>
<div align="left" id="txtHint4"> </div>
</td>
<td>
<div align="left" id="whse4"> </div>
</td>
<td>
<div align="left" id="su4"> </div>
</td>
</tr>
</table>
</form>
the popup page code and image is below:
<?
$con = mysql_connect('localhost', 'dbuser', 'dbpass');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("databasename", $con);
$skusql="select packcode,category,description,grouping,packconfig,sellingunits,eottpoints from skudata order by category, packcode";
$resultsku=mysql_query($skusql);
?>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function sendValue (s){
var selvalue = s.value;
window.opener.document.getElementById('details').value = selvalue;
window.close();
}
// End -->
</script>
<form name="selectform">
<table border=0 width=1000 id="hor-minimalist-a">
<tr>
<th>Pack Code</th>
<th> </th>
<th>Category</th>
<th>Product Description</th>
<th>Grouping</th>
<th>Pack Config</th>
<th>SU</th>
<th>Points</th>
</tr>
<?php
while($rows=mysql_fetch_array($resultsku)){
?>
<tr>
<td><input name=details size=5 value="<?php echo $rows['packcode']; ?>"></td>
<td><input type=button value="Select" onClick="sendValue(this.form.details);"</td>
<td><?php echo $rows['category']; ?></td>
<td><center><?php echo $rows['description']; ?></td>
<td><center><?php echo $rows['grouping']; ?></td>
<td><center><?php echo $rows['packconfig']; ?></td>
<td><center><?php echo $rows['sellingunits']; ?></td>
<td><center><?php echo $rows['eottpoints']; ?></td>
</tr>
<?php
}
?>
</table>
I am trying to pass the value of the product code from the selected popup window row, to the parent window input box for 'pack code'
I was trying to adapt a script I came across but am not pulling it off. Any help appreciated as always!
Regards,
Ryan
UPDATE TO QUESTION:
PARENT PAGE:
<html>
<head>
<title>Unilever Sales Portal</title>
<style>
#import url("style.css");
</style>
<script type="text/javascript">
function showUser(userNumber, str)
{
if (str=="")
{
document.getElementById("txtHint" + userNumber).innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//document.getElementById("txtHint" + userNumber).innerHTML=xmlhttp.responseText;
var responseText = xmlhttp.responseText;
var description = responseText;
var warehouse = "";
var sellingUnits = "";
if (responseText.indexOf("NOT A VALID") == -1)
{
description = responseText.substring(12, responseText.indexOf(",Warehouse:"));
warehouse = responseText.substring(responseText.indexOf(",Warehouse:")+11, responseText.indexOf(",SellingUnits:"));
sellingUnits = responseText.substring(responseText.indexOf(",SellingUnits:")+15);
}
document.getElementById("whse" + userNumber).innerHTML = warehouse;
document.getElementById("txtHint" + userNumber).innerHTML = description;
document.getElementById("su" + userNumber).innerHTML = sellingUnits;
}
}
xmlhttp.open("GET","getdata1.php?q="+str,true);
xmlhttp.send();
}
</script>
<script type="text/javascript">
function selectValue(id)
{
// open popup window and pass field id
window.open('sku.php?id=' + encodeURIComponent(id),'popuppage',
'width=400,toolbar=1,resizable=1,scrollbars=yes,height=400,top=100,left=100');
}
function updateValue(id, value)
{
// this gets called from the popup window and updates the field with a new value
document.getElementById(id).value = value;
}
</script>
</head>
SKU.PHP
<?
$con = mysql_connect('localhost', 'dbuser', 'dbpass');
if (!$con)
{
die('Could not connect to server: ' . mysql_error());
}
$db=mysql_select_db("dbname", $con);
if (!$db)
{
die('Could not connect to DB: ' . mysql_error());
}
$sql="select packcode,category,description,grouping,packconfig,sellingunits,eottpoints from skudata order by category, packcode";
$result=mysql_query($sql);
?>
<script type="text/javascript">
function sendValue(value)
{
var parentId = <?php echo json_encode($_GET['id']); ?>;
window.opener.updateValue(parentId, value);
window.close();
}
</script>
<form name="selectform">
<table border=0 width=1000 id="hor-minimalist-a">
<tr>
<th>Pack Code</th>
<th> </th>
<th>Category</th>
<th>Product Description</th>
<th>Grouping</th>
<th>Pack Config</th>
<th>SU</th>
<th>Points</th>
</tr>
<?php
while($rows=mysql_fetch_array($result)){
?>
<tr>
<td><input name=details size=5 value="<?php echo $rows['packcode']; ?>"></td>
<td><input type=button value="Select" onClick="sendValue(this.form.details);"</td>
<td><?php echo $rows['category']; ?></td>
<td><center><?php echo $rows['description']; ?></td>
<td><center><?php echo $rows['grouping']; ?></td>
<td><center><?php echo $rows['packconfig']; ?></td>
<td><center><?php echo $rows['sellingunits']; ?></td>
<td><center><?php echo $rows['eottpoints']; ?></td>
</tr>
<?php
}
?>
</table>
Here is the images to show the workings.
parent page:
Popup Page:
Parent Page after popup
Thanks again for the help.
Regards,
Ryan
If you want a popup window rather than a <div />, I would suggest the following approach.
In your parent page, you call a small helper method to show the popup window:
<input type="button" name="choice" onClick="selectValue('sku1')" value="?">
Add the following JS methods:
function selectValue(id)
{
// open popup window and pass field id
window.open('sku.php?id=' + encodeURIComponent(id),'popuppage',
'width=400,toolbar=1,resizable=1,scrollbars=yes,height=400,top=100,left=100');
}
function updateValue(id, value)
{
// this gets called from the popup window and updates the field with a new value
document.getElementById(id).value = value;
}
Your sku.php receives the selected field via $_GET['id'] and uses it to construct the parent callback function:
?>
<script type="text/javascript">
function sendValue(value)
{
var parentId = <?php echo json_encode($_GET['id']); ?>;
window.opener.updateValue(parentId, value);
window.close();
}
</script>
For each row in your popup, change code to this:
<td><input type=button value="Select" onClick="sendValue('<?php echo $rows['packcode']; ?>')" /></td>
Following this approach, the popup window doesn't need to know how to update fields in the parent form.
(parent window)
<html>
<script language="javascript">
function openWindow() {
window.open("target.html","_blank","height=200,width=400, status=yes,toolbar=no,menubar=no,location=no");
}
</script>
<body>
<form name=frm>
<input id=text1 type=text>
<input type=button onclick="javascript:openWindow()" value="Open window..">
</form>
</body>
</html>
(child window)
<html>
<script language="javascript">
function changeParent() {
window.opener.document.getElementById('text1').value="Value changed..";
window.close();
}
</script>
<body>
<form>
<input type=button onclick="javascript:changeParent()" value="Change opener's textbox's value..">
</form>
</body>
</html>
http://www.codehappiness.com/post/access-parent-window-from-child-window-or-access-child-window-from-parent-window-using-javascript.aspx
My approach: use a div instead of a pop-up window.
See it working in the jsfiddle here: http://jsfiddle.net/6RE7w/2/
Or save the code below as test.html and try it locally.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.btnChoice').on('click', function(){
$('#divChoices').show()
thefield = $(this).prev()
$('.btnselect').on('click', function(){
theselected = $(this).prev()
thefield.val( theselected.val() )
$('#divChoices').hide()
})
})
$('#divChoices').css({
'border':'2px solid red',
'position':'fixed',
'top':'100',
'left':'200',
'display':'none'
})
});
</script>
</head>
<body>
<div class="divform">
<input type="checkbox" name="kvi1" id="kvi1" value="1">
<label>Field 1: </label>
<input size="10" type="number" id="sku1" name="sku1">
<button id="choice1" class="btnChoice">?</button>
<br>
<input type="checkbox" name="kvi2" id="kvi2" value="2">
<label>Field 2: </label>
<input size="10" type="number" id="sku2" name="sku2">
<button id="choice2" class="btnChoice">?</button>
</div>
<div id="divChoices">
Select something:
<br>
<input size="10" type="number" id="ch1" name="ch1" value="11">
<button id="btnsel1" class="btnselect">Select</button>
<label for="ch1">bla bla bla</label>
<br>
<input size="10" type="number" id="ch2" name="ch2" value="22">
<button id="btnsel2" class="btnselect">Select</button>
<label for="ch2">ble ble ble</label>
</div>
</body>
</html>
clean and simple.
From your code
<input type=button value="Select" onClick="sendValue(this.form.details);"
Im not sure that your this.form.details valid or not.
IF it's valid, have a look in window.opener.document.getElementById('details').value = selvalue;
I can't found an input's id contain details I'm just found only id=sku1 (recommend you to add " like id="sku1").
And from your id it's hardcode. Let's see how to do with dynamic when a child has callback to update some textbox on the parent
Take a look at here.
First page.
<html>
<head>
<script>
function callFromDialog(id,data){ //for callback from the dialog
document.getElementById(id).value = data;
// do some thing other if you want
}
function choose(id){
var URL = "secondPage.html?id=" + id + "&dummy=avoid#";
window.open(URL,"mywindow","menubar=1,resizable=1,width=350,height=250")
}
</script>
</head>
<body>
<input id="tbFirst" type="text" /> <button onclick="choose('tbFirst')">choose</button>
<input id="tbSecond" type="text" /> <button onclick="choose('tbSecond')">choose</button>
</body>
</html>
Look in function choose I'm sent an id of textbox to the popup window (don't forget to add dummy data at last of URL param like &dummy=avoid#)
Popup Page
<html>
<head>
<script>
function goSelect(data){
var idFromCallPage = getUrlVars()["id"];
window.opener.callFromDialog(idFromCallPage,data); //or use //window.opener.document.getElementById(idFromCallPage).value = data;
window.close();
}
function getUrlVars(){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
</script>
</head>
<body>
Car <br />
Food <br />
</body>
</html>
I have add function getUrlVars for get URL param that the parent has pass to child.
Okay, when select data in the popup, for this case it's will call function goSelect
In that function will get URL param to sent back.
And when you need to sent back to the parent just use window.opener and the name of function like window.opener.callFromDialog
By fully is window.opener.callFromDialog(idFromCallPage,data);
Or if you want to use window.opener.document.getElementById(idFromCallPage).value = data; It's ok too.
use:
opener.document.<id of document>.innerHTML = xmlhttp.responseText;