Dynamic HTML Forms (help)

[miffe]

Ok here's the problem...Say I have a soldProducts.php page in which it displays all products currently sold in one invoice to a client. This is an 'edit & update' page in which we display the products on the invoice, and you can add more from the product database, the products have several specifications that can be changed, lets say...product "E-1" can be in colors "A, AB, BA, B"product "E-2" can be in colors "A, B"product "E-3" can only be in "B"I have the relationships in MySQL relational tables, my problem is this: I want to display a form which displays the products in the first combo box (idProduct) and after selecting a product the second combobox will display the available colors (idColor) and at the same time a text box will update with the default product price (name:price). I know I probably will have to involve AJAX, I read a bit of the tutorial but couldn't find it as easy as to implement it with my specifications. The point is that I need to keep the html form values because there will be a SUBMIT, so I'm not sure how to do this, in the AJAX example on the tutorial, after changing the values in the textbox in the 'suggest' example, it would change some text on the page, but not an actual other combobox. I could implement a simple replace but as I have to extract values from a DB each model change, I think it would be best to use AJAX right?Can anyone tell me a quick way to get through this because I am really breaking my head on all this script... 400 lines so far and it just gets quite confusing, I've never used AJAX before and I can't say I'm a PHP pro but I get my way around :)Any help would be REALLY appreciated as I have to get this job done soon,Thanks again, Miffe

[Nakor]

I don't think that you would have to use AJAX on this page. I think that some simple JavaScript would suffice if you had it communicating with your PHP variables. You could probably just use the onchange() function to change the side boxes based on the item in the first box. Read this:http://www.w3schools.com/jsref/jsref_onchange.asp

[miffe]

I don't think that you would have to use AJAX on this page. I think that some simple JavaScript would suffice if you had it communicating with your PHP variables. You could probably just use the onchange() function to change the side boxes based on the item in the first box. Read this:http://www.w3schools.com/jsref/jsref_onchange.asp

I checked it out, the problem is that in this example it displays how to just change something based on predefined values, in this case the example makes the text uppercase on change... In my case I have to access the database everytime there is a change, pull out the values, update the form and keep it viable to make the 'submit' button grab all values and make the INSERT properly.Thats why I started thinking it might be AJAX and not just simple Javascript, because I did think about the onchange event but now somehow I don't think it's that simple

[jesh]

Yes, since you require getting information from your database when something changes on your page, AJAX is probably the way you want to go.Building dynamic dropdown menus isn't terribly difficult, but it isn't terribly simple either. You might want to take a look at the HTML DOM tutorial - specifically these two sections:http://www.w3schools.com/htmldom/dom_obj_select.asphttp://www.w3schools.com/htmldom/dom_obj_option.asp

[miffe]

Yes, since you require getting information from your database when something changes on your page, AJAX is probably the way you want to go.Building dynamic dropdown menus isn't terribly difficult, but it isn't terribly simple either. You might want to take a look at the HTML DOM tutorial - specifically these two sections:http://www.w3schools.com/htmldom/dom_obj_select.asphttp://www.w3schools.com/htmldom/dom_obj_option.asp

I had never heard of DOM before, what exactly is this? I know it's the HTML Document Object Model, which "defines a standard way for accessing and manipulating HTML documents." but what does this mean?I know HTML I've been using it since 6-7 years ago, and I know a bit of PHP (quite enough) and MySQL, but I never heard of DOM. Is this like the standards and references to be able to change HTML from other pages and scripts? or what exactly is DOM used for?

[jesh]

DOM is the way that javascript interacts with the various HTML Elements. For example, if you had a input in your form and you wanted to see what the value the user typed into that input, you'd use a combination of javascript and the DOM (but mostly just the DOM).HTML

<input type="text" id="sometext" value="This is some default text." />

Javascript

var text= document.getElementById("sometext").value;alert(text);

So, in this example, document is the element that represents the entire HTML document. getElementById() is a method that allows us to get at a specific element within our document which has a specific id - in this case "sometext". getElementById returns a reference to the element that it finds - in this case, an input element. The input element, in turn, has some default properties. We use "value" here to get at whatever value happens to be in the input element.alert, in turn is a method of the window object. The window object represents the entire browser window. alert uses that window to pop up a message to the user. This is all part of the DOM.It really took me quite a long time before I finally realized that 80% or more of the coding I do in "javascript" is actually coding with the DOM (both HTML DOM and XML DOM). So, getting to know the DOM will help you with any scripting that you need to accomplish.

[miffe]

DOM is the way that javascript interacts with the various HTML Elements. For example, if you had a input in your form and you wanted to see what the value the user typed into that input, you'd use a combination of javascript and the DOM (but mostly just the DOM).HTML

<input type="text" id="sometext" value="This is some default text." />

Javascript

var text= document.getElementById("sometext").value;alert(text);

So, in this example, document is the element that represents the entire HTML document. getElementById() is a method that allows us to get at a specific element within our document which has a specific id - in this case "sometext". getElementById returns a reference to the element that it finds - in this case, an input element. The input element, in turn, has some default properties. We use "value" here to get at whatever value happens to be in the input element.alert, in turn is a method of the window object. The window object represents the entire browser window. alert uses that window to pop up a message to the user. This is all part of the DOM.It really took me quite a long time before I finally realized that 80% or more of the coding I do in "javascript" is actually coding with the DOM (both HTML DOM and XML DOM). So, getting to know the DOM will help you with any scripting that you need to accomplish.

The more I learn about server scripting, the more I realize that everything is interconnected, to do this thing you use this language, but if you want this too you have to use this and this language. It's not all about "HTML" and "PHP" anymore, but more like "HTML+PHP+JavaScript+MySQL+CSS+XML+etc..."Would you suggest I learn Javascript before continuing? I would have never considered learning JavaScript, I always thought of this a dying language and that PHP could do the same and more, I guess I was completely wrong. I mean, JS and PHP are both scripting languages so automatically I thought that either would do :\

[jesh]

Javascript is used mainly on the client whereas PHP is only on the server. It is true that some Internet users have javascript disabled, but I don't think it is safe to assume that it is a dying language. There are things that happen on websites that can only happen with javascript. AJAX, for example, is one of these things (AJAX, in case you weren't aware, stands for Asynchronous Javascript and XML).I think a good next step would be to begin learning the DOM. Most anything that you need to learn about javascript can be learned while going through the DOM tutorials. If you don't want to learn javascript or the DOM, you can work around that by using a strictly PHP method which could work something like this:1) User selects an item from a drop down menu and then clicks on a submit button (can't automatically submit without javascript/DOM) to submit the form to your PHP page.2) PHP processes the information included in the submit and builds a second drop down menu based on what the user selected.

[miffe]

Javascript is used mainly on the client whereas PHP is only on the server. It is true that some Internet users have javascript disabled, but I don't think it is safe to assume that it is a dying language. There are things that happen on websites that can only happen with javascript. AJAX, for example, is one of these things (AJAX, in case you weren't aware, stands for Asynchronous Javascript and XML).I think a good next step would be to begin learning the DOM. Most anything that you need to learn about javascript can be learned while going through the DOM tutorials. If you don't want to learn javascript or the DOM, you can work around that by using a strictly PHP method which could work something like this:1) User selects an item from a drop down menu and then clicks on a submit button (can't automatically submit without javascript/DOM) to submit the form to your PHP page.2) PHP processes the information included in the submit and builds a second drop down menu based on what the user selected.

Ok you are right, I won't use PHP for no reason, I'll try the AJAX method but it's a bit complicated, here is my issue:in the 'editor' where I want to update the comboboxes I have the following

<?php  echo "<head><title>DIVAonline [Editor de Remisiones]</title>";  echo "<link rel='stylesheet' href='resources/links.css'>";  echo "<META HTTP-EQUIV='Cache-Control' CONTENT ='no-cache'>";  echo "<script src='updater.js'></script></head>";  //I have updater.js in the same directory.    echo "<form action='rem_modelos.php' method='post'>";    //--- Select ---//	  echo "Modelo: <SELECT name='idModelo' STYLE='width: 146px' onchange='showUser(this.value)'>";      include("resources/config.php"); //connectarse a la base de datos      $result = mysql_query("SELECT * FROM modelos ORDER BY idModelo;");      $y = 0;	    while($row = mysql_fetch_array($result))        { $idn = $row['idModelo'];	    $idt = $row['nombre'];			    echo "<OPTION value='" . $idn . "'>" . $idt . "</OPTION>";	    $y++; }        mysql_close($con);      echo "</select><br>";	echo "</p><p><span id='txtHint'>as</span></p><p align='right'>";?>

Then in the updater.js I have the following:

var xmlHttpfunction showUser(str){ alert ("function working")xmlHttp=GetXmlHttpObject()if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="updater.php"url=url+"?q="+strurl=url+"&sid="+Math.random()xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true)xmlHttp.send(null)}function stateChanged() { alert ("statechanged working")if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {  document.getElementById("txtHint").innerHTML=xmlHttp.responseText  } }function GetXmlHttpObject(){var xmlHttp=null;try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e) { //Internet Explorer try  {  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");  } catch (e)  {  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  } }return xmlHttp;}

And finally in updater.php I have this:

<?php$q=$_GET["q"];include("resources/config.php"); //connect to database. This code works, Im sure of it. (tested)$sql="SELECT modelosColores.idColor, modelosColores.idModelo, colores.colorFROM modelosColoresLEFT JOIN coloresON modelosColores.idColor = colores.idColorWHERE idModelo = '".$q."'";$result = mysql_query($sql);echo "Color: <SELECT name='idColor' STYLE='width: 146px'>";while($row = mysql_fetch_array($result)) {	$idn = $row['idColor'];	$idt = $row['color'];			echo "<OPTION value='" . $idn . "'>" . $idt . "</OPTION>"; }echo "</select><br>";mysql_close($con);?>

Now, when I run it... I don't get anything in where it should have been... when I change variables in the drop down box nothing happens, not even the 'alerts' i put in the javascript code, the functions are not running.. I've not a clue where I went wrong :\helppppppp?

[Mr_CHISOL]

Hm I think you have some errors, among this:

var xmlHttpfunction showUser(str)...should be:var xmlHttp;function showUser(str)...

I preffer using XML to send the information, rather than sending and repling a select. To use XML also means that you can include more data for different selects/fields or places with no hassle...Take a look at this post and see if it can help you: http://w3schools.invisionzone.com/index.php?showtopic=11742#A tip if you use Firefox is to use the Error Console, if you don't already have it you should find it in the extension library (Developer Tools). It's a great help when working with JS, but also when working with XHTML/XML and CSS.Hope that helped..Good Luck and Don't Panic!