2

I m trying to add some text to the input search field using javascript

I tried below code: 

document.getElementsByClassName('contacts_modal_search_field')[0].innerHTML = \"test\

and many others, but unsuccessful.

this is the code : 

<div class="contacts_modal_search">
  <input class="form-control contacts_modal_search_field no_outline ng-pristine ng-valid ng-empty ng-touched" my-focused="" type="search" placeholder="Search" ng-model="search.query" autocomplete="off" style="">
  <a class="im_dialogs_search_clear tg_search_clear ng-hide" ng-click="search.query = ''" ng-show="search.query.length" style="">
    <i class="icon icon-search-clear"></i>
  </a>
</div>
Prashant Pimpale
  • 10,349
  • 9
  • 44
  • 84
ibobo
  • 91
  • 7
  • 2
    document.getElementsByClassName('contacts_modal_search_field')[0].value='Something' – Negi Rox Jul 13 '18 at 13:02
  • Possible duplicate of [Set the value of an input field](https://stackoverflow.com/questions/7609130/set-the-value-of-an-input-field) – Kulvar Jul 13 '18 at 13:04

3 Answers3

2

Use document.getElementById("id").value = "yourvalue" or document.getElementsByClassName("yourclass")[index].value = "yourvalue".

Using id: 

Enter text to be the value of the second input field:<br/>
<input type="text" id="text"/>
<br/>
<input type="button" onClick="changeValue()" value="Change Value"/>
<p/>
<input type="text" id="result"/>
<script>
function changeValue(){
 document.getElementById("result").value = document.getElementById("text").value;
}
</script>

Using class:

Enter text to be the value of the second input field:<br/>
    <input type="text" class="text"/>
    <br/>
    <input type="button" onClick="changeValue()" value="Change Value"/>
    <p/>
    <input type="text" class="result"/>
    <script>
    function changeValue(){
     document.getElementsByClassName("result")[0].value = document.getElementsByClassName("text")[0].value;
    }
    </script>

For your code:

Enter text to be the value of the search input field:<br/>
    <input type="text" class="text"/>
    <br/>
    <input type="button" onClick="changeValue()" value="Change Value"/>
    <p/>
    <script>
    function changeValue(){
     document.getElementsByClassName("form-control")[0].value = document.getElementsByClassName("text")[0].value;
    }
    </script>
<hr>
<div class="contacts_modal_search">
  <input class="form-control contacts_modal_search_field no_outline ng-pristine ng-valid ng-empty ng-touched" my-focused="" type="search" placeholder="Search" ng-model="search.query" autocomplete="off" style="">
  <a class="im_dialogs_search_clear tg_search_clear ng-hide" ng-click="search.query = ''" ng-show="search.query.length" style="">
    <i class="icon icon-search-clear"></i>
  </a>
</div>

Change value of input box on window load (using window.onload): 

        <script>
        window.onload = function(){
         document.getElementsByClassName("form-control")[0].value = "your value";
        }
        </script>
    <div class="contacts_modal_search">
      <input class="form-control contacts_modal_search_field no_outline ng-pristine ng-valid ng-empty ng-touched" my-focused="" type="search" placeholder="" ng-model="search.query" autocomplete="off" style="">
      <a class="im_dialogs_search_clear tg_search_clear ng-hide" ng-click="search.query = ''" ng-show="search.query.length" style="">
        <i class="icon icon-search-clear"></i>
      </a>
    </div>
Unmitigated
  • 76,500
  • 11
  • 62
  • 80
0

Maybe like this:

document.getElementsByClassName('contacts_modal_search_field')[0].value = "test";
 <div class="contacts_modal_search">
  <input class="form-control contacts_modal_search_field no_outline ng-pristine ng-valid ng-empty ng-touched" my-focused="" type="search" placeholder="Search" ng-model="search.query" autocomplete="off" style="">
  <a class="im_dialogs_search_clear tg_search_clear ng-hide" ng-click="search.query = ''" ng-show="search.query.length" style="">
    <i class="icon icon-search-clear"></i>
  </a>
</div>
mscdeveloper
  • 2,749
  • 1
  • 10
  • 17
0

you can input in a text box using java script.

  <div class="contacts_modal_search">
   <input class="form-control contacts_modal_search_field no_outline ng-pristine ng-valid ng-empty ng-touched" my-focused="" type="search" placeholder="Search" ng-model="search.query" autocomplete="off" style="" id='contacts_modal_search_field'>
  <a class="im_dialogs_search_clear tg_search_clear ng-hide" ng-click="search.query = ''" ng-show="search.query.length" style="">
    <i class="icon icon-search-clear"></i>
  </a>
</div>
<script>
window.onload=function(){
//by Class name
document.getElementsByClassName('contacts_modal_search_field')[0].value='Something'

//by Id 
document.getElementById('contacts_modal_search_field')[0].value='Something' //if 'contacts_modal_search_field' is your input box ID

//By Tag name
document.getElementsByTagName('input')[0].value='Something'
}
</script>
Negi Rox
  • 3,828
  • 1
  • 11
  • 18
  • there is a api call, that should work when I use my keyboard, but if I input the text with javascript it won't, may I simulate the api call with javascript ? – "Api call" – "contacts.search" – ibobo Jul 13 '18 at 13:35
  • tell me the exact problem what you are facing – Negi Rox Jul 13 '18 at 13:36
  • well I insert a contact name on the search box using "document.getElementsByClassName('contacts_modal_search_field')[0].value='Something'" then the contact name is in the box but the perform call didn't happened. If I use my keyboard to write any letter then the perform is made. there is no button at all "find" , when I check on console I see that on every key stroke there is contact search api call that simulate the button "find" I hope I was clear :) – ibobo Jul 13 '18 at 13:40
  • it's like on every letter I write in the search box someone run the search, but when I input it using javascript no body perform the search and I have to write something and only then the search is made. – ibobo Jul 13 '18 at 13:42
  • you need to call that API after inserting value in input box – Negi Rox Jul 13 '18 at 13:43
  • call same function which you are call onchange event of textbox. just call that after document.getElementsByClassName('contacts_modal_search_field')[0].value='Something' – Negi Rox Jul 13 '18 at 13:46
  • sorry Negi Rox, I didn't get how I can do that, is there a code that I can run? – ibobo Jul 13 '18 at 13:54
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/174951/discussion-between-ibobo-and-negi-rox). – ibobo Jul 13 '18 at 14:12