How can I get elements inner text after dom is being refreshed after the submit button?-CodePudding

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

CodePudding user response：

Try

$("#btn-submit").click(function(event){
    event.preventDefault();
})

Or without jQuery

var btn = document.getElementById('btn-submit');

btn.addEventListener('click',function(event){
    event.preventDefault();
})

CodePudding user response：

Try using the .preventDefault() event

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault).

CodePudding user response：

From what I understand you need the content not after the click, but after what the click is triggering. Here’s the same Q, answered. Basically you wait for the mods to happen then “read” the element content.

CodePudding user response：

to fix my issue, I thought of using window.open("URL") by creating a variable for it and then using it to process my the whole automation process on the new window and I was able to get all the result message from the new window

var newWindow = window.open("the URL");
newWindow.$('input[id="input"]').val("1234").trigger('change');
etc...