We Keep Coding

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

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
$("#btn-submit").click(function(event){
event.preventDefault();
})
Or without jQuery
var btn = document.getElementById('btn-submit');
btn.addEventListener('click',function(event){
event.preventDefault();
})

Try using the .preventDefault() event
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault).

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.

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...

How to simulate properly invoking a button via JS?

I'm using jQuery 1.10 in my project.
HTML:
<a id="btnStampa "class="btn btn-danger" href="" role="button" target="_blank" style="display:none;">
Print
</a>
JS:
function Print(e) {
var data = e.data.record;
if (data.token==null)
return;
$("#btnStampa").attr("href", "Ristampa41/" + data.token);
$('#btnStampa').trigger('click');
}
When I invoke Print method (within a table passing a token code) it doesn't open new window.
If set the button to visible, and I click after Print method invoked the working is that wanted
When I invoke Print method (within a grid passing a token code) it doesn't open new window.
If I set the Anchor tag to visible, and I click after Print method invoked the working is that wanted.
I also tried this code
$('#btnStampa').click();
but it doesn't work1
I need to have same behavoiur when I click on button but via JS.

Did you try click?
$('#btnStampa').click();
EDIT
Watchout: in your HTML, your ID has an extra space at the end and this must come from it ;)
By the way, I'm no jQuery expert, but did you consider using vanillaJS?
var link = document.querySelector('#btnStampa');
link.href= "Ristampa41/" + data.token;
link.click();
This works like a charm.

How to detect a click as soon as possible in JavaScript?

I have the following code on my webpage:
<span id="my-id">Button</span>
<script type="text/javascript">document.getElementById("my-id").onclick = function(event) { alert("Clicked Button!"); };</script>
On my webpage, the actual code is like this:
<html>Lot of markup</html>
<button>My button</button>
<script>My one line script shown in the above snippet.</script>
<iframe>Two iframes</iframe>
<html>More HTML</html>
Since the script tag comes just after the button, it should be detecting the click but it doesn't. The click is detected only after the page has loaded. Why is that?
Is there anything that I can do to detect the click as soon as possible.

You could put the onclick event directly on the span tag. That would make it so that it works as soon as that part of the DOM has loaded, rather than waiting until the whole page has loaded to execute the script.
<span onclick="myFunction()">Button</span>
Caution:
Note that if your myFunction() is part of a script that will be loaded at the end, it still won't work. You could do something simple here, however, including the whole functionality right in the markup. For example:
<span onclick="alert('You clicked me')">Button</span>
Or something else simple.

javascript execute a tag on load

I have an html page with an a tag in it, and I want to know how can I make a Javascript code that executes it when the page loads (do the same action as if an user had made click on it)
Here's the code of my a tag
<div class="social-login">
<div class="btn btn-facebook">Facebook</div>
</div>
What I want is to automatically register, if possible without the user seeing the original html. (I want this because a user can get to this html from different ways, and in one of them I want to automate the registeration)

automatically register without the user seeing the original html, add code at the beginning of html
location.href="{% url socialauth_begin "facebook" %}"

Try triggering a click on the document.ready() function when using JQuery:
$(document).ready(function()
{
$(".social-login a").trigger("click");
});

how to prevent popup javascript onclick event

i have link
<a onclick="return package_tour_order(14400287396);" href="javascript:;">advanced</a>
<a>doit</a>
need to get value from onclick only ID nubmer, but this
return package_tour_order(14400287396) is javascript function that popup new window with informationabout that ID
if i run this code
$('a:contains("advanced")').attr('onclick').match(/\d+(?=\))/)[0]
it works fine but when i run in my project with that javascript function(this function is loaded from another site) its does not work and popup window
i need to disable onclick somehow and get only that ID number, how can i doo that?

Don't make it a link. Make it a span or whatever. Also... what do you mean by "function is loaded from another site". If the script is loaded that should not influence things.