Page 1 of 1

Dynamic text boxes

Posted: Fri Aug 24, 2007 4:38 pm
by viper6277
Hi everyone, I'm new member to the forum, this website has been so useful in the past on solving my PHP problems and helping me understand more about php coding in general.

I am currently working on upgrading my companies website with PHP and MySQL, and I hit a stumbling block maybe because I'm not to good at PHP theory, or the flow of data...?

Here's my problem...

I have a form where field techs can close out service calls, Time in, time out, work done, who the tech is....ect...

Currently I have 20 fields for parts..... Part1 / Part1QTY....and so on to Part10 / Part10QTY....

the form emails, and it also feeds data into MySQL... so everything is working fine...

What I would like to do, is stream line it...so there is only 2 fields...part_number and qty....and when techs needs to enter more parts then click on a button that creates 2 new sets of text boxes for input....
thus allowing me to have them enter more the just 10 parts and qty's.

I thought about, maybe having a secondary form on my HTML page, with different sets of submit buttons, and they can enter 1 part at a time... but I could not get the secondary form Submit button to not clear the data in the primary form...so that didn't work for me.!

I'm am basically stuck here... there maybe one or two other issues I have...but those are not so critical.

Any thoughts on this or recommendations on how I should approach the problem would be greatly appreciated.

I do have a great deal of MS Access experience but this PHP is a totally different monster. For those who know access, it's very easy to add a new record in a subform and just keep adding records...which is sort of what I'm trying to do here....

Thanks again.... Eddie.

Posted: Fri Aug 24, 2007 10:04 pm
by s.dot
Hello,

Welcome to the forums!

This could be solved in several ways. What immediately springs to mind is using javascript to create more form fields. Or having the form fields already there, hidden by css (which when a "more" link is clicked will unhide a few more form fields).

Alternatively, you could have the "more" as your submit button.. submit the X number they entered, and redirect back to the original form.

Posted: Wed Aug 29, 2007 4:19 pm
by viper6277
scottayy wrote:Hello,

Welcome to the forums!

This could be solved in several ways. What immediately springs to mind is using javascript to create more form fields. Or having the form fields already there, hidden by css (which when a "more" link is clicked will unhide a few more form fields).

Alternatively, you could have the "more" as your submit button.. submit the X number they entered, and redirect back to the original form.
Hi Scottayy, thanks for the reply, someone on a different forum had sent me a sample code of Java doing exactly what you mentioned.... which creates more fields for data entry .....now my question is and I haven't tried it because I just got back to the office....If I run a php script to insert those values into MySQL...will in insert only the first row or all the newly created rows as well... ?

I'm going to try out what he had sent me... and I'll post back my progress.

Thanks for your quick reply and suggestions.

Posted: Fri Aug 31, 2007 10:31 pm
by mcccy005
Hi there,
Any chance you could post up the solution to these forums also as I've been searching the internet for a couple of weeks looking for something like that.
I need some sort of code to dynamically create new text fields, similar to at this web site: http://www.quirksmode.org/dom/domform.html except using javascript.

Posted: Sat Sep 01, 2007 2:08 pm
by califdon
Another approach you might want to consider is Ajax. Using Ajax, you could have a single part/qty data entry with two buttons, "Submit, Add Another" and "Submit, Done" or something like that. Then, without refreshing the current document, your Javascript could submit the data for one part, clear the data in the controls and be ready for the next one (or, if the other button is pressed, go on to whatever is next in your process). It's a smooth operation and if you already know Javascript, is easy to code.

Posted: Sat Sep 01, 2007 3:21 pm
by CoderGoblin
This is where I throw my 2 cents in.. First thing is to do it using standard PHP and submit form. Simply keep track of how many rows there are and possibly increment. Then look at possibilities such as AJAX to enhance the solution so that users don't have to keep pressing submit and loading the entire page again - but keep the original methodology working alongside (the use of hiding a submit button using the <noscript> html tag is useful here).

Posted: Sat Sep 01, 2007 3:33 pm
by califdon
CoderGoblin wrote:This is where I throw my 2 cents in.. First thing is to do it using standard PHP and submit form. Simply keep track of how many rows there are and possibly increment. Then look at possibilities such as AJAX to enhance the solution so that users don't have to keep pressing submit and loading the entire page again - but keep the original methodology working alongside (the use of hiding a submit button using the <noscript> html tag is useful here).
Yup, that's good advice.

Posted: Tue Sep 04, 2007 4:37 pm
by viper6277
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


Hi mcccy005 I've been working with another programmer from another forum, and we finished (98% him) with my goals for the short term ...works great...here is the code...and much thanks to Chris from [url]http://www.dhtmlgoodies.com/forum/viewtopic.php?p=9487#9487[/url]

feel free to write back and ask questions...

main.php

Code: Select all

<?php include("include/db_connect.php"); ?>

<?php

if (isset($_POST['part']))
{
//Count parts in array
$total_parts=(count($_POST["part"]));

// loop to define insert data (remember that the array keys start from 0)
$data_insert='';
foreach($_POST["part"] as $key=>$val){
   $data_insert.='("'.$val.'","'.$_POST["qty"][$key].'"),';
}

//remove last comma
$data_insert=substr($data_insert,0,-1);

print "$data_insert";
$sql="INSERT INTO tbl_service_calls_parts (part_number,qty) VALUES ".$data_insert."";

if (!mysql_query($sql))
  {
    die('Error: ' . mysql_error());
  }

mysql_close($con);

?>

<?php

} else {    // if form hasn't been submitted

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>Dynamic fields</title>
   <script language="javascript">
   
   var counter=1;
   function addRow() {
     
      counter=counter+1;
    //Alert(counter);
      var tbody = document.getElementById("table1").getElementsByTagName("tbody")[0];
      var row = document.createElement("TR");
 
    //Number
    var cell1 = document.createElement("TD");
    var cell1 = document.createElement("TD");
    //cell1.setAttribute("class","list_side");
    //cell1.setAttribute("className","list_side");
    cell1.innerHTML = " "+counter+"";
     
    //Part
    var cell2 = document.createElement("TD");
    var inp2 =  document.createElement("INPUT");
    inp2.setAttribute("type","text");
    inp2.setAttribute("name","part["+counter+"]");
    cell2.appendChild(inp2);
   
     //Quantity
    var cell3 = document.createElement("TD");
    var inp3 =  document.createElement("INPUT");
    inp3.setAttribute("type","text");
    inp3.setAttribute("name","qty["+counter+"]");
    inp3.setAttribute("value","");
    inp3.setAttribute("size","6");
    cell3.appendChild(inp3);
     
    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);
    tbody.appendChild(row);
    //alert(row.innerHTML);
   }
   </script>
</head>

<body>
<form name="form1" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
  <p>&nbsp;</p>
  <table width='200' align='center' id='table1'>
    <tr>
      <td>&nbsp;</td>
      <td class='list_data' colspan='2'><input name="button" type='button' onClick='addRow();' value='New Part'></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td class='list_title'>Part Number</td>
      <td class='list_title'>Qty</td>
    </tr>
 
    <tr>
      <td class='list_side'>1</td>
      <td><input type='text' name='part[]' size='20'></td>
      <td><input type='text' name='qty[]' size='6'></td>
    </tr>
   
  </table>
  <p>
    <label>
    <div align="center">
      <input type="submit" name="Submit" value="Submit">
    </div>
    </label>
  </p>
</form>

<?php

}

?>

</body>
</html>
db_connect.php

Code: Select all

<?php
$db_host = 'localhost';
$db_user = 'root';
$db_pass = '';
$db_name = 'web_db';

$con = mysql_connect($db_host,$db_user,$db_pass)
       or die("Could not connect to host $db_host");
       //** remove mark to test connection print "conntect to $db_host";
 
$db_select = mysql_select_db($db_name)
             or die("Could not connect to database $db_name");
             //** remove mark to test connection print "conntect to $db_name";
?>

Code: Select all

CREATE TABLE `tbl_service_calls_parts` (
  `call_id` int(11) default NULL,
  `part_number` varchar(12) default NULL,
  `qty` int(11) default NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
mcccy005 wrote:Hi there,
Any chance you could post up the solution to these forums also as I've been searching the internet for a couple of weeks looking for something like that.
I need some sort of code to dynamically create new text fields, similar to at this web site: http://www.quirksmode.org/dom/domform.html except using javascript.

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]