Set a table to show Information depending multiple selections

Evoinsec

What I need is to display some info depending on multiple values or selections

For example I need to choose a amount of money($1, $10, $50) then a period of time ( 1 day, 10 days, 50 days) and depending of those two values show some information.

The second value (time) change by the first value ( amount of money ) and the final information, depend on the combination of both.

I'm new to javascript and html so I really have idea where to start, thanks in advance.

lcHatter

As long as your values are all static, this is doable with just html and js.

HTML - make a spot for the two selections and for the result:

<fieldset id="moneyRadios">
    <input id="oneDollar" type="radio" name="money" value="1"><label for="oneDollar">$1</label>
    <input id="tenDollar" type="radio" name="money" value="10"><label for="tenDollar">$10</label>
    <input id="fiftyDollar" type="radio" name="money" value="50"><label for="fiftyDollar">$50</label>
</fieldset>
<fieldset id="dayRadios">
</fieldset>
<div id="result"></div>

JS - first make the money radios do something when clicked

var moneyInputs = document.getElementById('moneyRadios').getElementsByTagName('input');
    for (var i =0; i < moneyInputs.length; i++)
    {
        moneyInputs[i].addEventListener('click',moneyClicked, false);
    }

Second, send which money radio was clicked and clear the result

function moneyClicked(moneyRadios) {
        var moneySelected = document.querySelector('input[name = "money"]:checked').value;
        setDayOptions(moneySelected);               
        document.getElementById('result').innerHTML ='';
    }

Now, you said that the day options would change depending on which money value the user picks, but you only gave one set of day options. I made up some day options for each money value, so modify dayOptions to your needs with the format 'moneyValue':[dayOption1,dayOption2,dayOption3]. Then use the money value to make some Day radios and put them in the appropriate fieldset. Then add a click event to the newly made radios.

function setDayOptions(dollars){
        var dayOptions = {'1':[1,10,50], '10':[2,20,100], '50':[3,30,150]};
        var daysFieldset = document.getElementById('dayRadios');
        var selectedDayOptions = dayOptions[dollars];
        daysFieldset.innerHTML='';
        for (var i = 0; i < selectedDayOptions.length; ++i) {

            var dayRad = document.createElement('input');
            dayRad.type='radio';
            dayRad.id='days'+selectedDayOptions[i];
            dayRad.name='day';
            dayRad.value=selectedDayOptions[i];

            var dayRadLabel = document.createElement('label');
            dayRadLabel.htmlFor='days'+selectedDayOptions[i];
            var labelText = document.createTextNode(selectedDayOptions[i]+' Days');
            dayRadLabel.appendChild(labelText);         

            daysFieldset.appendChild(dayRad);
            daysFieldset.appendChild(dayRadLabel);
        }
        var dayInputs = document.getElementById('dayRadios').getElementsByTagName('input');
        for (var i =0; i < dayInputs.length; i++)
        {
            dayInputs[i].addEventListener('click',dayClicked, false);
        }
    }

Finally, do something when a day radio is clicked. You can use the selected values to generate a table, or show a particular pre-made table, or whatever you like. I just displayed the selections and made a rate out of them.

function dayClicked(){
        var moneySelected = document.querySelector('input[name = "money"]:checked').value;
        var daysSelected = document.querySelector('input[name = "day"]:checked').value;
        var rate = moneySelected/daysSelected;
        document.getElementById('result').innerHTML = '<p>Money: $'+moneySelected+' Days: '+daysSelected+' is $'+rate+' per day</p>';
    }

You can see all the code working here: https://jsfiddle.net/fz44mpmo/4/

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Update multiple rows in sql table for checkbox selections

From Dev

Update multiple rows in sql table for checkbox selections

From Dev

Filter table results based on multiple dropdown selections

From Dev

Show DIV Text based on Multiple Selections jQuery and PHP

From Dev

Show result depending on the value of another table

From Dev

Set CSS rules depending the value of a table cell

From Dev

Show multiple table rows in a table

From Dev

jQuery/Javascript method to show/hide multiple fields upon selection with common fields to multiple selections

From Dev

the table doesn't show the information in angular

From Dev

Handsontable dropdowns with multiple selections

From Dev

Display on multiple selections

From Dev

SQL Query, Multiple Selections

From Dev

How to show multiple tables depending on key in the Map using JSTL?

From Dev

Android ViewPager Show Multiple Fragments depending on Screen Size

From Dev

How do I make multiple selections show up on the screen with their user input?

From Dev

Sort result set based on information in another table

From Dev

Format-Table set column width depending on the output buffer width

From Dev

cakephp3 link one table to multiple tables depending on type

From Dev

Jquery to hide table rows depending on multiple values from different columns

From Dev

how to toggle multiple inputs within a table depending on radio button selection

From Dev

how to populate a table's fields with multiple values depending on the row

From Dev

Jquery to hide table rows depending on multiple values from different columns

From Dev

MediaWiki / OOUI: SelectWidget for multiple selections?

From Dev

Format multiple text selections in PowerPoint

From Dev

icCube cascading Filters with multiple selections

From Dev

return multiple selections Jlist as a string

From Dev

jQuery checkbox selection with multiple selections

From Dev

return multiple selections Jlist as a string

From Dev

How to target multiple selections with xclip

Related Related

  1. 1

    Update multiple rows in sql table for checkbox selections

  2. 2

    Update multiple rows in sql table for checkbox selections

  3. 3

    Filter table results based on multiple dropdown selections

  4. 4

    Show DIV Text based on Multiple Selections jQuery and PHP

  5. 5

    Show result depending on the value of another table

  6. 6

    Set CSS rules depending the value of a table cell

  7. 7

    Show multiple table rows in a table

  8. 8

    jQuery/Javascript method to show/hide multiple fields upon selection with common fields to multiple selections

  9. 9

    the table doesn't show the information in angular

  10. 10

    Handsontable dropdowns with multiple selections

  11. 11

    Display on multiple selections

  12. 12

    SQL Query, Multiple Selections

  13. 13

    How to show multiple tables depending on key in the Map using JSTL?

  14. 14

    Android ViewPager Show Multiple Fragments depending on Screen Size

  15. 15

    How do I make multiple selections show up on the screen with their user input?

  16. 16

    Sort result set based on information in another table

  17. 17

    Format-Table set column width depending on the output buffer width

  18. 18

    cakephp3 link one table to multiple tables depending on type

  19. 19

    Jquery to hide table rows depending on multiple values from different columns

  20. 20

    how to toggle multiple inputs within a table depending on radio button selection

  21. 21

    how to populate a table's fields with multiple values depending on the row

  22. 22

    Jquery to hide table rows depending on multiple values from different columns

  23. 23

    MediaWiki / OOUI: SelectWidget for multiple selections?

  24. 24

    Format multiple text selections in PowerPoint

  25. 25

    icCube cascading Filters with multiple selections

  26. 26

    return multiple selections Jlist as a string

  27. 27

    jQuery checkbox selection with multiple selections

  28. 28

    return multiple selections Jlist as a string

  29. 29

    How to target multiple selections with xclip

HotTag

Archive