Hello,

I am trying to make a very simple form about the courses students have taught in the past. if there is more than on course they taught I want to make an "Add More Button" so that the form reappears. Kinda like the fields sections in PHPMyAdmin interface.

The page is here: http://nature.berkeley.edu/~pinara/test.php

it is a simple form but what I want to do is when they click on "Add more Courses" The same form will appear unfilled and they will be able to submit each form separately.

I hope this made sense.

Thanks in advance.

Recommended Answers

All 12 Replies

I thought the teachers taught the courses!

If you have a program that presents the form and another that processes the form data, then the simplistic approach would be to take a full form of data, process that and then present the full (empty) form so they can add more. Using just PHP you could also go to the processing module and then link back to the initial module with a parm to tell it how many entries to display. Since they may have already entered some data, you would have to pass back the data they had entered and reload it into the form. Since the number of entries is now effectively variable, it means that the processing module has to be smart enough to handle any number of rows.

If you want the adding of a new row to be handled without actually going to the server to process / pass-back the form data, then you will need some Ajax / Javascript. That's not my forte but I'm sure that you can find something by asking the question in the Javascript forum or by doing an internet search.

I did this for somebody yesterday pm me if you would like to solve your problem. (I did not click the link yet) please send all form code (minus any db connection stuff-things that are not relavant to goal), I will click the link tomorrow and view your perspective but I have to write specific functions to do what you want. no offense to chrishea... I also thought teachers taught! nice!
Here's one: "I never knew I'd be a teacher" ddymacek
forgive me, a bit tired, a bit late, and 8 bits make a byte. I hope you love computers as much as I do!
CHOMP.

Hi Chrishea and ddymacek!

Thank you soo much for you reply. Haha yes this is actually for graduate students who have taught classes as a TA. I am building an application where they can enter their teaching experience to get into the job market.

Here's my code so far. So what I want to do is when they click on more courses, I want the course, semester, instructor, institution to appear again. So I have 8 fields by default so if they want to add more fields, I want the "Add More Courses" to button to show more fields. Does this make sense? You can see the fields at the below link.

http://nature.berkeley.edu/~pinara/test.php

<form action="test.php" method="post" name="teaching" enctype="multipart/form-data">
<?
for ($i=0;$i<8;$i++)
	{
?>
 Course: <input type="text" name="course<?php print $i;?>" />  Semester: <input type="text" name="semester<?php print $i;?>" />  Instructor: <input type="text" name="instructor<?php print $i;?>" />    Institution: <input type="text" name="place<?php print $i;?>" /> <br>
<?		
}
?>


<input type="submit" name="submit" value="Submit">
<input type="submit" name="add" value="Add More Courses">
</form>

<?php

if (isset($_POST['submit']))
	{
		for ($i=0;$i<8;$i++)
		{
	$course = $_POST['course'];
	$semester = $_POST['semester'];
	$instructor = $_POST['instructor'];
	$place = $_POST['place'];
	
	$stmt = $database_link->prepare("INSERT into teaching (course, semester, instructor, place) VALUES (?,?,?,?)");
	$stmt->bind_param('ssss', $course, $semester, $instructor, $place);
	$stmt->execute();
		}
				printf("The courses were successfully added");
	}
elseif (isset($_GET['add']))
	{
	for ($i=0;$i<8;$i++)
		{
?>
 Course: <input type="text" name="course<?php print $i;?>" />  Semester: <input type="text" name="semester<?php print $i;?>" />  Instructor: <input type="text" name="instructor<?php print $i;?>" />    Institution: <input type="text" name="place<?php print $i;?>" /> <br>
<?		
		}
	}
?>

THANK YOU!

Add this under <form action="test.php"....>

if($_POST['submit']){
//......
}elseif($_POST['add']){
	$max=$_POST['max'];
}else{
	$max=8;
}

replace 8 in for loop to $max

for($i=0;$i<$max;$i++){

add this under <input> elements (it must be in <form>)

<input type="hidden" name="max" value="<?php echo ($max+1);?>"> // here try ($max+1), if doesn't work, then use $max+1

but I think the variables, when user clicks on add, will dissapear
check and say if that happens

question, you want them to be able to 'add more courses' and that would continue to build each of the 'course, semester, instructor and institution fields so they can enter their info, is this correct.
Dates (like year) is usually important. If you post your database table structure I will make you life a lot easier and teach you about classes/ object oriented programming.

so,

function localdate(){
	$localTime=localtime();
	$sec=$localTime[0];
	$min=$localTime[1];
	$hou=$localTime[2];
	$day=$localTime[3];
	$mon=$localTime[4]+1;
	$yea=$localTime[5]+1900;
	$date=$hou.":".$min.":".$sec." ".$day.". ".$mon.". ".$yea.".";
	return $date;
}
if($_POST['submit']){
	$max=$_POST['max'];
	$max--;
	for($i=0;$i<$max;$i++){
		$date=localdate();
		$course=$_POST['course'.$i];
		$semester=$_POST['semester'.$i];
		$instructor=$_POST['instructor'.$i];
		$place=$_POST['place'.$i];
		mysql_connect('localhost','user','password') or die("Couldn't connect!");
		mysql_select_db('database');
		mysql_query('INSERT INTO teaching (date,course,semester,instructor,place) VALUES('$date','$course','$semester','$instructor','$place')");
		echo "The courses were successfully added";
	}
}

Hey Ivan,

thank you soo much for your code. The loop works. I have to tweak a bit because the form doesn't show up at all when you load the page but all in all the script works. thanks a mil! Also i am using mysqli to prevent sql injections so my query is parameterized instead of the regular mysql query but thank you for that bit as well.

hi ddymacek,
yes basically i just wanted the fields to show up everytime students click on the add more courses button. Yes you are right about the date. I am looking into that. It seems like Ivan has already placed that in his code.

Thank you for replying to my post!

Ivan also when I enter the information and then click on add more courses button to show another field all the other info i entered for the other fields disappear. Do you know how i can save my earlier entries?

I don't have it ready yet, but I will code your add fields. it needs to be a javascript function, and call an onclick event as opposed to an input type submit button, because that is submitting your form and making the data 'disappear'.

ok, this is only about adding fields for the moment.
to fix your error see elseif statement line 33.
thats all going away anyway.
I could have used Jquery and made this elegant, but you did not include it in your script so I used basic, basic javascript functionality to build your form values.
first off add this javascript to your page probably on top of everything else:

<script type="text/javascript">
function add_course_input() {
   // grab the value of the id in the records field.
   // expected start value is 8, we need it for work below.
   var id = document.getElementById("records").value;
   //alert('id is ' + id);
   var retval = document.createElement('div');
   var txtNode = document.createTextNode("Course:  "); 
   retval.appendChild(txtNode);
   var course = document.createElement('input');
   course.setAttribute('type','text')
   course.setAttribute('name','course'+id);
   retval.appendChild(course);
   
   txtNode = document.createTextNode(" Semester:  "); 
   retval.appendChild(txtNode);
   var semester = document.createElement('input');
   semester.setAttribute('type','text')
   semester.setAttribute('name','semester'+id);
   retval.appendChild(semester);
      
   txtNode = document.createTextNode(" Instructor:  "); 
   retval.appendChild(txtNode);
   var instructor = document.createElement('input');
   instructor.setAttribute('type','text')
   instructor.setAttribute('name','instructor'+id);
   retval.appendChild(instructor);
   
   txtNode = document.createTextNode(" Institution:  ");    
   retval.appendChild(txtNode);
   var place = document.createElement('input');
   place.setAttribute('type','text')
   place.setAttribute('name','place'+id);
   retval.appendChild(place);
   var brNode = document.createElement('br');
   retval.appendChild(brNode);
   document.getElementById("additional_course").appendChild(retval);         
   // now that we have added the element, lets increase our 'records' field by 1
   id++;
   // set the records element value to +1 increase.
   document.getElementById("records").value = id;
   // for testing purposes, just checking...
   //var again = document.getElementById("records").value;
   //alert('and again is ' + again);
  // alert('finished adding');
}
</script>
// Need you to add a couple of things to your page.  right after first you build // your form fields add:
<div name="additional_course" id="additional_course"></div>

<div>
<!-- this is a new line, we are going to keep track of how many records on page.   the first time through, $i is sitting at 8 which is good -->
<input type="hidden" id="records" name="records" value="<?php echo $i;?>">
<!-- unchanged -->
<input type="submit" name="submit" value="Submit">
<!-- changed type = button, using onClick event -->
<input type="button" name="add" value="Add More Courses" onClick="javascript:add_course_input();"/>
</div>

You can then remove your else if on the submit statement, and the second iteration of building your input records.
I also have not thoroughly read the entire post as of late, but wherever your post value was coming from. you should be able to call $_POST and get the exact amount on the page. also, validate that there is data in each field before actually submitting the query (you have to lose the for $i code when inserting, we can come up with a better way) , I don't have time at the moment but perhaps will check your progress tomorrow.
hope this works for you, no special scripts involved.

you can use javascript, but if you want php, here's code:

....
}elseif($_POST['add']){
	$max=$_POST['max'];
	$val=array();
	for($a=0;$a<$max;$a++){
		$val[$a][0]=$_POST['course'.$a];
		$val[$a][1]=$_POST['semester'.$a];
		$val[$a][2]=$_POST['instructor'.$a];
		$val[$a][3]=$_POST['place'.$a];
	}
}
...

and then, in for loop:

Course: <input type="text" name="course<?php print $i;?>" value="<?php echo $val[$i][0];?>"> 
Semester: <input type="text" name="semester<?php print $i;?>" value="<?php echo $val[$i][1];?>"> 
Instructor: <input type="text" name="instructor<?php print $i;?>" value="<?php echo $val[$i][2];?>">
Institution: <input type="text" name="place<?php print $i;?>" value="<?php echo $val[$i][3];?>"><br>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.