display dropdown value from a csv file

hi experts,

i have a csv named TF.csv with the following contents:

"13. Aviation, passengers","13"
"14. Aviation, freight","14"
"15. Aviation, other","15"
"16. Shipping, passengers","16"
"17. Shipping, freight","17"
"18. Shipping, other","18"
"20. Tourism","20"

i am in need of help for a jquery, ajax or javascript  that can do the following:
-read the TF.csv file
-put the every row of the file in a dropdown named TFvalue
-the display text must start with please choose with a value of 000
-the display text must be --13. Aviation, passengers-- and the value of the option must be --13--
-it a option is not selected when submitting the form an alert must be displayed
-the value will be stored in a database. on retrieval the stored data must show as selected. if the retreival is blank then the please choose is displayed
eawebAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
nap0leonConnect With a Mentor Commented:
This reads the file, populates the dropdown, and runs the validation requested.

With no insight to your server side language that you would be using to connect to the database to save the information or how you would retrieve this information, I ignored that requirement.  You will want to change the "action" so that the form submits to a webpage that can submit the posted information to your database.

For setting the drop-down to the value returned from the database... Lines 28-32: I coded this so that if your server side language is Classic ASP and you do whatever you need to do to connect to your database and get set an ASP variable "valFromDatabase", that value will be selected.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Q_27997429</title>
	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

</head>
<script type="text/javascript">
$(document).ready( function (){
	jQuery.get('http://localhost/e-e/Q_27997429data.txt', function(data) {
		var theList = data;
		var arr_theList = theList.split("\n");
		var newTFOptions = "<option value='000'>Please Choose</option>";
		for (var i=0; i<arr_theList.length; i++) {
			var arrListItems = arr_theList[i].split("\",\"");
			if (typeof arrListItems[1] != 'undefined') {
				var strText = arrListItems[0].substring(1,arrListItems[0].length);
				var strValue = arrListItems[1].substring(0,arrListItems[1].length-2);

				if (strText != '' && strValue != '') {
					newTFOptions += "<option value='" + strValue + "'>" + strText + "</option>";
				}
			}
		}
		$('#TFValue').html(newTFOptions);
		
		//Set this line with your server side code to the value that is returned from the database
		var currentValue = '<%=valFromDatabase%>';
		if ( currentValue != '' ) {
			$('#TFValue').val(currentValue);
		}
	});
});

function validateForm() {
	var errMessages = ''
	if ($('#TFValue').val() == '000') {
		errMessages += 'yo! pick a value for TFValue\n';
	}

	if (errMessages.length > 1) {
		alert(errMessages);
	} else {
		//no errors - submit the form
		document.myForm.submit();
	}
}
</script>
<body>
	<div id="container">
		<form name="myForm" action="" method="GET">
			<select id="TFValue" name="TFValue">
			</select>
			<br/>
			<input type="button" onclick="validateForm()" value="Submit"/>
		</form>
	</div>
</body>
</html>

Open in new window

0
 
eawebAuthor Commented:
hi nap0leon

I'am getting the following error:
Line: 2
Char: 30044
Could not set the selected property. Invalid index.
Code: 0
0
 
eawebAuthor Commented:
Sorry nap0leon. Problem solved.

I had to download the jquery file on my internal server.

Thanks
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
eawebAuthor Commented:
nap0leon,

when testing your code alone it is working fine, but when using your code with jQuery v1.7.2 the dropdown data becomes blank. the latest jquery you are using is jQuery v1.9.0.

is thare a way we can solved this issues since i have other codes working on 1.7.2

attache the jquery file i am using
jquery.js
0
 
nap0leonCommented:
Hmmm, very odd.  The functions I'm using have been around since 1.4ish...

I won't be able to get back to this until morning (14 hours from now)- will take a look at it then with a 1.7.2 reference.
0
 
nap0leonCommented:
Works fine when I download the file you attached and reference it as
<script src="Q_27997429-jquery.js" type="text/javascript"></script>

Open in new window

or when pointing to the 1.7.2 library jquery's site:
<script src="http://code.jquery.com/jquery-1.7.2.js" type="text/javascript"></script>

Open in new window


Due to cross-site scripting concerns, make sure you are looking at the page using "localhost" or equivalent.  If you try running it as "file://" it won't work.
0
 
eawebAuthor Commented:
when trying below code part i get [object Object] warning message

//Value that is returned from thedatabase
var currentValue = '05';
if ( currentValue != '' ) {
alert($('#TFValue').val(currentValue));
$('#TFValue').val(currentValue);
}

and i get the please choose option
0
 
eawebAuthor Commented:
hi nap0leon,

I changed the code a bit but the part of when the data is retrieved from the database is still not working. i trie to stimulate 04 as a database data and it doesn't work.

<script type="text/javascript">
$(document).ready( function (){
      jQuery.get('WT.txt', function(data) {
            var theList = data;
            var arr_theList = theList.split("\n");
            //var newTFOptions = "<option value='000'>Please Choose</option>";
            var arrOptions = ["<option value='000'>Please Choose</option>"];
            for (var x=0; x<arr_theList.length; x++) {
                  var arrListItems = arr_theList[x].split("\",\"");
                  if (typeof arrListItems[1] != 'undefined') {
                        var strText = arrListItems[0].substring(1,arrListItems[0].length);
                        var strValue = arrListItems[1].substring(0,arrListItems[1].length-2);

                        if (strText != '' && strValue != '') {
                              //newTFOptions += "<option value='" + strValue + "'>" + strText + "</option>";
                              arrOptions.push("<option value='" + strValue + "'>" + strText + "</option>");
                        }
                  }
            }
            //$('#TFValue').html(newTFOptions).trigger("liszt:updated");
            $('#TFValue').html(arrOptions.join()).trigger("liszt:updated");

            //Value that is returned from the database
            var currentValue = '04';
            if ( currentValue != '' ) {
                  $('#TFValue').val(currentValue);
            }
      });
});
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.