Display value of dropdown list using javascript.

Not entirely sure what you mean, but I'm guessing you're trying to append the value from #cdDelPoscod onto m8. If that's the case, then you'll need to get the text (innerHtml, innerText), not just the element

var m8 = "Delivery of floor pack to included: " + document.getElementById('cbDelPoscod').innerHTML;

Select allOpen in new window

Thanks.

As a 2nd part to this question (if you don't mind me asking within this question of course).
Is there a way of adding rows in certain position within the table?

The function in its entirety:

function toggleMessage(MessId, Action)
	    {
	
            var MessTxt = "";
            var m1 = "All Metsa Wood Joist material including perimeter noggins for deck support, 6m non-load bearing partition noggins";
            var m2 = "All Metsa Wood Joist material including rim board, 6m non-load bearing partition noggins included";
            var m3 = "Finnseal end caps for masonry construction, restrain straps for lateral wall support";
            var m4 = "Rimboard and noggins for &TEXT(SUM(Calculation!H12:H15),0)&  party wall(s) included";
            var m5 = "Stair trimmers and hangers to support all floor joists included";
            var m6 = "No delivery included. Delivery cost added to final floor price";
            var m7 = "All Metsa Wood Joist material including rim board, 6m non-load bearing partition noggins included";
            var m8 = "Delivery of floor pack to included: " + document.getElementById('tbFloorWidthA');
            var m9 = "Restrain straps for lateral wall support in a 2.5 to 3 storey house";
            var m10 = "This price is indicative and for domestic floors, only. For commercial floors, please get in touch with Metsa Wood";
            var m11 = "Delivery within 3 weeks from date of order. Off-loading from transport vehicle is the customer's responsibility";
            var m12 = "Final floor price can vary when floor is fully designed. For full floor design please forward this printout with full";
            var m13 = "set of drawings in PDF, DWG or IFC format to uk@metsagroup.com with subject 'Finnframe";
            var m14 = "Price valid until &DAY(TODAY()+90)&/&MONTH(TODAY()+90)&/&YEAR(TODAY()+90)&, which is 90 calendar days from today.P41 Price valid until &DAY(TODAY()+90)&/&MONTH(TODAY()+90)&/&YEAR(TODAY()+90)&, which is 90 calendar days from today.P41 Price valid until &DAY(TODAY()+90)&/&MONTH(TODAY()+90)&/&YEAR(TODAY()+90), which is 90 calendar days from today";

         

            switch(MessId) {
                case "m1":
                    MessTxt = m1;
                    break;
                case "m2":
                    MessTxt = m2;
                    break;
                case "m3":
                    MessTxt = m3;
                    break;
                case "m4":
                    MessTxt = m4;
                    break;
                case "m5":
                    MessTxt = m5;
                    break;
                case "m6":
                    MessTxt = m6;
                    break;
                case "m7":
                    MessTxt = m7;
                    break;
                case "m8":
                    MessTxt = m8;
                    break;
                case "m9":
                    MessTxt = m9;
                    break;
                case "m10":
                    MessTxt = 10;
                    break;
                case "m11":
                    MessTxt = m11;
                    break;
                case "m12":
                    MessTxt = m12;
                    break;
                case "m13":
                    MessTxt = m13;
                    break;
                case "m14":
                    MessTxt = m14;
                    break;
            } 
           
            if (Action == ('a')) {

                document.getElementById("ResultsTableTxt").insertRow(-1).innerHTML = '<tr id=' + MessId + '><td>' + MessTxt + '</td></tr>';
            }
            else {
                document.getElementById("ResultsTableTxt").deleteRow(MessId);
            }
         }

Select allOpen in new window

As you can see, the rows are all numbered (M1,M2,M3,M4 etc).

So if the javascript function is run and ads a M5 and is then run again and a M2.  It will be added above the M5.

Hope this makes sense.

oh, the inner HTMl doesn't work quite as it should as it displays everything in the dropdown list and not just the selected item..

Hmmm. Not really sure it would work. Basically, you can pass a row index into the insertRow() method to tell it where to put it. 0 will put it at the start, -1 puts it at the end. Other numbers will place it accordingly. The problem is you wouldn't know the position just from MessId.

Maybe if you explained what you were trying to achieve (in non-technical terms) we may be able to offer you an alternative solution.

OK. Instead of innerHTML, just grab the value:

document.getElementById('cbDelPoscod').value;

Hi Chris,

Thanks for your comments.

In non technical terms:

As the user uses this form,  a list of information is displayed below on the page to them, i.e. when they select a 'Delivery postcode' a message will be displayed at the bottom of the page saying something like .. "Delievry to postcode: *whatever the user has selected goes here*".

Then as they complete the form more information is built up at the bottom of the page.

Now, the reason is that I would always like the information to show in relative order to each other (see within the script for the order).  I just think that as far as the user experience goes it would be much better if things were always in the same place.



Just had a thought - how about after adding a new row into the table - is it possible to do a sort on the table?

document.getElementById('cbDelPoscod').value;

great - just for future reference.. How do I get the other information from the dropdown such as the selected text as well as the value?

To get the selected text, you'd need to get the index of the selected item first, and then drill down to the text. Something like this:

var index = document.getElementById('cbDelPoscod').selectedIndex;
var text = document.getElementById('cbDelPoscod').options[index].text;

Select allOpen in new window

I'll have a think about the other bit of your question and comment shortly.

Thanks Chris.

var index = document.getElementById('cbDelPoscod').selectedIndex;
var text = document.getElementById('cbDelPoscod').options[index].text;

Is it possible to do the above in one line (just to make it neater)?


I've just been having a think about the other part of the question I asked above and I think I may have a better way.

I'll just run it past you.

Rather than having things created on the fly, I could have all the table rows already in the table but with their style set to visible=false.

I could then just flick them on or off depending on what the user has clicked.

That would retain the order that I want and would be simpler to maintain.

What do you think?

Yeah - you can do it all in one line, but I'm whether it's neater is a matter of opinion :)

var text = document.getElementById('cbDelPoscod').options[document.getElementById('cbDelPoscod').selectedIndex].text;

Select allOpen in new window

You might want to start thinking about using jQuery if your app is going to do more javascript processing - it will make your life a whole lot easier. For example, to do the same as above, you'd just have this:

$("#cbDelPoscod option:selected").text();

Select allOpen in new window

I was thinking something along the same lines as your idea for the list. If it's just for display, then it's probably the easiest solution.

Thanks Chris.

I'm trying to learn Jquery at the moment.  Still trying to figure out how Jquery and JavaScript fit together.  I seem to be using a hybrid of the 2 languages at the moment.  Not sure if its best practise or not though.

With regards to the show/hide method, I've managed to get that up and running and also thought I'd put the data in a database for good measure.

How do I show/hide table rows from the script (pref in 1 line of code)?


I've had a few attempts but I cant seem to get it to work...

  document.getElementById("ResultsTableTxt").rowID().style.display = 'none';

Select allOpen in new window

Do you debug your javascript?  if so, how do you do it?

jQuery IS Javascript - it's just a framework wrapper around raw javascript to make it a little less painful. It's perfectly acceptable to use jQuery and raw Javascript in your code - in fact, often it's necessary.

While you're learning I really wouldn't worry about getting all your function on 1 line - I'd actually advise that you don't do this. Write your code in a more verbose manner until you fully understand what you're doing - then you can start shortcutting it. It will also help you to debug your scripts this way.

I do debug javascript - and probably the easiest way to do it is by using the Web Developer tools that are available in most modern browsers (press F12 to see them). Firefox has it's own built in tools but it also has a plugin called FireBug that helps with all sorts of WebDev stuff, including Javascript / CSS etc. download it, install it, learn it!

In order for your code to work, you need a way to identify exactly which row you want to show. There are several ways of doing this, but I'd probably go with data attributes. You'd give each of your table rows a data attribute that uniquely identifies it. Probably makes sense to use the MessId value, so your table might look like this:

<table id="ResultsTableTxt">
  <tr data-ref="m1"><td>Row 1</td></tr>
  <tr data-ref="m2"><td>Row 2</td></tr>
  <tr data-ref="m3"><td>Row 3</td></tr>
  <tr data-ref="m4"><td>Row 4</td></tr>
  <tr data-ref="m5"><td>Row 5</td></tr>
</table>

Select allOpen in new window

Then you can just filter the row by the MessId an add a class to the row that shows it (assuming all your table rows are hidden by default)

$('#ResultsTableTxt tr').filter( function() { return $(this).data('ref') == MessId } ).addClass('show');

Select allOpen in new window

Your CSS might look something like this:

#ResultsTableTxt tr { display:none; }
#ResultsTableTxt tr.show ( display: table-row; )

Select allOpen in new window

You can see a mini-demo here -> https://jsfiddle.net/ChrisStanyon/fwqp31n0/

Thanks Chris.

Got this now and thanks for the advice.  Have just installed Firefox and am debugging as we speak.

How do I append text to one of my column rows?

i.e.

The text in the table will say:

1. Delivery included to postcode: **JavaScript to put value here**

OR it could say:

2. You have selected: **JavaScript to put value here** for your answer in M2.

I could put a some place holder text in the database so that I can find and replace it using javascript?

By the way - all your comments are taken on-board.  I appreciate you taking the time to teach me.

you may can use the javascript   rows  to get the row index from the <tr>

var ix = document.getElementById("ResultsTableTxt").rows.namedItem("m2").rowIndex;
document.getElementById("ResultsTableTxt").insertRow(ix)