Dynamic form only with php

Dynamic form only with php Changing values depending on the selection of a form

#1 petocities

Member

Group: Members
Posts: 102
Joined: 03-June 06
Location:Santiago Chile

Posted 24 August 2009 - 01:18 PM

Hello Y'all!
I know this is quite a common problem starters got, but i've spent some time already trying to find a solution and haven't been able to do it properly. Besides, my html/php are quite basic and rusty :S

What I'm trying to do is a form where you can choose from a drop down list a respective grade, and depending on the grade you choose, a result will be shown. Something like this:

Menu:   Grade:        Value:
 - A      - good           - 4
 - B      - good           - 4
 - C      - average       - 2
           - total            8

I want to change B from good to average, then its value should be 2. Therefore, new total is yyy.

Menu:   Grade:        Value:
 - A      - good           - 4
 - B      - average       - 2
 - C      - average       - 2
           - total             6

The problem is not really complex, but I haven't been able to find a way to change the "Value" field automatically when you change the "Grade" field without the need of a redirect or reload.
All/Any help appreciated folks!

#2 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,605
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 24 August 2009 - 01:34 PM

Since PHP runs on the server side, you can't use PHP to dynamically change a form. You have to either make an HTTP request using a form, which would then load a new page with the form populated as you wish. Or you make an AJAX request to the server to get a value to fill in the field. Both of those ways are wrong. You just need a simple javascript function that looks at the content of the combobox and when it changes, populates the text field.

It is pretty simple as far as javascript goes.

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#3 petocities

Member

Group: Members
Posts: 102
Joined: 03-June 06
Location:Santiago Chile

Posted 24 August 2009 - 02:05 PM

True about PHP running on server side, but I won't be connecting to a DB. All the values will be fixed values, so I thought there could be an easier way. I've never worked before with javascripts, so I don't really know how to approach this specific problem, therefore was trying to avoid it :S.
Thanks for the quick reply.

PS: any good recommendations for javascript? I mean, do you have any favorites?

#4 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,605
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 24 August 2009 - 03:05 PM

Quote

True about PHP running on server side, but I won't be connecting to a DB.

I'm confused? What does a database have to do with anything? :thumbsup:

All you need to know how to do is retrieve a value, correlate a value, and output a value to the desired area. See if this helps:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>

&lt;script type="text/javascript">

function printStuff(){
	var grade, status, score;
	
	grade = document.getElementById("selection").value;
	
	if ( grade === "A" ){
	   document.getElementById("statusField").innerHTML = "Good";
	   document.getElementById("scoreField").innerHTML = "4";
	} else if (grade === "B"){
	   document.getElementById("statusField").innerHTML = "Good";
	   document.getElementById("scoreField").innerHTML = "3";
	} else {
	   document.getElementById("statusField").innerHTML = "Average";
	   document.getElementById("scoreField").innerHTML = "2";
	}
}

</script>
</head>

<body>


	<select id ="selection" style="width: 133px" onchange = "printStuff()">
	<option></option>
	<option value="A">A</option>
	<option value="B">B</option>
	<option value="C">C</option>
	</select>
	
	<br />
	<span id = "statusField"></span>
	<br />
	<span id = "scoreField"></span>

	

</body>

</html>

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#5 petocities

Member

Group: Members
Posts: 102
Joined: 03-June 06
Location:Santiago Chile

Posted 24 August 2009 - 07:49 PM

Yay! that was a great help! A big starting push for me.
I have 1 more question, about the code you posted:
When I reload the page, the selections don't reset themselves. I tried adding selected to the options, but it didn't work (or not as i would have expected).
Basically, I want that if the page is reloaded, all select fields are blank.
The code I added is

<option selected></option>

This post has been edited by petocities: 24 August 2009 - 08:28 PM

#6 groovicus

Hail Groovicus!

Group: Moderator
Posts: 9,605
Joined: 05-June 04
Gender:Male
Location:Centerville, SD

Posted 24 August 2009 - 08:27 PM

The values are not resetting because the value is being cached. You could do something like this:

function reset(){
	 document.getElementById("selection").value = "";
}

<body onload - "reset()">

Not completely sure if that will reset it or not, but that should be close.

"Take the risk of thinking for yourself, much more happiness, truth, beauty, and wisdom will come to you that way" - Christopher Hitchens

#7 petocities

Member

Group: Members
Posts: 102
Joined: 03-June 06
Location:Santiago Chile

Posted 24 August 2009 - 11:56 PM

In the end I modified the print function to print the blank option if none of the others choices was set, and used a reset function to set that option. Probably not the best choice though, but works.
Thanks a lot again for the kick off in php, really helpful groovicus :D