Problem in form submission

[Udyan]

I have a script that allows me to select an item from a dropdown, and depending on the choice of complete input text. This part works, except when I want to validate the form and save the data, input text are not recognized. Can you explain me why I am having problem with my form submission?

Here is my code:

The javascript code:

	<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox and other
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest not supported by your browser
				   alert("Your browser does not support XMLHTTPRequest objects..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
			
			
			/**
			* Method will be called on click of button
			*/
			function go1(){
				var xhr = getXhr();
				// It defined what will we do when we have the answer
				xhr.onreadystatechange = function(){
					// We do something if we have received everything and that the server is ok
					if(xhr.readyState == 4 && xhr.status == 200){
						theselect = xhr.responseText;
						// It uses innerHTML for adding options to the list
						document.getElementById('hour').innerHTML = theselect;
					}
				}
 
				// Here we will see how to post
				xhr.open("POST","ajax_journey.php",true);
				// do not forget it for post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// do not forget to post the arguments
				// Here, the id of the author
				sel = document.getElementById('journey');
				id_journey = sel.options[sel.selectedIndex].value;
				xhr.send("id_journey="+id_journey);
			}
 
</script>

I took the example of linked lists, the problem may be there ...

My page ajax_journey.php

if(isset($_POST["id_journey"]))
    {
        
        $res = mysql_query("    SELECT debut_journey, fin_journey, hour_works
                                   FROM journey 
                                WHERE id_journey=".$_POST["id_journey"]);
        $row = mysql_fetch_assoc($res);
        if ($row['debut_journey'] != "00:00:00") { $deb_read = 'readonly="readonly"'; } else { $deb_read = ""; }
        if ($row['fin_journey'] != "00:00:00") { $fin_read = 'readonly="readonly"'; } else { $fin_read = ""; }
        if ($row['hour_works'] != "00:00:00") { $trav_read = 'readonly="readonly"'; } else { $trav_read = ""; }
        
        echo '<table width="100%" cellpadding="0" cellspacing="0">
        <tr>
        <td  width="160px">Start Time :</td>
      <td><input type="text" name="time_start"   value='.substr($row['start_journey'],0, 5).' size="4" class="form" style="text-align: center;" /></td>
      </tr>
                     <tr style="height: 5px;"></tr>
                    <tr>
                        <td align="left">End Time :</td>
                        <td><input type="text" name="time_end"   value='.substr($row['fin_journey'],0, 5).' size="4" class="form" style="text-align: center;" /></td>
                     </tr>
                    <tr style="height: 5px;"></tr>
                    <tr>
                        <td align="left">Time worked :</td>
                        <td><input type="text" name="time_work"   value='.substr($row['time_work'],0, 5).' size="4" class="form" style="text-align: center;" /></td>
                     </tr>
                 </table>';
    } 

[MindSpace]

It would be easier to create a table (instead of using DIV + CSS for your layout) as well as input from the creation of the page, but the masking (style.display = "none").

Then, using Ajax, you would recover more than the values (different hours).
Just then update the relevant input and then display the table (style.display = "block").

This should be less of a problem with your form.

[Udyan]

Thank you for your help. But I do not see how to implement your solution. Because in fact in my page or my menu I display the picture in this part of code:

<div id='hour' style='display:inline'>
          
</div>

I do not see how to adapt the Ajax code to fill the hidden input. Besides, they should look like this:

<input type="text" style="display:none;" name="hour_start" />

And Ajax should not be changed here?

function go1(){
				var xhr = getXhr();
				// It defined what will we do when we have the answer
				xhr.onreadystatechange = function(){
					// We do something if we have received everything and that the server is ok
					if(xhr.readyState == 4 && xhr.status == 200){
						theselect = xhr.responseText;
						// It uses innerHTML for adding options to the list
						document.getElementById('hour').innerHTML = theselect;
					}
				}
 
				// Here we will see how to post
				xhr.open("POST","ajax_journey.php",true);
				// do not forget it for post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// do not forget to post the arguments
				// Here, the id of the author
				sel = document.getElementById('journey');
				id_journey = sel.options[sel.selectedIndex].value;
				xhr.send("id_journey="+id_journey);
			}

[MindSpace]

Thank you for your help. But I do not see how to implement your solution. Because in fact in my page or my menu I display the picture in this part of code:

<div id='hour' style='display:inline'>
          
</div>

At the moment there is no

<div id='hour' style='display:inline'>
<table id="table_hours" width="100%" cellpadding="0" cellspacing="0" style="display:none;">
        <tr>
        <td  width="160px">Start time :</td>
...
</tr></table>
</div>

(Do not hide the input: they will be hidden and displayed at the same time as the table)

I do not see how to adapt the Ajax code to fill the hidden input.

Simply with

document.getElementById('id_input').value=the_value;

(it would therefore add an id to each, it can be equal to the name, provided that each id is unique).

Your page is called by Ajax to refer couples of identifier/value corresponding to different times. To do this, you can use JSon, for example, or define your own format ...

Once you have retrieved the values and will be assigned to each corresponding input, you'll never have to display the table

document.getElementById("table_hours").style.display = "block";

[Udyan]

Well I was not too successfully implementing your solution. But in fact the problem is with Mozilla. On IE I have no problem. I should go through an xml file right?