Get selected value from drop down box and use to populate text box php javascript

Question

I am Populating values in textbox based on listbox changed

My code is working ...and also getting data properly...

BUT This works on the basis of id.

I need to select data based on cityname.

below is my code

<?php
require_once('includes/config.php');
?>

<?php
$result1 = $database->getRows("SELECT * from areamaster");
?>
<html>
<head>

<script type="text/javascript">
    var compInfoArray = [
        <?php                       
           foreach($result1 as $row1){ 

                echo 'id : ' . $row1['id'] . ',';
                echo 'cityname :  "'.$row1['cityname'].'",';
                echo 'area : "'.$row1['area'].'"';
            }
        ?>
    ];

    function showname() {
  var id = document.form1.id.value;
  var index = compInfoArray.contains(id);
  document.form1.cityname.value = compInfoArray[index]["cityname"];
  document.form1.area.value = compInfoArray[index]["area"];
}

window.onload = function() {
  showname();
}


Array.prototype.contains = function(needle) {
  for (var i in this) {
    for (var key in this[i]) {
      if (this[i][key] == needle) {
        return i;
      }
    }
  }
  return false;
}
</script>

  </head>
</head>
<body>
<form name="form1">
  <select name="id" onChange="showname()">
<?php foreach($result1 as $row1){   ?>  
    <option  value="<?php echo $row1["cityname"]; ?>"><?php echo $row1["cityname"]; ?></option>
    <?php }?>       
  </select>
  <label>
    <input type="text" name="cityname" value="" />
    <input type="text" name="area" value="" />
  </label>

</form>
</body>
    </html>

sir i am new in javascript and i can not find any solution there..plz suggest in my code ....what i change...i try to put cityname in all code in place id but this shows me some refrence and undefined error.....plz help... — vivek bajpai
– vivek bajpai, Commented Feb 21, 2015 at 10:40
Can you please describe what exactly does not work when using $row1["cityname"];? — h7r
– h7r, Commented Feb 21, 2015 at 10:57
this code select nothing when i put $row1["cityname"]; and if i place $row1["id"]; in select box value then code works fine and populate textbox data also. — vivek bajpai
– vivek bajpai, Commented Feb 21, 2015 at 11:00
I think problem in my javascript ..this is not accepting text or any value other than id.. — vivek bajpai
– vivek bajpai, Commented Feb 21, 2015 at 11:01

AdrienXL · Accepted Answer · 2015-02-21 12:20:27Z

1

I try to reproduce your case in a minimalistic .html :

<form name="form1">  

    <select name="id" onChange="showname()">

       <option  value="Paris">Paris</option>
       <option  value="London">London</option>
       <option  value="Berlin">Berlin</option>          

    </select>
    <label>
        <input type="text" name="cityname" value="" />
        <input type="text" name="area" value="" />
    </label>

</form>

So If I've understood correctly, this is the html you get.

Next, I rebuilt your js array a bit differently :

var compInfoArray = [
    {
        "id" : 5,
        "cityname" : "Paris",
        "area" : "FR"
    },
    {
        "id" : 8,
        "cityname" : "London",
        "area" : "UK"
    },
    {
        "id" : 12,
        "cityname" : "Berlin",
        "area" : "GER"
    }
];

Then I wrote a prototype that will find a value inside any subarray keys :

Array.prototype.contains = function (needle) 
{
   for (var i in this) 
   {
       for(var key in this[i]) 
       {
            if(this[i][key] == needle )
            {
                return i;
            }
        }
   }
   return false;
}

Finally your showname() function :

function showname() 
{
    var id = document.form1.id.value;
    var index = compInfoArray.contains(id);
    document.form1.cityname.value = compInfoArray[index]["cityname"];
    document.form1.area.value = compInfoArray[index]["area"];
}

Working snippet :

var compInfoArray = [{
  "id": 5,
  "cityname": "Paris",
  "area": "FR"
}, {
  "id": 8,
  "cityname": "London",
  "area": "UK"
}, {
  "id": 12,
  "cityname": "Berlin",
  "area": "GER"
}];



function showname() {
  var id = document.form1.id.value;
  var index = compInfoArray.contains(id);
  document.form1.cityname.value = compInfoArray[index]["cityname"];
  document.form1.area.value = compInfoArray[index]["area"];
}

window.onload = function() {
  showname();
}


Array.prototype.contains = function(needle) {
  for (var i in this) {
    for (var key in this[i]) {
      if (this[i][key] == needle) {
        return i;
      }
    }
  }
  return false;
}

<form name="form1">
  <select name="id" onChange="showname()">

    <option value="Paris">Paris</option>
    <option value="London">London</option>
    <option value="Berlin">Berlin</option>

  </select>
  <label>
    <input type="text" name="cityname" value="" />
    <input type="text" name="area" value="" />
  </label>

</form>

EDIT : This is how you probably will have to build your array with your query results :

var compInfoArray = [

        <?php                       
            foreach($result1 as $row1)
            { 
                echo '{';
                echo 'id : ' . $row1['id'] . ',';
                echo 'cityname :  "'.$row1['cityname'].'",';
                echo 'area : "'.$row1['area'].'"';
                echo '},';
            }
        ?>
    ];

edited Feb 21, 2015 at 12:20

answered Feb 21, 2015 at 11:41

AdrienXL

3,0083 gold badges25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

vivek bajpai Over a year ago

exactly sir your code is working but i need this using mysql and php ...I mean i need to dynamic plz help to make this array var compInfoArray to load from mysql.....

vivek bajpai Over a year ago

but when i put your dynamic array code and my listbox..the code not working.....and not populating data...my listbox code is... <select name="id" onChange="showname()"> <?php foreach($result1 as $row1){ ?> <option value="<?php echo $row1["id"]; ?>"><?php echo $row1["cityname"]; ?></option> <?php }?> </select>

vivek bajpai Over a year ago

i replace my complate code with your code ...how i implement your code in my file........plz see my updated code in question

vivek bajpai Over a year ago

yes i put this...soorry my updated code <option value="<?php echo $row1["cityname"]; ?>"><?php echo $row1["cityname"]; ?></option> but wont work

AdrienXL Over a year ago

I forgot some brackets. I updated the edited loop in my answer.

Collectives™ on Stack Overflow

Get selected value from drop down box and use to populate text box php javascript

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related