We Keep Coding

html onclick keeps redirecting to a function of javascript

Im calling a function from onclick of a button. When i press the button it executes my function deletes everything from the screen and displays the button inside my function. Everything works ok but why does it delete everything from screen. How to make it for it to only run the function but keep previous html elements prior to clicking the function?
<div id="form-container">
<form id="dim_form" action="">
<div class="bg">
<label class="form-label-a" for="dimm">Dimension</label>
<input id="dimm" type="text" />
</div>
<div class="bg">
<label class="form-label-b" for="dimm_upper">Upper tolerance</label>
<input id="dimm_upper" type="text" required />
</div>
<div class="bg">
<label class="form-label-c" for="dimm_lower">Lower tolerence</label>
<input id="dimm_lower" type="text" required />
</div>
<div class="bg">
<input class="form-button" type="submit" onclick="data_table();" value="Calculate" />
</div>
</form>
</div>
data_table()
document.write("<input class='download' type='button' id='button-a' value='download xls' />");
I tried with "button" instead of submit. return false, basically everything i found on google and nothing works for me.

The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.
When this method is not used for testing, it is often used to write some text to an output stream opened by the document.open() method. See "More Examples" below
see the full documentation here: https://www.w3schools.com/jsref/met_doc_write.asp
if you want to add some nodes without cleaning the whole HTML try append
https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append

document.write will erase everything you had earlier. Instead use append.
function data_table() {
const input = document.createElement('input');
input.type = "submit";
input.id = "button-a";
input.value = "download xls";
document.querySelector('.bg').appendChild(input);
}
<div class="bg">
<input class="form-button" type="submit" onclick="data_table();" value="Calculate" />
</div>

Document is referred to the entire html page when you are trying to do document.write it will write on the entire page....
There can be couple of work arounds but i will suggest this one
Give class to the element you want to add element to.
Get element by the class you assign to the element in first step
var x = document.getElementsByClassName("example");
if you want to keep whats already there
x.appendChild("whatever you want to add goes here");
if you want to add only new element and discard everything previously present
x.innerHtml="whatever you want to add goes here";

JAWS doesn't read dynamic content. IE11

I have a search form. When user submits form, ajax request is sent to the server. When the response comes, I update found items count value, but JAWS reads previous items count value.
To get JAWS read new content I use aria attributes and role="status". But JAWS still doesn't work as expected.
What I've tried:
Getting screen reader to read new content added with JavaScript,
aria-live and JAWS, ARIA Live Regions and etc.
What am I doing wrong?
HTML
<form class="search-form">
<label class="keyword-search-input-label" for="keyword-search-input">
<span class="hide">Search</span>
<input class="form-control" type="text" id="keyword-search-input" name="keyword"/>
</label>
<button id="clear-field-button" type="reset">
<span class="hide">Clear Search Field</span>
</button>
<button id="search-button" type="submit" aria-describedby="number-found-items">
<span class="symbol-label">Search</span>
</button>
</form>
<div id="number-found-items" role="status" aria-live="assertive" aria-atomic="true" aria-relevant="all">
<span id="number-found">0</span>
items found
</div>
JS
function updateNumberFound(value) {
$numberFound.text(value || 0);
}
jsFiddle
To reproduce the problem try to focus on search input, type some text and press search button, while JAWS is on.

The correct way to do this is to use a role="log" region that is inserted into the document when it loads and is off screen. Then to append the text that you want announced to that region when updates occur.
I have modified your fiddle to include the a11yfy library's code which does this: https://jsfiddle.net/17mkL2n5/1/embedded/result/
jQuery.a11yfy.assertiveAnnounce(value + ' items found');
I have tested this on OS X with VO, Windows with NVDA and Windows IE 11 with JAWS 14 and they all work correctly.

Can't assign a new value to my autocomplete box

I've created a search page that can be toggled between french and english. So when the user searches a record and toggles to french it displays the same record they were viewing on the english page.
What I want to do is display the record name in the search box when the page is toggled.I assumed it was as simple as doing a $('#inputID').val(record); but it doesn't seem to be working. I've alerted the record name and it works fine, so I'm stumped. All the scripts are linked correctly as well so that's not the problem.
Autocomplete Box Code
<div id="ui-widgit">
<label for="searchParams">
<h1>Search All Programs (By Screen Number or By Error Code):</h1>
</label>
<input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" />
<input type="button" value="Search" name="searchBtn" class="btn_Design" onclick="showSearch(inputID.value)"/>
</div>
Try to change the value of inputID with this
$('#inputID').val(recordToggle);
also have tried this:
$('#inputID input').val(recordToggle);

It is hard to tell with your presented markup but I am assuming you are trying to change the value of $('#inputID') after the page refreshed. It is important where you put this code. If it is placed before <input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" /> you will not return anything with $('#inputID') so you will change the value of nothing to your text. It will give no error. To fix this you can use:
$( document ).ready(function(){
$('#inputID').val(recordToggle);
});
Be sure to read about jQuery's ready function because load may be the better choice.
If this doesn't fix your problem let me know. I will update my answer.

One submit button opens two pages - one in a new window

I have a zip code submit button on my website. When user presses submit button I would like the current page (self) to go to a different page (of results) as well as a new tab / page opening. Here is what I am using. The problem I am having is that the second window does not open. Everything else works. I don't have much experience in coding. I've pieced this together through search.
<form id="header-box-form" action="http://www.quotesfortermlife.com/results.html" method="get">
<input type="text" onkeypress="return submitenter(this,event)" maxlength="10" size="16" id="zipcode" name="zipcode" tabindex="1">
<input onmouseover=
"this.src='http://www.quotesfortermlife.com/pictures/orng_btn02.png';"
onmouseout="this.src='http://www.quotesfortermlife.com/pictures/orng_btn01.png';"
onclick=
"newWindow('http://www.quotesfortermlife.com/compare-rates.html','window2');window.open('http://www.quotesfortermlife.com/results.html','_self',' ')"
src="http://www.quotesfortermlife.com/pictures/orng_btn01.png"
type="image">
</form>
Thanks for any help you can offer.

Try changing this
onclick="javascript:window.open("http://www.quotesfortermlife.com/compare-rates.html","other_window")
to this
onclick="window.open('http://www.quotesfortermlife.com/compare-rates.html','other_window')
Firstly the "javascript:" part is wrong, it's only needed in a link's "href" attribute, this is misused a lot. Secondly because you had a " around your URL it was closing the onclick attribute. So lesson is to use single quotes if you have to quote inside a double quote.

How to add a loading screen while waiting for search result to show up?

I have a home page that contains a texfield that reads the user input, sends the value of whatever is typed in and sends it to another page where the search will happen and display the search results.
<div>
<form action="****.jsp" method="get" id="search-id">
<input type ="text" name = "search" id="search" size="70"/><br>
<br />
<input type="Submit" value="Search" class="button rounded">
</form>
<br />
<br />
<br />
</div>
But the thing is that it takes some time before the actual second page shows up, therefore I wanted to make a little loading gif to appear while waiting for that page to actually load up. I have a gif file ready to use, but I can't figure out how to implement it into the website so that it would show up after I click on the search button.
I'm very new to HTML/JS and I been searching for a possible way for days. Is this possible at all?

Add a submit event handler to your form, that makes the animated gif appear and doesn't prevent the form submission. Example with JQuery:
$('#search-id').submit(function() {
$('#animated-gif').show();
});
assuming you have the animated gif hidden somewhere in the page:
<img src="..." style="display: none;" id="animated-gif"/>

Since you are new to HTML, you will need to search more about ajax and jquery. That will ideally answer your question. Have a look on this similar question as well. Hope this will help you.