By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,670 Members | 1,516 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,670 IT Pros & Developers. It's quick & easy.

dynamically creating rows + submit fails

P: 60
Hi

In my php code , i dynamically created table rows on button click event.
Each row contain 3 selectboxes, 7 checkboxes . On each click of these elements i need to submit the form and save the data to database. After each submit , i need to display the previous added details (with some checkboxes checked and some others unchecked ..) and one new row for next updation.
Here i need to collect all values submitted in the php page.
There i should able to distinguish each row sets values (with their checkboxes status. on or off). Also , i'm unable to submit the form for newly added rows . Though the action is given as '... e1.onchange = test()...' , it is not working.

One more query,
These rows are added using javascript function, but the values are to be fetched from database. How can i handle this ? Or whether i need to write javascript code using php script. i.e
echo '<script language=javascript>....</script>';


Please go through the code and post your replies.


<html>
<head>
<script language = "JavaScript">

function test()
{
alert("test");
}
function insertRowPHP()

{

var tbl = document.getElementById('tblInsertRowPHP');

var iteration = tbl.tBodies[0].rows.length;

newRow = tbl.tBodies[0].insertRow(-1);
newRow.id = "row" +newRow;


var newCell1 = newRow.insertCell(0);

var el = document.createElement('select');

// el.type = 'text';

el.name = 'selDayparts[]';

el.id = 'selDayparts' + iteration;

el.options[0] = new Option('06-08', '06-08');

el.options[1] = new Option('10-12', '10-12');

el.onchange = "document.form1.submit();";
newCell1.appendChild(el);

var newCell2 = newRow.insertCell(1);

var e2 = document.createElement('select');

e2.name = 'selLocations[]';

e2.id = 'selLocations' + iteration;
e2.options[0] = new Option('Location1', '100,2');

e2.options[1] = new Option('Location2', '101,3');

newCell2.appendChild(e2);



var newCell = newRow.insertCell(2);

newCell.innerHTML = "View";


var newCell3 = newRow.insertCell(3);

var e3 = document.createElement('input');
e3.type = 'checkbox';

e3.name = 'selCheckbox1[]';

e3.id = 'selCheckbox' + iteration;
e3.value = "1";
newCell3.appendChild(e3);


var newCell4 = newRow.insertCell(4);

var e4 = document.createElement('input');
e4.type = 'checkbox';

e4.name = 'selCheckbox2[]';

e4.id = 'selCheckbox' + iteration;
e4.value = "1";

newCell4.appendChild(e4);

var newCell5 = newRow.insertCell(5);

var e5 = document.createElement('input');
e5.type = 'checkbox';

e5.name = 'selCheckbox3[]';

e5.id = 'selCheckbox' + iteration;
e5.value = "1";

newCell5.appendChild(e5);


var newCell6 = newRow.insertCell(6);

var e6 = document.createElement('input');
e6.type = 'checkbox';

e6.name = 'selCheckbox4[]';

e6.id = 'selCheckbox' + iteration;
e6.value = "1";

newCell6.appendChild(e6);


var newCell7 = newRow.insertCell(7);

var e7 = document.createElement('input');
e7.type = 'checkbox';

e7.name = 'selCheckbox5[]';

e7.id = 'selCheckbox' + iteration;
e7.value = "1";

newCell7.appendChild(e7);


var newCell8 = newRow.insertCell(8);

var e8 = document.createElement('input');
e8.type = 'checkbox';

e8.name = 'selCheckbox6[]';

e8.id = 'selCheckbox' + iteration;
e8.value = "1";

newCell8.appendChild(e8);


var newCell9 = newRow.insertCell(9);

var e9 = document.createElement('input');
e9.type = 'checkbox';

e9.name = 'selCheckbox7[]';

e9.id = 'selCheckbox' + iteration;
e9.value = "1";


newCell9.appendChild(e9);

}

function deleteAllRows()

{

var tbl = document.getElementById('tblInsertRowPHP');

var lastRow = tbl.rows.length;

if (lastRow > 2) tbl.deleteRow(lastRow - 1);

}

</script>
<title></title>
<body>
<form name = "form1" method = "post" action = "getSelectedvalues.php">
<input type = "button" value = "Add" onclick = "insertRowPHP()">
<input type = "button" value = "Remove" onclick = "deleteAllRows()">
<table border = "1" id = "tblInsertRowPHP">
<tr><td>DayPart</td><td>Location</td><td>view</td><td>sun</td><td>Mon</td><td>Tue</td>
<td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr>
<tr>

<td>
<select name = "selDayparts" onchange = "document.form1.submit()">
<option value = "06-08">06-08</option>
<option value = "10-12">10-12</option>
</select>
</td>

<td>
<select name = "selLocations" onchange = "document.form1.submit()">
<option value = "100,2">Location1</option>
<option value = "101,3">Location2</option>
</select>
</td>

<td>view</td>
<td><input type = "checkbox" name = "CheckboxSun"></td>
<td><input type = "checkbox" name = "CheckboxMon"></td>
<td><input type = "checkbox" name = "CheckboxTue"></td>
<td><input type = "checkbox" name = "CheckboxWed"></td>
<td><input type = "checkbox" name = "CheckboxThu"></td>
<td><input type = "checkbox" name = "CheckboxFri"></td>
<td><input type = "checkbox" name = "CheckboxSat"></td>
</tr>
</table>
<input type = "submit" value = "Submit">
</form>
</body>
</html>
************************************************** **************************

Thanks in advance
somaskarthic
Sep 13 '06 #1
Share this Question
Share on Google+
2 Replies


bevort
P: 53
Hi

In my php code , i dynamically created table rows on button click event.
Each row contain 3 selectboxes, 7 checkboxes . On each click of these elements i need to submit the form and save the data to database. After each submit , i need to display the previous added details (with some checkboxes checked and some others unchecked ..) and one new row for next updation.
Here i need to collect all values submitted in the php page.
There i should able to distinguish each row sets values (with their checkboxes status. on or off). Also , i'm unable to submit the form for newly added rows . Though the action is given as '... e1.onchange = test()...' , it is not working.

One more query,
These rows are added using javascript function, but the values are to be fetched from database. How can i handle this ? Or whether i need to write javascript code using php script. i.e
echo '<script language=javascript>....</script>';


Please go through the code and post your replies.


<html>
<head>
<script language = "JavaScript">

function test()
{
alert("test");
}
function insertRowPHP()

{

var tbl = document.getElementById('tblInsertRowPHP');

var iteration = tbl.tBodies[0].rows.length;

newRow = tbl.tBodies[0].insertRow(-1);
newRow.id = "row" +newRow;


var newCell1 = newRow.insertCell(0);

var el = document.createElement('select');

// el.type = 'text';

el.name = 'selDayparts[]';

el.id = 'selDayparts' + iteration;

el.options[0] = new Option('06-08', '06-08');

el.options[1] = new Option('10-12', '10-12');

el.onchange = "document.form1.submit();";
newCell1.appendChild(el);

var newCell2 = newRow.insertCell(1);

var e2 = document.createElement('select');

e2.name = 'selLocations[]';

e2.id = 'selLocations' + iteration;
e2.options[0] = new Option('Location1', '100,2');

e2.options[1] = new Option('Location2', '101,3');

newCell2.appendChild(e2);



var newCell = newRow.insertCell(2);

newCell.innerHTML = "View";


var newCell3 = newRow.insertCell(3);

var e3 = document.createElement('input');
e3.type = 'checkbox';

e3.name = 'selCheckbox1[]';

e3.id = 'selCheckbox' + iteration;
e3.value = "1";
newCell3.appendChild(e3);


var newCell4 = newRow.insertCell(4);

var e4 = document.createElement('input');
e4.type = 'checkbox';

e4.name = 'selCheckbox2[]';

e4.id = 'selCheckbox' + iteration;
e4.value = "1";

newCell4.appendChild(e4);

var newCell5 = newRow.insertCell(5);

var e5 = document.createElement('input');
e5.type = 'checkbox';

e5.name = 'selCheckbox3[]';

e5.id = 'selCheckbox' + iteration;
e5.value = "1";

newCell5.appendChild(e5);


var newCell6 = newRow.insertCell(6);

var e6 = document.createElement('input');
e6.type = 'checkbox';

e6.name = 'selCheckbox4[]';

e6.id = 'selCheckbox' + iteration;
e6.value = "1";

newCell6.appendChild(e6);


var newCell7 = newRow.insertCell(7);

var e7 = document.createElement('input');
e7.type = 'checkbox';

e7.name = 'selCheckbox5[]';

e7.id = 'selCheckbox' + iteration;
e7.value = "1";

newCell7.appendChild(e7);


var newCell8 = newRow.insertCell(8);

var e8 = document.createElement('input');
e8.type = 'checkbox';

e8.name = 'selCheckbox6[]';

e8.id = 'selCheckbox' + iteration;
e8.value = "1";

newCell8.appendChild(e8);


var newCell9 = newRow.insertCell(9);

var e9 = document.createElement('input');
e9.type = 'checkbox';

e9.name = 'selCheckbox7[]';

e9.id = 'selCheckbox' + iteration;
e9.value = "1";


newCell9.appendChild(e9);

}

function deleteAllRows()

{

var tbl = document.getElementById('tblInsertRowPHP');

var lastRow = tbl.rows.length;

if (lastRow > 2) tbl.deleteRow(lastRow - 1);

}

</script>
<title></title>
<body>
<form name = "form1" method = "post" action = "getSelectedvalues.php">
<input type = "button" value = "Add" onclick = "insertRowPHP()">
<input type = "button" value = "Remove" onclick = "deleteAllRows()">
<table border = "1" id = "tblInsertRowPHP">
<tr><td>DayPart</td><td>Location</td><td>view</td><td>sun</td><td>Mon</td><td>Tue</td>
<td>Wed</td><td>Thu</td><td>Fri</td><td>Sat</td></tr>
<tr>

<td>
<select name = "selDayparts" onchange = "document.form1.submit()">
<option value = "06-08">06-08</option>
<option value = "10-12">10-12</option>
</select>
</td>

<td>
<select name = "selLocations" onchange = "document.form1.submit()">
<option value = "100,2">Location1</option>
<option value = "101,3">Location2</option>
</select>
</td>

<td>view</td>
<td><input type = "checkbox" name = "CheckboxSun"></td>
<td><input type = "checkbox" name = "CheckboxMon"></td>
<td><input type = "checkbox" name = "CheckboxTue"></td>
<td><input type = "checkbox" name = "CheckboxWed"></td>
<td><input type = "checkbox" name = "CheckboxThu"></td>
<td><input type = "checkbox" name = "CheckboxFri"></td>
<td><input type = "checkbox" name = "CheckboxSat"></td>
</tr>
</table>
<input type = "submit" value = "Submit">
</form>
</body>
</html>
************************************************** **************************

Thanks in advance
somaskarthic

Where is the PHP code?
Why the square brackets?

You can not get data from a database using Javascript. If you have created some rows using javascript (on the client, not on the server) you have to submit the form before PHP can fill the rows with your data.

As sad above Where is your PHP code and SQL

If you want al the fields getting into the database use names as identifiers not arrays
Sep 14 '06 #2

P: 60
Hi
I posted query about dynamically generating php code.
Sorry for the inconvenience . I didn't given you the php code. Its just javascript code which dynamically create rows on button click event. I'm not using javascript to get data from database. I'm fetching this using php code. I used square brackets to declare it as array.

Hope you understand my problem. Or else , i explain here clearly be patience to read this.

In my design i'm having a row

-----------------------------------------------------------------------------------------------------------------
|selectbox1 selectbox2 chkbox1 chkbox2 ... chkbox7 selectbox3 selectbox4 |
-----------------------------------------------------------------------------------------------------------------
----------------------- --------------------
| Save and Add | | Save Button |
---------------------- -------------------

Initially on pageload , only one row is available. User can select some values
in the selectbox. All the selectboxes submit the form call self php page in onchange event. If a value is changed in one selectbox , values in the other selectboxes also changed. These values are retrieved from postgresql database. Similarly all checkboxes has to submit the form and call self php page and the row values are updated. If save button is clicked , i'm storing this row values in to the postgres database. If 'Save and Add' button is clicked the page is (self php page) submitted , row values are stored to the database . Now the page should display the previously added rows with same set of data and one new row for further updation.

I hope , now you understand my requirement. I'm struggling with getting the submitted values ? I don't how to implement this ?
Please guide me the better way to start this on javascript and php side .
Hope you reply soon

Thanks
somaskarthic
Where is the PHP code?
Why the square brackets?

You can not get data from a database using Javascript. If you have created some rows using javascript (on the client, not on the server) you have to submit the form before PHP can fill the rows with your data.

As sad above Where is your PHP code and SQL

If you want al the fields getting into the database use names as identifiers not arrays
Sep 15 '06 #3

Post your reply

Sign in to post your reply or Sign up for a free account.