how to submit the value of drop-down selection without actually clicking on subm

[mintoo2cool]

i have a pretty lengthy form that i am having to deal with.

at the very top there is a dropdown menu, that will get populated by values from a database table.

 

what my requirement is that, when a user selects the value from the drop down, the corresponding textfields get populated with the correct data automatically.

 

heres an hypothetical example, explaining my requirement:

say i have 5 fields in the form. the first one, the username, is a dropdown. the other 3 are phone number, gender, address and they are all text boxes.

the last text box would be the users password, which he

 

what i would want to do is, as soon as the user selects a username from the dropdown, the text boxes should automatically populate with that user's phone number, gender and address. the user would then verify this information, then he would write a password in the password field and click on the submit button, which would cause all this data to be stored in a database table.

 

i dont know how to do this ... can anyone give me a push in the right direction on how to getting this accomplished. i m sure this is pretty much possible. i have seen php website, where once the user enters his zip code, the city name automatically is filled up. but i dont know how to do it. I am not that keen on using AJAX here, i ll content even if the entire page would be submitted upon selection.

[hyster]

im 99.99% certain that php can not do this. php is server side ONLY.

im pretty sure its java (or another language) u need to do this.

[MasterACE14]

im 99.99% certain that php can not do this. php is server side ONLY.

im pretty sure its java (or another language) u need to do this.

PHP with Javascript. Google AJAX.

[mintoo2cool]

well i got it working using AJAX. however, am stuck having a new problem.

 

here is the scenerio.

htmlpage1:

dropdown1 onchange invokes a javascript function that inturn executes php script at server and the server sends another drop down(which is again populated from the database, call it dropdown2) which is promptly placed at a div tag whose innerhtml javascript is modifying.

 

now what i want is that when user selects from dropdown2, the textbox below it should have the corresponding value.

 

here is my problem. the dropdown2 does not show up in the original html page, so i m not able to access dropdown2 from original htmlpage1 and call another javascript function to fetch data for the textbox.

 

so how do i go about doing this? is there anyway to make innerhtml code appear as original html?

[titan21]

If you are using AJAX, are you not ensuring that dropdown is being displayed? Or have you just got a response from the server and not processed it with Javascript?

[mintoo2cool]

If you are using AJAX, are you not ensuring that dropdown is being displayed? Or have you just got a response from the server and not processed it with Javascript?

i m echoing the entire select tag in the php file, which is called by the javascript function. this echo is captured XMLHttpRequest object and this objects responseText variable is assigned to the innerhtml variable of the div tag. thats how i m managing to generate the dropdown.

 

function showVessals(str)
{
if (str=="")
   {
   document.getElementById("imono").innerHTML="";
   return;
   } 
if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
   }
else
   {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
xmlhttp.onreadystatechange=function()
   {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("imono").innerHTML=xmlhttp.responseText;
     }
   }
xmlhttp.open("GET","gp_ajax/vessal_of_owner.php?ownerid="+str,true);
xmlhttp.send();
}

[titan21]

Okay - still a little confused about what it is you are trying to achieve - can you post contents of vessal_of_owner.php?

[mintoo2cool]

Okay - still a little confused about what it is you are trying to achieve - can you post contents of vessal_of_owner.php?

 

okay ,basically this is what i want to achieve.

 

1. when user opens the php webpage. he gets to choose from a list of vessal owners.

2. when the user selects an owner, he should be able to choose the vessal based on a number (the imo number , tagged as imono), from a dropdown containing the list of vessals owned by the owner selected in step 1 only.

3. after the user selects the imo number, the corresponding name of the vessal, based on the imo number(retrived from database), should be shown in the text box below it.

 

here is the php code of vessal_of_owner.php

 

<?php
$con = mysql_connect("localhost","bew","123456");
if(!$con)
{
  die ('Error! could not connect to data to add data');
}
$ownerid = $_GET['ownerid']; 
$result = mysql_query("select vessalid,vessalIMONo, vessalname from db1.tbl_vessal where ownerid='$ownerid'");
echo '<select name="imono2" id="imono2">';
while($row = mysql_fetch_array($result))
{
echo '<option value="'.$row['vessalid'].'">'.$row['vessalIMONo'].'</option>';	
}
echo '</select></td></tr>';
mysql_close($con);
?>

 

[mintoo2cool]

oops... forgot to mention where i m getting stuck.

 

well, its step 3 really, when i m getting stuck.

 

in the original html form, i m able to see the dropdown, being generated in step2 (thanks to the http response generated by the vessal_of_owner.php page).

but when i view the source code of this html file, i dont see the tag for step2!

And if i don't see the select tag corresponding to step 2, i wont be able to call it onchange event and use it, to fetch data for step 3!

[titan21]

Hopefully I am understanding this a little more - is "inono" a <select> element? In which case - the root <select> element is not being replaced, only the contents between <select> and </select> is being replaced. Could you try surrounding that entire area with a <div> and use that to change the contents?

 

If you attach all the relevant files - I'll test it on my server and let you know what I find out - easiest way I think!

[mintoo2cool]

alright,

PFA

1. general_particulars2.php (this is the mainpage)

2. gp_ajax/vessal_of_owner.php

3. gp_ajax/equip_bearing_no.php

4.SQL DDL which you can execute in your database, pls add some dummy data yourself, for testing.

 

2.,3. are called by the javascript functions in general_particulars2.php

Additionally I have attached the DDL of the relevant tables, FYR.

 

thanks for trying to help out titan21. really appreciate the generosity :-)

 

 

[attachment deleted by admin]

[titan21]

One last thing to be a pain - can u send me some sample data? Make sure u hide email addresses and anything else u deem as sensitive? Coudl you send this as SQL? (As opposed to CSV etc)

[mintoo2cool]

I'm sorry about the delay. I was asleep. Probably a timezone thing.

 

here is the requested data

 

[attachment deleted by admin]

[titan21]

No worries - I've been asleep too!!

 

Okay - first thing I noticed is that in "general_particulars2.php", you are trying to set the InnerHTML of an element called "imono" but I couldn't see this in your markup? I get an error stating that the Javascript is trying to set the property of a null object. Which element are you trying to alter?

[mintoo2cool]

No worries - I've been asleep too!!

 

Okay - first thing I noticed is that in "general_particulars2.php", you are trying to set the InnerHTML of an element called "imono" but I couldn't see this in your markup? I get an error stating that the Javascript is trying to set the property of a null object. Which element are you trying to alter?

 

beside the "Vessal IMO no", there is a <div> tag. thats actually supposed to be imono.

i dont know how it became imono2.

thats the one i m altering.

[titan21]

So changing that to "imono" should hopefully fix the issue? Or is there more?

[mintoo2cool]

Yeah that fixed a part of the issue, but not the entire issue. Basically, I want imono2 (present in vessal_of_owner.php) to be shown in general_particulars2.php 's source code, after its rendered by php engine.

 

Presently imono2 is being rendered in the innerHTML of imono in general_particular2.php. Therefore I'm not able to see it when i try to view general_particular2.php's source code after it has rendered in Internet Explorer or Opera.

 

Is there anyway to access imono2 in general_particular2.php so that i may use it for further manipulation( like use the value of imono2 in another query to fetch other data form the database )? Because I am not able to do that right now.

 

I want to able to use the value in imono2 to query the database and fetch the name of the vessal and place it in another textbox which is present in general_particular2.php.

 

(EDIT: bolded the names of files and tags, to avoid confusion. )

 

 

 

[titan21]

It won't show up in the source since it's the DOM that is being manipulated - not the source. That said, you can still access the element as normal through Javascript.

 

I've attached two files for general_particulars2.php and vessal_of_owner.php with some slight amendments. Basically when "imono2"'s value changes you will see an alert showing the value which shows that "imono2" can still be accessed.

 

If you use Chrome - you can use that to see what has been generated after an AJAX call. Firebug in Firefox does the same thing.

 

[attachment deleted by admin]

[mintoo2cool]

It won't show up in the source since it's the DOM that is being manipulated - not the source. That said, you can still access the element as normal through Javascript.

 

I've attached two files for general_particulars2.php and vessal_of_owner.php with some slight amendments. Basically when "imono2"'s value changes you will see an alert showing the value which shows that "imono2" can still be accessed.

 

If you use Chrome - you can use that to see what has been generated after an AJAX call. Firebug in Firefox does the same thing.

 

thats what i have been wanting to learn and understand! thank you indeed!