How to add onClick in html option?

Question

What im trying to do is when the <option> is clicked the value will be displayed in the <input type='text'>

here is my code right now:

<select id='months'>
   <option value='9' id='months9'>9 Months</option>
   <option value='10' id='months10'>10 Months</option>
   <option value='11' id='months11'>11 Months</option>
   <option value='12'id='months'>12 Months</option>
</select>

if($months == '9'){
   echo 'today +9 months';
}
if($months == '10'){
   echo 'today + months';
}
if($months == '11'){
   echo 'today +11 months';
}
if($months == '12'){
   echo 'today +12 months';
}

<input type='text' name='signoff_date'>

NOTE: I know this code will not work i'm just giving you idea how my program works.

I hope you understand it. Thanks

so far i only tried php codes that only changes the value of the input text after you submit the form — adrian pascua
– adrian pascua, Commented Nov 9, 2016 at 14:41
Please check this link:-stackoverflow.com/questions/3487263/… — Razia sultana
– Razia sultana, Commented Nov 9, 2016 at 15:02

Jordan Ellis · Accepted Answer · 2016-11-09 14:47:27Z

1

To get the current value of the select, use the onchange event:

function updateValue(value)
{
    document.getElementById('signoff_date').value = value
}

// set a defalt value
updateValue(document.getElementById('months').value)

<select id='months' onchange="updateValue(this.value)">
   <option value='9' id='months9'>9 Months</option>
   <option value='10' id='months10'>10 Months</option>
   <option value='11' id='months11'>11 Months</option>
   <option value='12'id='months'>12 Months</option>
</select>

  
<input type='text' name='signoff_date' id="signoff_date">

answered Nov 9, 2016 at 14:47

Jordan Ellis

4614 silver badges18 bronze badges

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

Comments

Rafał Cz. · Accepted Answer · 2016-11-09 14:40:29Z

0

$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    $('input[name="signoff_date"]').val(valueSelected);
});

answered Nov 9, 2016 at 14:40

Rafał Cz.

7879 silver badges19 bronze badges

Comments

Professor Abronsius · Accepted Answer · 2016-11-09 14:45:02Z

0

Untested but something like this perhaps - assign an onchange event handler rather than a click handler.

<script type='text/javascript'>
    function evtoption(e){
        var el=e.target ? e.target : e.srcElement;
        var selected=el.options[ el.options.selectedIndex ];
        var value=selected.value;
        var txt=selected.text;
        var id=selected.id;

        document.querySelectorAll('input[name="signoff_date"]')[0].value=id+value+txt;
    }

    document.getElementById('months').addEventListener( 'change', evtoption, false );
</script>

answered Nov 9, 2016 at 14:45

Professor Abronsius

33.9k5 gold badges36 silver badges49 bronze badges

Collectives™ on Stack Overflow

How to add onClick in html option?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related