In a web page I have a input box as below:
<input id="userId-inputEl" type="text" size="1" name="userId" placeholder="Enter Agent UserID..." style="width:100%;" class="x-form-field x-form-empty-field x-form-text" autocomplete="off" aria-invalid="false">
It looks like [![enter image description here][1]][1] as default when the page loads.
Now if I am trying to add value using
document.getElementById('userId-inputEl').value="test"
it writes the value in there and looks like [![enter image description here][2]][2]. After adding this value if I submit the form, it says the value is mandatory which means it has not accepted the value.
While typing manually, when I click on this box and type the value, it gets enabled and looks like this [![enter image description here][3]][3] and after submitting the form the value is accepted.
Now I have tried using
document.getElementById('userId-inputEl').click()
before passing the value, but it didn't work. After researching in google I found that there are some EventListeners attached with this element. They are as follows
[![enter image description here][4]][4]
I have tried using dispatchEvent with combination to blur, change, focus, input, keydown, mousedown, selectstart and textinput but of no use.
I'm new to eventlistener concept. How to achieve entering the value in the box using javascipt like it is done manually?
on opening the blur event from eventlistener tab in inspect window it looks like below:
[![enter image description here][5]][5]
I have no idea how to achieve this. Please help. [1]: https://i.stack.imgur.com/PVVuQ.png [2]: https://i.stack.imgur.com/z5ezn.png [3]: https://i.stack.imgur.com/TgD0X.png [4]: https://i.stack.imgur.com/lP5zV.png [5]: https://i.stack.imgur.com/LEzM1.png
You Can Try this using jquery. you have to download jquery or cnd if you download jquery then :
<head>
<title> My website</title>
<script src="jquery-3.5.1.min.js"></script>
</head>
or if you cnd jquery then
<head>
<title> My website</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
Next step : Html
<body >
<form id="AgentForm" name="AgentForm" >
<input id="userId-inputEl" type="text" size="1" name="userId" placeholder="Enter Agent UserID..." style="width:100%;" class="x-form-field x-form-empty-field x-form-text" autocomplete="off" aria-invalid="false">
<button type="submit" name="submit"> Submit</button>
</form>
</body>
js
$( document ).ready(function() {
$('#userId-inputEl').val("test")
$('#AgentForm').on('submit', function(e){
e.preventDefault();
console.log($('#userId-inputEl').val());
});
});