Dynamic text boxes

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
viper6277
Forum Newbie
Posts: 6
Joined: Fri Aug 17, 2007 3:51 pm

Dynamic text boxes

Post 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.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
viper6277
Forum Newbie
Posts: 6
Joined: Fri Aug 17, 2007 3:51 pm

Post 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.
mcccy005
Forum Contributor
Posts: 123
Joined: Sun May 28, 2006 7:08 pm

Post 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.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Post 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.
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post 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).
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Post 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.
viper6277
Forum Newbie
Posts: 6
Joined: Fri Aug 17, 2007 3:51 pm

Post 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]
Post Reply