I normally write old school Javascript but as far as I understand the specs, there are many ways of doing what you want. One of them (in my ad hoc writing) can be:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
</style>
<body>
<input id="someInput" type="text"></input>
<button id="someButton">Click</button>
<script id="mainScript" type="text/javascript">
!function(){
var someButton = document.getElementById("someButton"); //don't need to do this in chrome
/*attach event handler*/
someButton.addEventListener("click",function(e){
var that = e.target.__input || (e.target.__input = document.getElementById("someInput"));
/*if emtpy do nothing*/
if(!that.value){return}
var _promise = (async function(){
return that.value;
}())
.then(function(res,rej){
console.log(res);
return res;
});
console.log(_promise);
},false)
}()
</script>
</body>
</html>
Save the above snippet and give it an extension of .html. It should console the resolved value and also the promise itself. I also console logged the entire promise which 'should be logged first' rather than the resolved value so you better grasp the eventloop - microtask queue order.
The jquery version is similar to implement. If you already have an external Promise API, then replace the asnyc iife with that one.