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";

different text for every row Jquery Modal/Dialog form

How I can change the text that is in the jdialog box message for each row?
As you can see, in every row in the column Order Details there is a Show button.
I would like for each row to have different text there.
I tried changing the name values, and I also put inside every td element the code for the button, but it still doesn't work.
The specific code for the text:
<div id="dialog-form" title="Order Details">
<p class="validateTips">Spicy Sandwitch</p>
<p class="validateTips">More</p>
<form>
<fieldset>
<label for="name">More Comments</label>
<p class="validateTips">Sandwitch only lettuce</p>
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget"
The full code here

In order to make the content of the dialog changes from record to another
You didn't explain How will you load the custom content? but I'll guide you to how to customize the dialog content per record.
First: Create a JS method called openDialog(), this method can take the context of the dialog as a parameter, or it may take just the record ID and load the content via AJAX or something
function openDialog(content="", record_id=0)
{
if(content.length > 0) // if you're passing content as a paramter
dialog.html(content);
if(record_id!=0) // if you're passing the record ID as a paramter
{
// load content via ajax or something
dialog.html("loaded content via AJAX for user number "+record_id);
}
dialog.dialog("open");
}
Then call this method in each "Show" button you have
<button id="create-user-1" onclick="openDialog('Hello User #1');">New Show</button>
<button id="create-user-2" onclick="openDialog('',2);">New Show</button>
Update actually your full code is a little bit messy but as you requested, I tried to apply my solution on your fiddle code, here's my working example
https://jsfiddle.net/doaa_magdy_55/qtvw75z6/20/#&togetherjs=jSCLnBoUen

atm the text that appears in there is hardcoded on your html
<p class="validateTips">Spicy Sandwitch</p>
unless you change it with javascript this text "Spicy sandwitch" will always be the same no matter how much times you create a new one. I didnt really read all your code because its way too big , but you can do something like this to adress each one of your entries individually(atribute them ids)
<div id="dialog-form" title="Order Details">
<p id="something1.0" class="validateTips">Spicy Sandwitch</p>
<p id="something1.5" class="validateTips">More</p>
<form>
<fieldset>
<label id="something2.0" for="name">More Comments</label>
<p id="something3.0" class="validateTips">Sandwitch only lettuce</p>
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
and then, when you create a new entrance of your row , you can go to each id specifically and decide what is shown
$('#something1.0').text('new Spicy sandwitch');
$('#something2.0').text('moreeee');

Make the following changes to your code:
Define elements inside the dialog with references to hold your dynamic content
<div id="dialog-form" title="Order Details">
<p class="validateTips field1"></p>
<p class="validateTips">More</p>
<form>
<fieldset>
<label for="name">More Comments</label>
<p class="validateTips field2"></p>
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
Define the content you want for each row, statically or via AJAX
var order1 = {
field1: 'Spicy Sandwich',
field2: 'Sandwich Only Lettuce'
};
var order2 = {
field1: 'Epic Pizza',
field2: 'Pizza Without Pinneaple'
};
var orders = [order1, order2];
Edit the code to populate the dialog
$(".showDialog").button().on("click", function() {
var row = $(this).closest('tr').index();
$('#dialog-form .field1').html(orders[row].field1);
$('#dialog-form .field2').html(orders[row].field2);
dialog.dialog("open");
});

How to get a image behind text when button clicked

I am making a site and I want to have a help button. When it is clicked an image shows up behind the text.
<body>
<div id="inputdiv">
Team 1:
<p>
<input type="text" name="fname" id="name">
<p>
Team 2:
<p>
<input type="text" name="fname2" id="name2">
</div>
<button onclick="showimage"> Help</button>
<img src="https://support.files.wordpress.com/2009/07/pigeony.jpg?w=688">
How would I do this? Thanks.

First if you want to call a jquery function you must call as "showimage()" (in your code you should write as
<button onclick="showimage()"> Help</button>
And if you want to display image behind the text, set id for that div where you want to show the image and write jquery as
function showimage(){
$("#id-of-that-div").css("background-image", "url('https://support.files.wordpress.com/2009/07/pigeony.jpg?w=688')");
}

first if you are trying to call a function it should be onclick="showimage()" not just onclick="showimage"
For the picture:
Try putting the text and picture in the same div maybe? I know that text is defaulted to go over a picture. If not look into some frameworks like foundation

Dynamic javascript form

I have a simple form as follows so a user can type the name of a question:
<input type="text" id="question_name" name="question_name" value="">Question Name: <br />
Add Another
<div id="container"/>
<input id="go" name="btnSubmit" type="submit" value="Submit" class="btn" />
I am wanting to create a Javascript function (addNewQuestion()) which allows a user to add another question dynamically by clicking the "Add Another" link. All the text boxes with the questions should be displayed on the screen.
I understand that it is using getElementById and most likely a for loop but I keep hitting a brick wall. Can anyone show me a simple solution please?

There are many ways to do this. Here's a simple example in plain JavaScript. Note that you will either want to avoid using ids so they aren't duplicated in the DOM, or you will want to dynamically name them.
function addNewQuestion() {
var container = document.getElementById("questions");
var question = document.querySelector(".question");
container.appendChild(question.cloneNode(true));
return false;
}
.question { display: block }
<div id="questions">
<label class="question">
Question Name:
<input type="text" value="" />
</label>
</div>
Add Another

jQuery.val() doesn't work on an <input> tag

After typing something in an input, and clicking on the button, ".val()" return an empty value, any idea why?
HTML CODE:
<div class="mainClass">
<div class="class1" >
<div class="class2">
<h3>Settings 1</h3>
<label>
<span>Text 1:</span>
<input type="text" name="text">
</label>
<label>
<span>Text 2:</span>
<input type="text" name="text2">
</label>
</div>
</div>
<div class="class3" >
<div class="class4">
<h3>Settings 2</h3>
<label>
<span>Text 1:</span>
<input type="text" name="text">
</label>
<label>
<span>Text 2:</span>
<input type="text" name="text2">
</label>
</div>
</div>
</div>
<button id="Go" class="go" >GO </button>
JAVASCRIPT CODE:
$('#Go').on('click', function() {
alert($('.class1 input').val()); //return an empty value
$('.class1 input').val("test");
alert($('.class1 input').val()); //return test
});
EDIT:
Even this doesnt work, and here i have only one input so I can't type in the wrong one:
<div class="mainClass">
<div class="class1" >
<div class="class2">
<h3>Settings 1</h3>
<label>
<span>Text 1:</span>
<input type="text" name="text">
</label>
</div>
</div>
</div>
<button id="Go" class="go" >GO </button>
EDIT 2: I found a beginning of the problem...
When I am doing that:
$('.class1 input').each(function () {
alert($(this).attr('name') + " value:" +$(this).val() );
});
I get two "alert" like this:
text value:
text value:myinputText
So two created for one in my HTML, the first one is empty and the second one work well!
Looking closely to my page, i found that all element are duplicated( <select,field, input...)
Any idea how is that possible? Am i calling two time my html file?
And all my code is in a popup( I don't know if it can help)
(I am new in Javascript and jQuery)
Thanks

There's more than one element matching '.class1 input'. You probably didn't fill the first one of the set.
From the documentation :
Get the current value of the first element in the set of matched
elements.
While val('text') fills all matching elements :
Set the value of each element in the set of matched elements
Which is why you see something in your second alert.
You'd better use a more selective selector. Usually we use an id, or a name if a form is used to send the values to a server.

$('.class1 input').val()
refers to two elements
<input type="text" name="text">
and
<input type="text" name="text2">

You have more than one element that matches.
From the jQuery docs
.val()
Get the current value of the first element in the set of
matched elements or set the value of every matched element.
You are only getting the first element of the matched set as the docs state. If you want all the values, you need to loop over the set.

Wrap your Jquery code around a Document-ready block:
$('document').ready(function(){});
like so:
$('document').ready(function(){
$('#Go').on('click', function() {
alert($('.class1 input').val()); //return an empty value
$('.class1 input').val("test");
alert($('.class1 input').val()); //return test
});
});
Even with so much help from google search and Stackoverflow, it took us 1 hour to identify this issue.

I had a similar problem Chrome repeatedly told me .val() is not a function, instead of using .val() I had to use .value That got the job done for me hope it works for you.