Change content of Input Field when checkBox is checked

Question

i want to change the content of my Searchbox when the checkBox is checked.

So i got following checkboxes:

<li><label style="margin-left:20px">Bars:  <input type="checkbox"></label><li>
<li><label style="margin-left:20px">Clubs:  <input type="checkbox"></label><li>

And this is my input field "Searchbox"

 <input id="pac-input" class="controls form-control" type="text" placeholder="Search Box">

When no checkbox is activated the SearchBox is clean.

Iam searching for a possibility to change the content of my checkbox to Bars when the Bars checkBox is activated and i want to change it to Clubs when Clubs checkBox is activated.

Dariush Salami · Accepted Answer · 2017-05-08 16:55:49Z

2

You can use this code if you want to do this in pure JavaScript way:
HTML:

<li><label style="margin-left:20px">Bars:  <input id="bar" type="checkbox" onclick="updateSearchBox();"></label><li>
<li><label style="margin-left:20px">Clubs:  <input id="club" type="checkbox" onclick="updateSearchBox();"></label><li>
<input id="searchBox" class="controls form-control" type="text" placeholder="Search Box">

JavaScript:

var barCheckBox = document.getElementById('bar');
var clubCheckBox = document.getElementById('club');
var searchBox = document.getElementById('searchBox');
function updateSearchBox() {
    if (barCheckBox.checked) {
        searchBox.value += ' Bars';
    } else if (clubCheckBox.checked) {
        searchBox.value += ' Clubs';
    } else {
        searchBox.value = '';
    }
}

edited May 8, 2017 at 16:55

answered May 7, 2017 at 13:51

Dariush Salami

1551 silver badge6 bronze badges

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

1 Comment

ChristopherG1994 Over a year ago

I tried your way and it works, Thank you so much. But if there already text in the searchbox and i check the bars or clubs checkbox it delete the text and update it to bars and clubs .. but what i want is to add bars or clubs to the existing text. Something linke searchBox.value= searchbox text + 'Clubs';

Collectives™ on Stack Overflow

Change content of Input Field when checkBox is checked

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related