Solved

populate dynamic drop down from a csv

Posted on 2016-11-04
3
120 Views
Last Modified: 2016-11-04
hello all,
i have a requirement  where a dynamic dropdown form has to be built from csv data.
for example:
Label_ID,PN,CUSTPN,SN,DC,DESC
A1234,123456,_Blank,,H1234,ALPHA
B1234,234567,876543,A1B2C3D4,J0987,_Blank
C1234,345678,,,_Blank,
D1234,456789,765432,,,BETA
E1234,567890,654321,B1C2D3E4,,GAMMA

What I am looking to do is to be able to chose A1234 from a drop down menu populated by the data under LABEL_ID. After selection, fields for PN,CUSTPN,SN,DESC would be available (appear) & populated with the associated data. any ideas how to implement this in php , ajax, or javascript.
any suggestions are appreciated,
thanks.
0
Comment
Question by:rishi vindya
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41874578
First the PHP bit.
<?php
$file = fopen('t1829.csv', 'rt');

$headers = fgetcsv($file);
$search = isset($_GET['search']) ? $_GET['search'] : false;
$result = false;
if ($search) {
  while($row = fgetcsv($file)) {
    if ($row[0] == $search) {
    $result = new stdClass;
        foreach($row as $i => $r) {
      $result->{$headers[$i]} = $r;
    }
    break;
    }
  }
}
die(json_encode($result));

Open in new window


Adjust $file to be where your CSV file is and then test the php script with the following url
http://server/getData.php?search=A1234
You should get something like this back
{"Label_ID":"A1234","PN":"123456","CUSTPN":"_Blank","SN":"","DC":"H1234","DESC":"ALPHA"}

Open in new window

Nearly there - just need to define the select and the ajax

HTML
<form>
<select name="search">
  <option value="">-- SELECT ONE -- </option>
  <option value="A1234">A1234</option>
  <option value="B1234">B1234</option>
  <option value="C1234">C1234</option>
  <option value="D1234">D1234</option>
  <option value="E1234">E1234</option>
</select>
PN <input type="text" name="PN" id="PN" /><br/>
CUSTPN <input type="text" name="CUSTPN" id="CUSTPN" /><br/>
SN <input type="text" name="SN" id="SN" /><br/>
DC <input type="text" name="DC" id="DC" /><br/>
DESC <input type="text" name="DEsC" id="DESC" />
</form>

Open in new window

Rudimentary but gets the job done.

Finally the AJAX
<script>
$(function() {
  // BIND TO THE onchange
  $('#LABEL_ID').change(function() {
    // MAKE THE AJAX CALL
    $.ajax({
      url: 'getData.php',
      data: {
        search: $(this).val()
      },
      type: 'GET',
      dataType: 'JSON'
    }).done(function(resp) {
      if (resp) {
        // SET THE DATA
        for(var i in resp) {
          $('#' + i).val(resp[i]);
        }
      }
    });
  });
});
</script>

Open in new window

Working sample here

EDIT
Note in the done() callback we loop over the returned object and use its keys to identify the controls we want to set. In this way you can add / rename fields in your CSV and as long as you have an input with the same ID as the Fieldname - this code will set it.
1
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 41874658
Test page : https://jsfiddle.net/a4bqsqbg/
<select id="Label_ID" name="Label_ID"><option>select something...</option></select>
<input type="text" id="PN" name="PN" />
<input type="text" id="CUSTPN" name="CUSTPN" />

Open in new window


We get the CSV with Ajax here :
var x = new XMLHttpRequest();
x.open("GET", "/path/to/your/csv", true);
x.onreadystatechange = function() {
    if(x.readyState === 4) {
        if(x.status === 200 || x.status == 0) {
          var csv = x.responseText;
          var rows = csv.split(/\n/);
          for(var i=1;i<rows.length;i++) {
            var row = rows[i];
            var columns = row.split(","); // , is the separator
            var o = new Option(columns[0],columns[0]);
            o.dataset.pn = columns[1];
            o.dataset.custpn = columns[2];
            document.getElementById("Label_ID").appendChild(o);
          }
          document.getElementById("Label_ID").onchange = function() {
            var pn = this.options[this.selectedIndex].dataset.pn;
            var custpn = this.options[this.selectedIndex].dataset.custpn;
            document.getElementById("PN").value = pn;
            document.getElementById("CUSTPN").value = custpn;
          }

        }
    }
}
x.send(null);

Open in new window

1
 

Author Comment

by:rishi vindya
ID: 41874867
thanks guys you were saviors..
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
These days socially coordinated efforts have turned into a critical requirement for enterprises.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question