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

call a javascript pop up from html

I want to call a javascript pop up onsame page by clicking hyperlink , called pop up should be a form not any alert message.
Below is the code for hyperlink on which I want to call javascript:
<a href="#" id="mylink"
onclick="display(document.getElementById(${legList.ledgerId}).value);
return false">${legList.ledgerName}</a>
The above code is working fine but printing as a alert message.I am unable to get pop up as a form.Please help me with the code javascript which gets called on clicking hyper link and that pop up should be a form including some text fields for example reference.
Thanks in advance.

I think the problem is down to your browser blocking popups. For example, the following works for me in Firefox developer edition:
<a target="popup" onclick="window.open('', 'popup', 'width=500,height=200,scrollbars=no,toolbar=no,status=no,resizeable=no,menubar=no,location=no,directories=no,top=500,left=500')" href="http://www.your-site.com">Link</a>

how to run jquery code after hml form submission

this is my javascript code :
<script type="text/javascript">
$(document).ready(function(){
$('#saveBtn').click(function(){
var prenom_length = $('#form_prenom').val().length;
if (prenom_length<5) {
$('#prenom_error').html("please enter an other name");
}
});
});
</script>
the jquery code is working few seconds after form submission the displays the error text just before the page reloads but after reloading the page it disappears , i want it to keep the same text even after the page refresh how to do ?

If I understand you correctly, you want to show an error message after someone submits the form so that they know they should correct it. By default if you press a submit button in an HTML form the browser wil send the request to the server and the server will give the user a new page.
You want to prevent that last bit from happening. The browser should execute your jQuery and if you find an error in the form you want to prevent that default submit to the server from happening. As it happens (pun intended) jQuery can do exactly that, check out the documentation here.

How do we 'dispose' a Bootstrap modal?

I have a small application I am developing to learn AJAX and JavaScript. In this I have method saveData() that is triggered when a save button is clicked. All is working fine, but I realized that the page was refreshing so I searched the web and found the JavaScript method event.preventDefault(). This method worked fine. But that got me into problem, my modal dialog was staying open instead of closing. Again, I found hide method to "close" the modal. That solved it, BUT when I click the to open the modal it is bringing me the recent data I sent to the DB. I am from Java background and I began to think that hidedid not kill the modal.
My question: Is there a method to completely destroy the modal the way is done with JFrame.dispose()method in Java?
The code I was using is below:
function saveData(){
var name=$('#nm').val();
var email=$('#em').val();
var phone=$('#hp').val();
var address=$('#al').val();
event.preventDefault();//prevent the page from refresh
$.ajax({
type:"post",
url:"server.php?p=add",
data:{nm:name,em:email,hp:phone,al:address},
success: function(data){
viewData();
$('#addData').modal('hide');//close the modal.
}
});
}

You can just clear the values in your input tag every time you open the modal.

I already faced this problem with the modal for clear all value.but i using the follow code after hiding the modal.
My modal id is #modal
$('#modal').hide();
$('#modal')
.find("input,textarea,select")
.val('')
.end()
.find("input[type=checkbox], input[type=radio]")
.prop("checked", "")
.end();
if you have any prolem then you can refer the link that may help you : How to clear all input fields in bootstrap modal when clicking data-dismiss button?

how to close colorbox?

hi i have a link when clicked opens a colorbox with a form in it what i want that when i click on the submit button the form will be submitted via ajax and based on the returned data
if(error on the server side){
the error will be displayed at the top of the form;
// colorbox still open
}else{
the returned data will be displayed on the original page;
close the colorbox;
}
so i did all that except the close colorbox part i used this code:
$.colorbox.close();
and this didn't work too:
parent.jQuery.colorbox.close();
any help, thanx in advance.

Had this a while back, cant remember which it is...
Try this...
$(window).colorbox.close();
or this...
jQuery(window).colorbox.close();
or this...
jQuery('#cboxClose').click();