We Keep Coding

I want to preview HTML form data in pop window before submit. How to do that using JavaScript?

Following is my HTML Code having two buttons, Preview and Submit. I want to pop a window showing form preview when click on Preview and then submit the form when I click on Submit.
<form action="">
<div class="search-form">
<div class="form-header">
<h4>Post a New Job</h4>
</div>
<label for="job_title">Job Title</label>
<input type="text" name="job_title" id="job_title" placeholder="Hiring for which position">
<label for="company">Company Name</label>
<input type="text" name="company" id="company" placeholder="Name of the hiring organization">
<label for="experience-required">Total Experience Required</label>
<div class="input-range">
<input type="number" min="0" max="50" name="experience-required-min" id="experience-required-min"
placeholder="Min in Years">
<span>To</span>
<input type="number" min="0" max="50" name="experience-required-max" id="experience-required-max"
placeholder="Max in Years">
</div>
<label for="salary-range">Salary Range</label>
<div class="input-range">
<input type="number" min="0" max="50" name="salary-range-min" id="salary-range-min"
placeholder="Min in Lpa">
<span>To</span>
<input type="number" min="0" max="50" name="salary-range-max" id="salary-range-max"
placeholder="Min in Lpa">
</div>
</div>
<label for="job-desciption">Job Description</label>
<textarea name="job-desciption" class="input-range" placeholder="Enter Job Desciption"
style="height: 100px"></textarea>
</div>
<br>
<a href="" <button class="btn btn-lg btn-warning" type="submit" name="search">Post</button>
</a>
<a href="" <button class="btn btn-lg btn-warning" type="submit" name="search">Preview</button>
</a>
</form>

You can do this using modals , you can use Bootstrap or Materialize css I'll link them below.
Bootstrap
https://getbootstrap.com/docs/5.1/components/modal/
materialize
https://materializecss.com/modals.html#!
After you implement a modal in your app you can easily use it's buttons to submit your form or cancel.
please let me know if this hepled

First, the preview button type should be button and not submit. Button with type as submit causes the form to submit. Also, do not wrap the button within the <a> anchor tag. That is unnecessary.
<!-- Note the use of type="button" -->
<button class="btn btn-lg btn-warning" type="button" name="search">Preview</button>
Second, you will need a JavaScript code to handle click handler. You can do something like this:
// Get reference to the preview button
const previewButton = document.querySelector('.search-form button[type="button"]');
previewButton.addEventListener('click', () => {
// Step 1: Read form data here using DOM APIs
// Step 2: Open preview using some modal dialog.
window.alert(/* Show form data */);
// Or use some other bootstrap or equivalent library dialog box.
});
There are many ways to write the JavaScript. Choose one that works best for you.

Selecting one <td> from a table

I have a table which consist of user added data. All the 's added are added with a equal button. Like this:
<td>
<form action="newBet.jsp" method="get">
<fieldset>
<input class="button betButton1" id="Won" type="submit" name="W" value="✔"/>
<div class="closeEarlyForm" style="display:none;">
<input class="form-control" name="update1" type="number"/>
<input class="button betButton1" type="submit" name="update" value="Close early"/>
</div>
<input class="closeEarlyLink" type="button" value="✎ Close early?"/>
</fieldset>
</form>
</td>
This wokrs fine. Now, I want to add some jquery which toggle the hidden div element. This is where I run into troubles. I can't seem show the div element only on the clicked element. Instead it shows the hidden div element on all the td's.
$(document).ready(function(){
$(".closeEarlyLink").click(function(e){
e.preventDefault();
$(".closeEarlyForm").fadeToggle();
});
});
I know that my problem is that I select all the elements with the class, but I cant figure out how to only toggle/select the hidden element on the specific td.

You can try using this keyword with parent() and find():
$(this).parent().find(".closeEarlyForm").fadeToggle();
Demo:
$(document).ready(function(){
$(".closeEarlyLink").click(function(e){
e.preventDefault();
$(this).parent().find(".closeEarlyForm").fadeToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td>
<form action="newBet.jsp" method="get">
<fieldset>
<input class="button betButton1" id="Won" type="submit" name="W" value="✔"/>
<div class="closeEarlyForm" style="display:none;">
<input class="form-control" name="update1" type="number"/>
<input class="button betButton1" type="submit" name="update" value="Close early"/>
</div>
<input class="closeEarlyLink" type="button" value="✎ Close early?"/>
</fieldset>
</form>
</td>

insertBefore stops working in form If I add div

I created dynamic form in which I can add as many authors as I want to.
<form action="uploadtodb.php" target="dummyframe" method="post" name="myform">
<p>
Authors last name: <input type="text" name="authorln[]" size="32" />
Authors first names: <input type="text" name="authorfns[]" size="32" />
</p>
<p id="add_author_button">
<button type="button" onclick="add_author()">Add new author</button>
<button type="button" onclick="remove_author()">Remove last author</button>
</p>
</form>
where function add_author() adds to myform new paragraph denoted below as para
document.myform.insertBefore(para, document.getElementById("add_author_button"));
It works perfectly, but then I wanted to add some styles to it. So I added div:
<form action="uploadtodb.php" target="dummyframe" method="post" name="myform">
<div id="authors">
<p>
Authors last name: <input type="text" name="authorln[]" size="32" />
Authors first names: <input type="text" name="authorfns[]" size="32" />
</p>
<p id="add_author_button">
<button type="button" onclick="add_author()">Add new author</button>
<button type="button" onclick="remove_author()">Remove last author</button>
</p>
</div>
</form>
After such modification buttons do not respond.

Although you can use document.<form name> for forms, you can't do that for arbitrary elements like your authors div. Why not just use getElementById()?
document.getElementById("authors").insertBefore(para, document.getElementById("add_author_button"));

how to expand/collapse and add new lines to a div on clicking in a button

I have some divs and when clicking on the button Expand/collapse i need a function that allows my client to add more divs on the form or not, like on the picture attached
i have tried the follwing code, its not working when clicking on the button, nothing happens
<div class="divVisible" id="mytable">
<p><label class="field2">Centro de Custo:</label><input type="text" class="text" id="centroCusto" name="centroCusto"></p>
<p><label class="field">Conta Contabil:</label><input type="text" class="text" id="contaContabil" name="contaContabil"/></p>
<p><label class="field">Periodo:</label><input type="text" class="num" id="date" name="date"/></p>
<p><label class="field">Saldo:</label><input type="text" class="num" id="saldo" name="saldo"/></p>
<p><label class="field">Saldo Total:</label><input type="text" class="num" id="saldoTotal" name="saldoTotal"/></p>
</div>
<input id="show_hide" type="button" value="Collapse/Expand" />
</div>
</fieldset>
</form>
</body>
<script type="text/javascript">
$("#show_hide").click(function() {
$("#mytable").append('<p><label class="field">Saldo:</label><input type="text" class="num" id="saldo" name="saldo"/></p>');
});
</script>

If you append the HTML you will just be creating a new element each time you click. You could always just have the HTML on the page with display:none, and then use jQuery .toggle() or .slideToggle() to expand/collapse.

how to make a javascript number keypad popup

i have a website with 3 pages. each page has a form with two input fields. i am trying to make a popup number-keypad that will populate what ever input field called it. below is that base code i keep coming back to.
<html>
<head><title>test</title></head>
<body>
<script> function num(id) { return document.getElementById(id); } </script>
<form action="/unitPage" method="POST" style=" text-align:center;">
Prefix: <input id="num" name"prefix" type="text" onfocus="num('keypad').style.display='inline-block';"/>
Number: <input id="num" name"number" type="text" pattern="[0-9]{6}" onfocus="num('keypad').style.display='inline-block';"/>
</form>
<div id="keypad" style="display:none; background:#AAA; vertical-align:top;">
<input type="button" value="7" onclick="num('num').value+=7;"/>
<input type="button" value="8" onclick="num('num').value+=8;"/>
<input type="button" value="9" onclick="num('num').value+=9;"/><br/>
<input type="button" value="4" onclick="num('num').value+=4;"/>
<input type="button" value="5" onclick="num('num').value+=5;"/>
<input type="button" value="6" onclick="num('num').value+=6;"/><br/>
<input type="button" value="1" onclick="num('num').value+=1;"/>
<input type="button" value="2" onclick="num('num').value+=2;"/>
<input type="button" value="3" onclick="num('num').value+=3;"/><br/>
<input type="button" value="X" onclick="num('keypad').style.display='none'"/>
<input type="button" value="0" onclick="num('num').value+=0;"/>
<input type="button" value="←" onclick="num('num').value=num('num').value.substr(0,num('num').value.length-1);"/>
</div>
</body>
</html>
is there a way of making one number key pad that i call from any page or do i need to make the above for each input?
thanks

One possible solution would be for you to add a javacript call into your header (by where you are currently calling the document.getElementById(id) call) that manipulates the DOM of that HTML, and simply inserts your div into it.
I'd recommend a shell div on each page for that element, then the javascript would just have to grab that div by the id ("keypad") and insert inner HTML.
Edit: as long as you share the javascript file between your 3 pages, you only have to implement the javascript once.