CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
ChristopherG1994
ChristopherG1994

Reputation: 9

Change content of Input Field when checkBox is checked

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.

Upvotes: 0

Views: 2493

Answers (1)

Dariush Salami
Dariush Salami

Reputation: 145

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 = '';
    }
}

Upvotes: 2

Related Questions