1

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

Aboelmagd Muhammad
  • 21
  • 4

4 Answers4

1

Try using the .preventDefault() event

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

  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 25 '21 at 01:43
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 25 '21 at 05:28
1

Try

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

Or without jQuery

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

btn.addEventListener('click',function(event){
    event.preventDefault();
})
SamiElk
  • 2,272
  • 7
  • 20
  • Thank you for the suggestion, I've updated my question to make it more clear. Could you please let me know what this preventDefault will do exactly, as I understood it will make the button non responsive so I assume the new data I need won't show. Did I misunderstand it? Thank you – Aboelmagd Muhammad Oct 25 '21 at 07:50
0

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.

Dorian
  • 79
  • 6
  • Thank you, what I want is exactly the content after the submit button is clicked, because the URL is changing then it is as if my code running via the console is not there. I've updated my question to make it more clear. I will also look at the shared answer you suggested and hope it will help me. Thank you. – Aboelmagd Muhammad Oct 25 '21 at 07:48
0

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...
Aboelmagd Muhammad
  • 21
  • 4