I'm working on automating a task (filling a form and submitting data then getting the result message where the data is being read from a txt file line by line).
While running my JS code via the console, everything works fine until before the clicking on submit button. after the click on the submit button, I can see the HTML is being reloaded with new data and the URL is changed from www.example.com to www.example.com/requests/12345 and then the next step after the click is not respected.
I thought may be because I was using:
document.getElementByID("btn-submit").click();
and changed it to
$("#btn-submit").click().trigger('change');
But still same issue.
I tried to use sleep functions and setTimeout to wait for the new HTML to load but this didn't help at all :(
The task is simple steps until button click all works perfect, I'm stuck only at after the submit button as I want to get the results that shows on the page after clicking the submit button.
Any ideas please what is being done wrong from my side?
The Elements I'm trying to get are in a div that is empty before the submit button is being clicked like this
<div id="message-bar">
</div>
After the submit button is clicked it is filled like the below (also the URL is changed to something link www.example.com/requests/12345 - of course the result elements won't show if the button is not clicked:
<div id="message-bar">
<div id="alert-success" class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<div class="text alert-text">Request approved!</div>
<ul id="bullet-items"><li>Thank you</li></ul>
</div>
</div>
I tried to check if the element is not empty, then get the elements innerText, but seems like my code is being removed when the page URL changes after the submit button:
if (document.getElementById("message-bar").innerText != "") {
// do something
}
Thank you so much
Try using the .preventDefault() event
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault).
Try
$("#btn-submit").click(function(event){
event.preventDefault();
})
Or without jQuery
var btn = document.getElementById('btn-submit');
btn.addEventListener('click',function(event){
event.preventDefault();
})