Get value of text box, print out x times

[dflynn]

Alright, here's my predicament.

I'm making an application using php and mySQL. I need to allow users to create tables in the database.
It would be easy enough I think if it were a set number of rows but they will need to create anywhere from 2 - 20 rows in the table.

My thinking is to use Javascript to get the number of rows from an input box to avoid reloading the page.

Right now I have this: http://maritime.nnjoi.com/admin.php?page=addtable

So they input the name of the table, then how many rows they need.
Right now the Javascript displays an alert to tell you what you inputed.

I need to be able to grab that value and use it to echo out a script that many amount of times.
a) is it possible to do without reloading the page
b) any ideas on the php to accomplish this?


Thanks.

[dflynn]

Ok I changed it up a bit and this is my code. It's not working, I hope I'm on the right track.

Code: Select all

<form  id='mytable' name="tablemaker" method="post" action="submit.php?page=tablesubmit" onsubmit='return validate(this)'><input type=hidden name=todo value=post>

<table border=0 cellpadding="2px" cellspacing="2px" align="left" width="500px">

<tr><td>Table Name:</td><td><input name="tablename" type="text" size="30" maxlength="100" /></td></tr>
<tr><td>Number of Rows:</td><td><input name="numrows" type="text" size="10" maxlength="2" /> <button TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)">
Add Row</button></td></tr>
<tr><td>
<script type="text/javascript">
function testResults (form) {
    var numba = form.rownum.value;
    for (i = 0; i < numba; i++){
      document.write("Row" + i);
      document.write("<br />");
   }
</script>
</td><td></td></tr>
</table>
</form>


any ideas?

[rangana]

I'm confused. You have to elements on your form, add table and number of rows.

What are you wanting to do?

You want to add [n] rows to [n] table? MySql job?

Or something else...?

Also, you should not rely much on JS for this. You should create a manual copy, then later time, once the manual is stable, proceed to AJAX. I could be of help.

[dflynn]

Thanks for the reply,
My original thinking is to make it so the user can enter a value [n] and click the button then have [n] input areas appear that they could then fill out, hit submit, and it would be put into a MySQL command at the end.

[rangana]

Your goal is what? What's the purpose of the table field?

I'm a bit confused.

Seeing the script you've written, you're just wanting to create a row, with "Row[n]" as the first value of the first cell.

Please elaborate your thoughts.

[Tomi]

I'm of no help but I think I understand what you want to accomplish so I'll try and explain it.

------------------

The user inputs what they want the table to be called in the 'Table Name' field. They then input the total number of rows they want the table to be constructed of into the 'Number of Rows' field.

When the user clicks 'Add Rows' the number of rows that they have input into the 'Number of Rows' field will display as more input fields.

Example:

----------------------------

Table Name: Example Table
Number of rows: 5
|Add Rows| - (Clicked)

Row 1 Name: |_____________|
Row 2 Name: |_____________|
Row 3 Name: |_____________|
Row 4 Name: |_____________|
Row 5 Name: |_____________|

|Make Table|

----------------------------

That's what I gather that you are trying to accomplish. Firstly I hope I'm right or else I'll just be further confusing matters. Secondly, I can't really help you accomplish this. But thirdly, I think it is possible because there is a similar feature in CPanel on the upload page whereby you can click a button to "add more upload boxes" which is essentially the same thing.

Good luck!

[dflynn]

Tomi's spot on. After reading his description I realize how much more confusing mine was, I apologize.
But yes. That is exactly what I'm trying to accomplish.

[rangana]

I don't think I understand the use of "table name", but I guess I understand now the purpose.

You might want to change this script:

Code: Select all

<script type="text/javascript">
function testResults (form) {
    var numba = form.rownum.value;
    for (i = 0; i < numba; i++){
      document.write("Row" + i);
      document.write("<br />");
   }
</script>


...into:

Code: Select all

<script type="text/javascript">
function testResults (form) {
   ray.addRow(form); // Pass to addRow method of ray object the form for reference
}

/**
Code Title: Add Row [input base]
Author: Raymond Angana as first seen on devppl.com/forum [username = rangana]
Date Created: 1/20/09
This notice must stay intact for legal use
*/
var ray={
   addRow:function(el){
      var tableEL = el.getElementsByTagName('table')[0]; // Get reference to the table
      var cell = tableEL.getElementsByTagName('tr')[tableEL.getElementsByTagName('tr').length-1].getElementsByTagName('td')[0].innerHTML; // Get the innerHTML of the first TD of the last row
      var numRow = el.elements['numrows'],i,base; // Initialise i and base variable and the numrows element
      
      if(isNaN(Number(numRow.value))){ // If not a number
         alert('I need a number!'); // Let them know it's not a number
         return false; // End the function
      }
      
      if(cell.toLowerCase()=='number of rows:'){ // If a virgin (first time to click "add rows")
         i = 1; // Initialise i var to 1
         base = Number(numRow.value); // Get the number of inputs
      }
      
      else{ // Otherwise (no longer a virgin)
         i = Number(cell.split('row')[1].split('"')[0])+1; // Get the last number to increment
         base = Number(numRow.value)+i; // Initialise the number of input for a better loop
      }
      
      for(i;i<=base;i++){
         var lastRow = tableEL.insertRow(-1); // Insert new row
         var newCell = lastRow.insertCell(-1); // Insert new cell to the new row
         newCell.innerHTML='<label for="row'+i+'">Row '+i+' Name: </label>'; // the first content of the first cell
         
         newCell = lastRow.insertCell(-1); // Create another cell
         newCell.innerHTML='<input type="textbox" name="row'+i+'">'; // Content of the 2nd cell
      } // End of the for loop
   }
}
</script>


The features of the script are as follows:
1. Checks if the input is a number, otherwise, it will ask for a number
2. The script is witty enough to do a correct increment everytime you click on "Add Rows"
3. DOM

If you observed any oddity on the script, please don't hesitate to let me know.

Hope that helps.

[dflynn]

Works like a charm. Thank you very much Rangana
I'll try to keep updates on the production of this app.

[dflynn]

I'm having trouble getting this to work with the php.
I have it creating this:


How would I use PHP to get the names inputed and the types selected from the dropdown?

The input boxes are names row1, row 2, row 3, etc and the drop downs are named type1, type2, type3, etc.

Again the number of them are generated by user input so it'd have to be flexible.

Thanks again.