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>
Improve this question
2
  • 2
    document.getElementsByClassName('contacts_modal_search_field')[0].value='Something' Commented Jul 13, 2018 at 13:02
  • Possible duplicate of Set the value of an input field Commented Jul 13, 2018 at 13:04

3 Answers 3

Reset to default
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>

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

2 Comments

there is no id in the source code, that's why I tried to use class instead
@ibobo Check my third code snippet. I incorporated your code.
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>

Improve this answer

Comments

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>
Improve this answer

8 Comments

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"
tell me the exact problem what you are facing
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 :)
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.
you need to call that API after inserting value in input box
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.