Post the new aspect of your code, please.
Post the new aspect of your code, please.
Hi Kor, not much has changed code wise. Here is what I have.Quote:
Originally Posted by Kor
Where I have Pick# I would like to somehow display the current rows number. So if it is the first row it would display 1, if a user inserts another selection through the addDiv() function it would be pick #2, and so on... I dont know of a way I can track how many rows have been added and at the same time output it via PHP?Code:<script type="text/javascript">
var clone;
function cloneDiv(){
var divs=document.getElementById('myDiv').getElementsByTagName('div');
clone=divs[divs.length-1].cloneNode(true);
}
function addDiv(){
<?php $count+=1; ?>
var root=document.getElementById('myDiv');
var divs=root.getElementsByTagName('div');
root.appendChild(clone);
clone=divs[divs.length-1].cloneNode(true);
}
onload=cloneDiv
function madeSelection(){
var names=['team[]','profile[]'], n, sel, s, i, j=0;
while(n=names[j++]){
sel=document.getElementsByName(n); i=0;
while(s=sel[i++]){
if(s.selectedIndex==0){alert('Please Choose Something');s.focus();return false;}
}
}
}
</script>
</head>
<body>
<form id="form-expense" action="<?php $_SERVER['PHP_SELF']?>" method="post" onsubmit="return madeSelection(this)">
<div id="myDiv">
<div>
<br>
<table border="1" cellpadding="0" cellspacing="0">
<tr align="center">
<td>Pick #</td>
<td>Team</td>
<td>Player</td>
<td>Pick info (Optional, how team acquired pick, etc...)</td>
</tr>
<tr aligin="center">
<td><?php echo $count; ?></td>
<input type="hidden" name="id[]" />
<td align="center"><select name="team[]">
<?php
echo '<option selected value="Team">Team Name</option>';
echo $optionteams;
?>
</select></td>
<td align="center">
<select name="player[]">
<?php
echo '<option selected value="Player">Player</option>';
echo $optionprofiles;
?>
</select></td>
<p align="center"><input name="button" type="button" value="Insert another selection" onclick="addDiv()">
<input name="submit" type="submit" value="Submit">
The HTML is incomplete (tags are not close, etc...) Something is missing. It is important to see the complete HTML code.
Well it is integrated with PHP. I will post the entire page, I thought only the above would be relevant, sorry. I am not sure what im looking for is possible, as the PHP is server side. I would just like a way to output the current row number and increment it when a users adds another row of elements. I have tried with PHP to no success.Quote:
Originally Posted by Kor
Code:<script type="text/javascript">
var clone;
function cloneDiv(){
var divs=document.getElementById('myDiv').getElementsByTagName('div');
clone=divs[divs.length-1].cloneNode(true);
}
function addDiv(){
<?php $count+=1; ?>
var root=document.getElementById('myDiv');
var divs=root.getElementsByTagName('div');
root.appendChild(clone);
clone=divs[divs.length-1].cloneNode(true);
}
onload=cloneDiv
function madeSelection(){
var names=['team[]','profile[]'], n, sel, s, i, j=0;
while(n=names[j++]){
sel=document.getElementsByName(n); i=0;
while(s=sel[i++]){
if(s.selectedIndex==0){alert('Please Choose Something');s.focus();return false;}
}
}
}
</script>
<?php
include('connect.php');
global $user;
$userid = $user->uid;
$getteams = @mysql_query("SELECT * FROM teams order by name ASC");
if (!$getteams) { exit('<p>Error performing query: ' . mysql_error() . '</p>'); }
while ($rowgetteams = mysql_fetch_array($getteams)) {
$optionteams .= '<option value="' .$rowgetteams['id']. '">' .$rowgetteams['name']. '</option>'; }
$getprofiles = @mysql_query("SELECT * FROM profiles order by name ASC");
if (!$getprofiles) { exit('<p>Error performing query: ' . mysql_error() . '</p>'); }
while ($rowgetprofiles = mysql_fetch_array($getprofiles)) {
$optionprofiles .= '<option value="' .$rowgetprofiles['id']. '">' .$rowgetprofiles['name']. '</option>'; }
?>
</head>
<body>
<form id="form-expense" action="<?php $_SERVER['PHP_SELF']?>" method="post" onsubmit="return madeSelection(this)">
<div id="myDiv">
<div>
<br>
<table border="1" cellpadding="0" cellspacing="0">
<tr align="center">
<td>Pick #</td>
<td>Team</td>
<td>Player</td>
<td>Pick info (Optional, how team acquired pick, etc...)</td>
</tr>
<tr aligin="center">
<td><?php echo $count; ?></td>
<input type="hidden" name="id[]" />
<td align="center"><select name="team[]">
<?php
echo '<option selected value="Team">Team Name</option>';
echo $optionteams;
?>
</select></td>
<td align="center">
<select name="player[]">
<?php
echo '<option selected value="Player">Player</option>';
echo $optionprofiles;
?>
</select></td>
<td><textarea cols="50" rows="5" name="pick_info[]" /></textarea></td>
</tr>
<tr><td colspan="4">Reasoning behind pick<br><textarea cols="90" rows="10" name="description[]" /></textarea></td></tr>
</table>
</div>
</div>
<br><br>
<p align="center"><input name="button" type="button" value="Insert another selection" onclick="addDiv()">
<input name="submit" type="submit" value="Submit">
</form>
</body>
</html>
<?php
if (isset($_POST['submit'])) {
//Import into database
$sql = 'INSERT INTO table SET';
$sql .= ' user = \'' . $userid. '\'';
mysql_query("SET autocommit = 0") or die (mysql_error());
mysql_query("START TRANSACTION") or die (mysql_error());
mysql_query("BEGIN") or die (mysql_error());
mysql_query($sql) or die (mysql_error());
$getmockid = mysql_insert_id();
foreach ($_POST['id'] as $key => $value)
{
$pick_number=$key+1;
$id = $_POST['id'][$key];
$player = $_POST['player'][$key];
$team = $_POST['team'][$key];
$description = nl2br($_POST['description'][$key]);
if ($_POST['pick_info'][$key]) {
$pickinfo=nl2br($_POST['pick_info'][$key]); }
//Import into database
$sql2 = 'INSERT INTO table_detail SET';
$sql2 .= ' player_id = \'' . $player . '\'';
$sql2 .= ', team_id = \'' . $team . '\'';
$sql2 .= ', mock_id = \'' . $getmockid . '\'';
$sql2 .= ', pick_number = \'' . $pick_number . '\'';
$sql2 .= ', comments = \'' . $description . '\'';
if ($pickinfo) { $sql2 .= ', pick_info = \'' . $pick_info . '\''; }
// mysql_query($sql2) or die(mysql_error());
if(!mysql_query($sql2)) {
echo '<p>Error performing query: ' . mysql_error() . '</p>';
mysql_query("ROLLBACK"); die; }
else { mysql_query("COMMIT"); echo "RECORDS ADDED!!!"; }
}
}
Would be ok to send, on submit, the number of rows as a hidden input's value?
Yes any way to get it would be fine, I would also need to be able to output the value to page though.Quote:
Originally Posted by Kor
javascript can not interfere with php, at least not the way you tried. Is this what you want?
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var clone;
function cloneDiv(){
var divs=document.getElementById('myDiv').getElementsByTagName('div');
clone=divs[divs.length-1].cloneNode(true);
}
function addDiv(){
var root=document.getElementById('myDiv');
var divs=root.getElementsByTagName('div');
var nr=root.getElementsByTagName('table').length+1;
clone.getElementsByTagName('td')[4].firstChild.nodeValue=nr;
root.appendChild(clone);
clone=divs[divs.length-1].cloneNode(true);
}
onload=cloneDiv
function madeSelection(){
var names=['team[]','profile[]'], n, sel, s, i, j=0;
while(n=names[j++]){
sel=document.getElementsByName(n); i=0;
while(s=sel[i++]){
if(s.selectedIndex==0){alert('Please Choose Something');s.focus();return false;}
}
}
}
</script>
</head>
<body>
<form id="form-expense" action="<?php $_SERVER['PHP_SELF']?>" method="post" onsubmit="return madeSelection(this)">
<div id="myDiv">
<div>
<br>
<table border="1" cellpadding="0" cellspacing="0">
<tr align="center">
<td>Pick #</td>
<td>Team</td>
<td>Player</td>
<td>Pick info (Optional, how team acquired pick, etc...)</td>
</tr>
<tr aligin="center">
<td>1</td>
<input type="hidden" name="id[]" />
<td align="center"><select name="team[]">
<?php
echo '<option selected value="Team">Team Name</option>';
echo $optionteams;
?>
</select></td>
<td align="center">
<select name="player[]">
<?php
echo '<option selected value="Player">Player</option>';
echo $optionprofiles;
?>
</select></td>
<td><textarea cols="50" rows="5" name="pick_info[]" /></textarea></td>
</tr>
<tr><td colspan="4">Reasoning behind pick<br><textarea cols="90" rows="10" name="description[]" /></textarea></td></tr>
</table>
</div>
</div>
<br><br>
<p align="center"><input name="button" type="button" value="Insert another selection" onclick="addDiv()">
<input name="submit" type="submit" value="Submit">
</form>
</body>
</html>
Wow, yes it is exactly what I want. I knew the PHP portion wasnt going to work, and messed around with some java but nothing close to what you did!Quote:
Originally Posted by Kor
It works great, but how exactly are you picking up the value in the javascript? I see your working with the Table, then somehow you get the proper <td>? What does the [4] represent? Sorry for the questions just fascinated..
The 4 is the 4th <td> starting at 0. However, what in the code makes the value auto increment?
Each time when you append the clone, you add a new TABLE element. I have simply counted the tables each time and have added 1:Quote:
Originally Posted by tdob
I could have also counted the DIV elements of the rootCode:var nr=root.getElementsByTagName('table').length+1;
Hi
i have read that posts, and found your code really interesting, for adding rows.
I have added it into my code, but i got one problem.
What i am trying to do, is that i want a calculation, and a possibility to add more calculation.
The HTML code looks like that:
The javascript code for calculation i was using before adding rows.Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Izračun</title>
<link rel="stylesheet" type="text/css" href="izracun.css" />
<SCRIPT language="JavaScript" SRC="izracun2.js"></SCRIPT>
<SCRIPT language="JavaScript" SRC="izracun.js"></SCRIPT>
</head>
<body>
<div id="glava"><script type="text/javascript">myFunction ()</script>
<!-- Meni- gumbi-->
<div id="sb_content"><br><br>
<h3>Informativni izračun</h3>
<form name="foto" method="post">
<table>
<tr class="table_row">
<td width="50px" class="labelcell_prvi"><label for="state">Izdelki:</label></td>
<td class="fieldcell">
<select name="vrsta[stevilka]" onchange="Kvadratura();">
<option value="0">- - - - - - Izberi - - - - - - -</option>
<option value="1">Fototapeta</option>
<option value="2">Fototapeta Stucco</option>
<option value="3">Grafika za steklo</option>
<option value="4">Slikarsko platno</option>
<option value="5">Samolepilna grafika</option>
</select>
</td> <td class="space"> </td>
<td class="labelcell_prvi"><label for="name">Količina:</label></td>
<td class="labelcell"><input class="mere" value="1" type="text" name="kolicina[stevilka]" onblur="Kvadratura()"/> kom</td>
<td class="space"> </td>
<td class="labelcell_prvi"><label for="name">Širina:</label></td>
<td class="labelcell"><input class="mere" type="text" name="sirina[stevilka]" onblur="Kvadratura()"/> cm</td>
<td class="space"> </td>
<td class="labelcell_prvi"><label for="address1">Višina:</label></td>
<td class="labelcell"><input class="mere" type="text" name="visina[stevilka]" onBlur="Kvadratura();"/> cm</td>
<td class="space"> </td>
<td class="labelcell_prvi"><label for="address1">Kvadratura:</label></td>
<td class="labelcell"><input class="fieldcell2" type="text" name="kvadratura[stevilka]" size="8"/> m2</td>
<td class="space"> </td>
<td class="labelcell_prvi"><label for="address1"></label></td>
<td class="labelcell" colspan="2"><label for="address1">+ 25,00 € Priprava za tisk</label></td>
<td class="space"> </td>
<td class="labelcell_prvi"><label for="address1">Izračun:</label></td>
<td class="labelcell"><input class="fieldcell3" type="text" name="znesek[stevilka]" size="8"/> €</TD>
<td width="286"><input name="button" type="button" value="+" onclick="addRow(this.parentNode.parentNode)"></td>
</tr>
</table>
</form>
<p class="dogodki"><br><br><br>
<b>Legenda:</b>
<br><br>
<b>Fototapete</b> <br>
Tiskane na poseben papir, ki se lepi na gladke stene(omet, knauf, iverica) na enak način in z lepilom kot navadne tapete.
Papir dopušča čiščenje z mehko vlažno krpo brez agresivnih čistil. Fototapete niso primerne za neporozne površine: iveral. steklo ipd. in za zunanjo uporabo.<br>
Obstoj tapet v notranjih prostorih je preko 20 let.Odsvetujemo uporabo v vlažnih prostorih.<br><br><br>
<b>Fototapete - Stucco</b> <br>
Tiskane so na poseben strukturiran papir, ki daje bogatejši videz kot običajni papir.
Na zid se, prav tako kot običajno lepijo z lepilom za tepete. <br>
Priporočamo lepilo za težke tapete.
Posamezni trakovi se lepijo brez prekrivanj - na stik<br><br><br>
<b>Grafika za steklo</b> <br>
Najboljša rešitev za vlažne prostore in kjer je potrebno pogostejše čiščenje: kuhinje, kopalnice ipd..
Grafika je tiskana na posebno folijo, ki omogoča lepljenje na hrbtno stran stekla.<br>
Obstojnost je preko 25 let in v tem je največja prednost pred direktnim tiskom na steklo.
Poleg tega omogoča popolnoma neprosojno izvedbo, kar je zelo pomembno pri lepljenju s silikoni.
Možne so tudi različno prosojne in obojestransko vidne izvedbe za vrata ali pregradne stene.<br><br><br>
<b>Slikarsko platno</b> <br>
Fotopovečave na slikarsko platno dajejo poseben, bogatejši vtis zaradi strukture materiala. Platno je naeto na podokvir tako, da potiskani del pokriva tudi vse zunanje robove.
Uporabne so za dekoracije prostorov kot samostojne slike na steni.<br>
So tudi zelo primerno in lepo darilo.<br><br><br>
<b>Samolepilna grafika</b> <br>
Tiskana na samolepilno folijo, ki se lepi na vse neporozne ravne površine (omare, PVC plošče ipd.) na katerih ni možna oz. priporočljiva uporaba fototapet.
Za površine, ki so bolj izpostavljene dotikom ipd.(omare, vrata, ...), priporočamo dodatno zaščitno plastifikacijo.<br>
Obstojnost: Zunaj cca 5 let, v prostorih preko 20 let.<br><br><br>
</p>
</body><!--end of body-->
</html>
Code:function Kvadratura()
{
foto.kvadratura.value = foto.sirina.value * foto.visina.value / 10000;
if (foto.vrsta.value == 1)
{
if (foto.kvadratura.value < 3)
{foto.znesek.value = (( 32 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
if ((foto.kvadratura.value >= 3) && (foto.kvadratura.value < 12))
{foto.znesek.value = (( 28 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
if ((foto.kvadratura.value >= 12) && (foto.kvadratura.value < 30))
{foto.znesek.value = (( 25 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
if (foto.kvadratura.value >= 30)
{foto.znesek.value = (( 22 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
}
else if (foto.vrsta.value == 2)
{
if (foto.kvadratura.value < 3)
{foto.znesek.value = (( 39 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
if ((foto.kvadratura.value >= 3) && (foto.kvadratura.value < 12))
{foto.znesek.value = (( 35 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
if ((foto.kvadratura.value >= 12) && (foto.kvadratura.value < 30))
{foto.znesek.value = (( 32 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
if (foto.kvadratura.value >= 30)
{foto.znesek.value = (( 29 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
}
else if (foto.vrsta.value == 3) {foto.znesek.value = (( 96 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
else if (foto.vrsta.value == 4) {foto.znesek.value = (( 120 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
else if (foto.vrsta.value == 5) {foto.znesek.value = ((54.5 * foto.kvadratura.value) * foto.kolicina.value) + 25;}
}
And your code:
Code:function addRow(r){
var root = r.parentNode;//the root
var allRows = root.getElementsByTagName('tr');//the rows' collection
var cRow = allRows[0].cloneNode(true)//the clone of the 1st row
var cInp = cRow.getElementsByTagName('input');//the inputs' collection of the 1st row
for(var i=0;i<cInp.length;i++){//changes the inputs' names (indexes the names)
cInp[i].setAttribute('name',cInp[i].getAttribute('name')+'_'+(allRows.length+1))
}
var cSel = cRow.getElementsByTagName('select')[0];
cSel.setAttribute('name',cSel.getAttribute('name')+'_'+(allRows.length+1));//change the selecet's name
root.appendChild(cRow);//appends the cloned row as a new row
}
function shownames(){
var allInp=document.getElementsByTagName('input');
for(var i=0;i<allInp.length;i++){
alert(allInp[i].name)
}
}
I am trying to connect that 2 codes, so if i add one line than the calculation will calculate second line appart too. I have tried but it just calculates first line, and stops at second line or any line that is next.
I can't get this working in IE7 but it works fine in other browsers. Is this a bug with IE7??
Here is my function..
Code:function addRow(r){
var root = document.getElementById('tblViewFeed');//the root
var allRows = root.getElementsByTagName('tr');//the rows' collection
var cRow = allRows[1].cloneNode(true)//the clone of the 1st row
var cInp = cRow.getElementsByTagName('input');//the inputs' collection of the 1st row
for(var i=0;i<cInp.length;i++){//changes the inputs' names (indexes the names)
cInp[i].setAttribute('name',cInp[i].getAttribute('name')+'_'+(allRows.length+1))
}
var cSel = cRow.getElementsByTagName('select')[0];
cSel.setAttribute('name',cSel.getAttribute('name')+'_'+(allRows.length+1));//change the selecet's name
root.appendChild(cRow);//appends the cloned row as a new row
}
What is document.getElementById('tblViewFeed') ? A TABLE or a TBODY element?
Hi,
i have almost the some script but different problem.
a friend of me has made a script for me (now he is on holiday for 3 weeks)
i wonder if someone can help or assist me how to make it the way i want.
Question:HTML Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Request form</title>
<link href="main.css" type="text/css" rel="stylesheet">
</head>
<script>
function add_formrow(){
if (!this.table_formcontainer)
this.table_formcontainer = document.getElementById("table_formcontainer");
if (!this.table_formcontainer)
return;
var new_row = table_formcontainer.insertRow(-1);
var new_cell1 = new_row.insertCell(0);
var new_cell2 = new_row.insertCell(1);
var new_cell3 = new_row.insertCell(2);
var new_input1 = document.createElement("input");
new_input1.type = "text";
new_cell1.appendChild(new_input1);
var new_input2 = document.createElement("input");
new_input2.type = "text";
new_cell2.appendChild(new_input2);
var new_input3 = document.createElement("select");
new_input3.name="transport[]";
var options = ["No", "Bike", "Car", "Motorcycle", "Public transport"];
for (var i = 0; i < options.length; i++)
{
var option = document.createElement("option");
option.value = options[i];
option.text= options[i];
try
{
new_input3.add(option, null);
}
catch(error)
{
new_input3.add(option);
}
}
new_cell3.appendChild(new_input3);
}
</script>
<body>
<div id="credit"><b>T e s t</b></div>
<br>
<form method="post" action="" name="data">
<fieldset> <legend>
<font color="blue"><b>Request form</b></font></legend><br>
<table id="table_formcontainer">
<tr>
<td width="10">Name</td> <td>Age<td>Transport<td> </td> </td>
</tr>
</table>
<table>
<tr>
<td width="500" align="right">[ b<a href="#" onclick='add_formrow();'>+</a> ]</td>
</tr>
<tr>
<td width="10"><br><input type="submit" name="submit" value=" S e n d "> <td> </td> <td> </td> <td> </td></td>
</tr>
</table>
</form></fieldset>
<br>
</body>
</html>
1. how to make one extra button to deleterow()
2. how to send it with php
thanks in advance
