0

As a newbie to JS/JQuery I couldn't find the answer I was looking for so hope someone can help.

I'm creating a simple form/checklist and would like for each of my 40 employees to be able to select their name from a dropdown at the bottom to apply their signature(initials). There would be 3 columns in the CSV, two for their name (surname and forename) and the third for their initials eg. 'Smith, John, JS'. When they select their name from the list, the dropdown would close and display their initials only. As the staff change the CSV would be easier for me to update remotely.

I found plenty of ways to approach it using PHP and AJAX but thought JQuery would be able to do it?

Hope that makes sense.

2 Answers2

-1

If you are happy enough storing your data as JSON instead of a CSV, then something like the below would work quite well. It could be done with CSV too, but unless there is a good reason to use a CSV I would personally opt for JSON.

$(document).ready(function() {
  vals = $.getJSON('https://jsonblob.com/api/722aba1f-1580-11e8-aee7-670a824b2c57', function(data) {
    data.forEach(function(e) {
      $("#initials").append('<option value="' + e.initials + '">' + e.forename + ' ' + e.surname + '</option>')
    });

    $("#initials").change(function() {
       $("#initials-display").text($("#initials").val());
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="initials">
</select>
<div id="initials-display"></div>
c3st7n
  • 1,891
  • 13
  • 15
  • I don't see why not. Forgive my ignorance here, but can I can replace $.getJSON ('http://....' ) with $.getJSON('url:mylist.JSON) ? –  Feb 19 '18 at 16:02
  • Yeah of course, sorry I should have elaborated on that. – c3st7n Feb 19 '18 at 16:05
  • Not at all, I really appreciate your help. Would this be the correct JSON format? { "initials": "JS", "forename": "John", "surname": "Smith", } Apologies for the spoon feeding .... –  Feb 19 '18 at 16:07
  • If you look at https://jsonblob.com/722aba1f-1580-11e8-aee7-670a824b2c57 that is the format I used. Your example looks good as a single entry, apart from JSON doesn't allow a trailing comma in a collection (so just after Smith). The code is expecting an array of "user" objects/maps, so you would need to put your example inside `[]`. – c3st7n Feb 19 '18 at 16:10
  • Awesome! Large beer is on its way to you!!! Now to try getting it all working..... I may be back :-s –  Feb 19 '18 at 16:14
  • I'm placing this inside a table: and adding this after the script tags at the bottom. Doesn't seem to load in the list though. I must be missing something.... must learn to post code –  Feb 19 '18 at 17:02
  • Dev tools are showing this: Uncaught TypeError: $.getJSON is not a function –  Feb 19 '18 at 17:11
  • Are you actually loading jQuery on the page? According to the docs getJSON has been part of jQuery since v1.0. You could check if it is loaded by doing `jQuery().jquery` in dev tools console. – c3st7n Feb 19 '18 at 17:12
  • Ah, it could be you are using the slim version of jQuery (as per: https://stackoverflow.com/questions/40600396/jquery-issue-typeerror-getjson-is-not-a-function). The slim version has a lot of functionality missing. – c3st7n Feb 19 '18 at 17:15
  • that was exactly it. Had to maintain the slim version for selectpicker but added the min version too and it works perfectly. Big thank you!! –  Feb 19 '18 at 20:33
  • I spoke too soon, it isn't returning the initials, just a list of names... –  Feb 19 '18 at 20:34
  • So the value when the form is submitted should be the initials. I chose to display the name as the options but you want the drop down to show the initials, you can change the append to have '' instead. – c3st7n Feb 19 '18 at 22:48
  • I was aiming to be able to click the drop-down and see the full names, then when I make a selection it displays the initials after the drop-down closes. Hope that makes sense, if it's even possible –  Feb 19 '18 at 23:35
  • I'm not sure I understand what you mean by closes? If you mean when they make a choice, it is possible. – c3st7n Feb 19 '18 at 23:37
  • I updated the answer to do what I think you what. Take a look and let me know what you think. – c3st7n Feb 19 '18 at 23:50
  • Finally got that tested and all works great! That was exactly it. I wanted the staff to select their name and just maintain the display of their initials after selection. Many thanks for your time and help, much appreciated. –  Feb 21 '18 at 09:43
  • As one last thing for completeness, what if I didn't want the initials to appear in another location or div. Say I clicked on the dropdown, selected a name, the dropdown closes up and a name is shown. What if after the selection I wanted to show the initials instead of the name? –  Feb 21 '18 at 15:26
-1

This reads in the data/list from a JSON file (data/stafflist.json), adds the list to my dropdown, then displays the associated initials of the employee in another div once the employee has selected their name.

$(document).ready(function() {
  vals = $.getJSON('data/stafflist.json', function(data) {
    data.forEach(function(e) {
      $("#initials").append('<option value="' + e.initials + '">' + e.forename + ' ' + e.surname + '</option>')
    });

    $("#initials").change(function() {
       $("#initials-display").text($("#initials").val());
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="initials">
</select>
<div id="initials-display"></div>