Using javaScript not getting value from dropdown and showing in div

Question

javaScript code: Getting data from dropdown and showing into div inner html.

  function showcost() {
        var days = document.getElementById("Ddays");
        var Dudays = days.options[days.selectedIndex].text;
        var div = document.getElementById('cost');
        div.innerHTML = div.innerHTML + Dudays * 1200;
    }

Dropdown code: onclick calling function showcost()

<select class="form-control" name="Ddays" id="Ddays" onchange="showcost()">
               <?php $max_days = $HospitalPack->treat_duration + $HospitalPack->recovery_duration;  ?>
                        @for($i = $HospitalPack->treat_duration; $i<=$max_days; $i++)
                         @if($i == $HospitalPack->treat_duration)
                           <option selected="selected" value="{{$i}}{{'Days'}}" >{{$i}}{{' Days'}}</option>
                         @else
                           <option value="{{$i}}{{'Days'}}" >{{$i}}{{' Days'}}</option>
                         @endif
                        @endfor
                </select>

div code: here showing data, after calculating values.

<div class="huge" id="cost">{{$HospitalPack->treat_duration * 1200 + $HospitalPack->treat_cost}}</div>

Above code is doing nothing. I think I'm unable to find mistake.

Replace days.options[no.selectedIndex].text with days.options[days.selectedIndex].text. — Kiran
– Kiran, Commented May 23, 2017 at 6:15

LinJI · Accepted Answer · 2017-05-23 06:26:10Z

1

First,'no.selectedIndex' is useless, you should remove the part 'no.'.Maybe you mean this way/??

var Dudays = days.options[days.selectedIndex].text;

Besides that, when you click the select element the browser would trigger 'onclick'.If you wanna update the view after you select a new option, you need to use 'onchange' instead. And I prefer you can show me the DOM structure without php codes.

answered May 23, 2017 at 6:26

LinJI

1265 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Giridhari Lal Over a year ago

I made both changes. Is dere anything other ??

LinJI Over a year ago

Can you show me the 'Page Source'? You can get it by right mouse button in Chrome

Giridhari Lal Over a year ago

It's working now but actually in Dudays data is like 9 Days I just want to 9 so can you tell me how??

LinJI Over a year ago

Oh, I get it...replace the origin options with: <option selected="selected" value="{{$i}}" >{{$i}}{{' Days'}}</option> And then: var Dudays = days.options[days.selectedIndex].value;

LinJI Over a year ago

The easiest way is saving it in a global variable. like 'window._valueFrom = days;'

|

Giridhari Lal · Accepted Answer · 2017-05-23 07:03:41Z

javaScript Code:

function showDucost() {
        var days = document.getElementById("Ddays");
        var Dudays = days.options[days.selectedIndex].text;
        var pos = Dudays.indexOf("Days");
        var days = Dudays.slice(0,pos-1);
        var div = document.getElementById('Dcost');
        var treat_cost = <?php echo $HospitalPack->treat_cost ?>;
        div.innerHTML = treat_cost + days * 1200;
    }

Dropdown code:

<select class="form-control" name="Ddays" id="Ddays" onchange="showDucost()">
    <?php $max_days = $HospitalPack->treat_duration + $HospitalPack->recovery_duration;  ?>
    @for($i = $HospitalPack->treat_duration; $i<=$max_days; $i++)
    @if($i == $HospitalPack->treat_duration)
  <option selected="selected" value="{{$i}}{{'Days'}}" >{{$i}}{{' Days'}}</option>
  @else
<option value="{{$i}}{{'Days'}}" >{{$i}}{{' Days'}}</option>
 @endif
  @endfor

div element code :

<div class="huge" id="Dcost">{{$HospitalPack->treat_duration * 1500 + $HospitalPack->treat_cost}}</div>

Collectives™ on Stack Overflow

Using javaScript not getting value from dropdown and showing in div

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related