Dynamic Form

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
barrowvian
Forum Commoner
Posts: 47
Joined: Tue Aug 19, 2008 3:49 pm

Dynamic Form

Post by barrowvian »

Hi,

I'm have pretty basic programming skills but I am trying to help a friend with a dynamic form that he is wanting. I haven't used JS before but when I search google most of the answers seem to point towards it.

What we're after is a simple form, for example;

Name:
Email Address:
Qualification:

All of the above will be simple text fields with a bit of validation on each. Then below it needs to have a "Add qualification" button and a "Submit" button. If the user clicks add qualification then a new text box will be displayed underneath the first qualification entry. The user can enter this three times. If they press the add qualification button once then a third button will appear saying remove qualification and will remove that entry field. All of the data will need to be saved to a database upon submission.

Is this possible to do in JS? If so how difficult would it be to achieve? Or would anyone else suggest any easier/more efficient languages to use?

Thank you.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Dynamic Form

Post by califdon »

Basics:
Javascript is a client-side language that is interpreted in the browser (actually, a version of it is now beginning to be used in servers, but that's uncommon, to date), so it is what you have to use if you want anything to happen after the page is initially delivered to the browser.

However, what you describe seems to require interaction with the server, to update a database, so you need a combination of a client-side (JS) script and a server-side (PHP) script. The JS will be in the HTML page with the form. It can detect when a button is clicked and can call a PHP script to interact with the database. You could potentially use "Ajax", which is not a separate language, but just the use of JS and PHP to cause asynchronous data transmissions so that you don't need to reload an entire new page.
barrowvian
Forum Commoner
Posts: 47
Joined: Tue Aug 19, 2008 3:49 pm

Re: Dynamic Form

Post by barrowvian »

Thank you. I've had a look at it and so far this is what I have come up with;

HTML

Code: Select all

<?php include_once("includes/header.php") ?>

<h1> This is the form for the data entry </h1>

<?php include_once("includes/js.php") ?>

<form name="invoice" method="post" action="insert.php">

<table width="50%" border="0" >
  <tr>
    <td>Name:</td>
    <td><input type="text" size = "20" maxlength= "20" name="name" /></td>
  </tr>
  <tr>
    <td>Email Address:</td>
    <td><input type="text" size = "20" maxlength= "50" name="email" /></td>
  </tr>
  <tr>
    <td>Qualification:</td>
    <td><input type="text" size = "20" maxlength= "11" name="qualno" /></td>
  </tr>
</table>
 
<table width="50%" border="0" id="table1">  
  <tr id="row1">
</tr>
</table>
<input type="button" name="Button" value="Add Qualification" onClick="addRow('table1','row1')">
<input type="submit" value="Add Invoice">

</form>

<?php include_once("includes/footer.php") ?>
JS

Code: Select all

<script language="javascript">

row_no=0;

function addRow(tbl,row){
row_no++;
if (row_no<=3){
	
	if (row_no<=3){
	
	var textbox  = row_no+'.  )<td><input type="text" size = "20"  maxlength= "11" name= qualno[]></td>';}
	
	var tbl = document.getElementById(tbl);
	var rowIndex = document.getElementById(row).value;
	var newRow = tbl.insertRow(row_no);
	
	var newCell = newRow.insertCell(0);
	newCell.innerHTML = textbox;
	
	}
	if (row_no>3){
	alert ("Too Many Items. Limit of 3.");
	}
	
}
</script>
Display info

Code: Select all

<?php 
// Definate Variables
$name = $_POST['name'];
$email = $_POST['email'];
$qualno = $_POST['qualno'];
?>

<?php
echo $name . "<br />";
echo $email . "<br />";
echo $qualno . "<br />";
?>

So far so good. The button adds a new field like I wanted. However, I am a bit stuck with passing the data from the dynamic fields to the next page. 

How would I go about passing the data through dynamically; if only 1 qual is inserted then only pass 1 across and display it?

Thanks
barrowvian
Forum Commoner
Posts: 47
Joined: Tue Aug 19, 2008 3:49 pm

Re: Dynamic Form

Post by barrowvian »

Right, I managed to sort out passing data through dynamically, just had to add a line and change another;

Code: Select all

	var qualno= 'qualno' + row_no;
	var textbox  = row_no+'.  )<td><input type="text" size = "20"  maxlength= "11" name= '+qualno+' ></td>';}
So that part is working fine now :)

Now I need to add a remove button to remove the last entry field that has been added.

Any suggestions?

Thanks
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Re: Dynamic Form

Post by califdon »

Actually, I'm surprised that that actually works. This isn't something I've done before, so maybe someone else can give you better guidance. I think adding elements in an existing web page is more commonly done using the jQuery library, but I'm not very competent with jQuery. You might want to look into that, it's very powerful.

What I would probably do, faced with this requirement, is to write the basic HTML with all the table rows and buttons, but with those beyond the first ones having the CSS style of display:none; making them initially invisible. Then your JS could easily change the display to inline, as appropriate. The thing you would need to be concerned with is avoiding excess unoccupied space on your page when elements are invisible (I think they would still occupy space as display:none, although I'd have to test it to be sure).

You may find it a bit tricky to receive the form variables in the PHP script that processes the data. You may find the PHP construct foreach() helpful in doing this. Ref: http://php.net/manual/en/control-structures.foreach.php. You can do something like:

Code: Select all

<?php
foreach($_POST As $key=>$value) {
   $$key = $value;
}
which will assign however many form variables are there to simple variables with the names of the form elements, without messy conditionals to test whether the variables exist.

I would probably also consider eliminating the buttons and simply expose the next row based on the onblur event of the last item in the previous row. That would seem to me to be a more friendly approach, as well as not cluttering up the screen with buttons. Just a thought.
Last edited by califdon on Sat Apr 23, 2011 1:21 pm, edited 1 time in total.
Reason: To add the part I've highlighted in green.
Post Reply